Browse Source

Fixing map marker icon loaded from its own file

master
GabrielTrettel 3 years ago
parent
commit
2cb12d6d06
  1. 8
      src/app/components/map/LeafLetMap.js
  2. 36
      src/app/screens/MapFeedScreen.js

8
src/app/components/map/LeafLetMap.js

@ -51,16 +51,15 @@ function handleEvent(event) {
async function insertMarker(mapRef, ID, cords, icon) { async function insertMarker(mapRef, ID, cords, icon) {
var iconSvg = icon; var iconSvg = icon;
if (typeof icon !== 'string' && !(icon instanceof String)) { if (typeof icon !== 'string' && !(icon instanceof String)) {
iconSvg = await loadLocalAsset(icon); iconSvg = await loadLocalAsset(icon);
} }
console.log(String(iconSvg));
mapRef.injectJavaScript(` mapRef.injectJavaScript(`
var customIcon = L.divIcon({ var customIcon = L.divIcon({
className: 'marker-class', className: 'marker-class',
html: ${iconSvg} ,
html: \`${iconSvg}\`,
iconSize: 100 iconSize: 100
}); });
@ -71,8 +70,7 @@ async function insertMarker(mapRef, ID, cords, icon) {
// Add marker to map and bing callback event to its function // Add marker to map and bing callback event to its function
markers[${ID}].addTo(map).on('click', onPopupClick); markers[${ID}].addTo(map).on('click', onPopupClick);
}
`);
}`);
} }
export { loadHTMLFile, handleEvent, insertMarker, goToRegion }; export { loadHTMLFile, handleEvent, insertMarker, goToRegion };

36
src/app/screens/MapFeedScreen.js

@ -20,24 +20,24 @@ export default function MapFeedScreen() {
}, },
icon: require("../components/map/icon.html"), icon: require("../components/map/icon.html"),
}, },
// {
// ID: "2",
// title: "Casa do Daniel",
// icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
// cords: {
// lat: 51.5032,
// long: -0.09589,
// },
// },
// {
// ID: "3",
// title: "Casa do Gabriel",
// icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
// cords: {
// lat: 51.509,
// long: -0.09581,
// },
// },
{
ID: "2",
title: "Casa do Daniel",
icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
cords: {
lat: 51.5032,
long: -0.09589,
},
},
{
ID: "3",
title: "Casa do Gabriel",
icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
cords: {
lat: 51.509,
long: -0.09581,
},
},
]; ];
return ( return (
<View style={styles.container}> <View style={styles.container}>

Loading…
Cancel
Save