react-native-webview-leaflet icon indicating copy to clipboard operation
react-native-webview-leaflet copied to clipboard

Local image in mapMarkers icon

Open UlysseGuyon opened this issue 5 years ago • 0 comments
trafficstars

Hello, I am currently trying to display a local image (icon.png) via the icon attribute of the mapMarkers prop of the WebViewLeaflet component. To simplify, my file looks like this :

// App.tsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { WebViewLeaflet } from 'react-native-webview-leaflet';

export default class App extends React.Component<{}, AppState> {
  render () {
    return (
      <View style={styles.container}>
        <WebViewLeaflet
          mapCenterPosition={{ lat: 47.2821656, lng: -1.5198241 }}
          zoom={8}
          mapLayers={[
            {
              attribution:
                '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
              baseLayerIsChecked: true,
              baseLayerName: "OpenStreetMap.Mapnik",
              url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            }
          ]}
          mapMarkers={[
            {
              id: "1",
              position: { lat: 47.2821656, lng: -1.5198241 },
              icon: '<img src="../assets/icon.png" alt="alt" width="50" height="50">', // <--- Here is the problem
              size: [32, 32]
            }
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

And my project architecture looks like this :

.
+-- node_modules
|    +-- react-native-webview-leaflet
|    |   +-- (...)
|    +-- (...)
+-- assets
|    +-- icon.png
+-- App.tsx

I tried the solutions presented by @pierroo on issue #49 by starting from the directory of the node module but I tried from 1 to 10 consecutive ../ in the img source and nothing worked, I always see the alt string instead of the icon.png. Even ./assets/icon.png or /assets/icon.png or ./icon.png or C:/(...)/assets/icon.png (for absolute path in windows) don't work.

Is there any solution to this problem ?

UlysseGuyon avatar Jun 05 '20 16:06 UlysseGuyon