react-native-webview-leaflet
react-native-webview-leaflet copied to clipboard
Local image in mapMarkers icon
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:
'&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 ?