From 1e7214170a6aa09fdc8b734b05ff565ed0e1ee4d Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Thu, 27 May 2021 19:27:50 -0300 Subject: [PATCH] Working example of storing an ID inside marker object in OSM. --- src/app/components/map/Map.html | 170 +++++++++++++++--------- src/app/components/map/OpenStreetMap.js | 31 ++--- 2 files changed, 117 insertions(+), 84 deletions(-) diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html index 9786b53..a2ce7a6 100644 --- a/src/app/components/map/Map.html +++ b/src/app/components/map/Map.html @@ -1,68 +1,108 @@ - - Mobile tutorial - Leaflet - - - - - - - - - - -
- - - + + Mobile tutorial - Leaflet + + + + + + + + + + +
+ + + diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index af88958..8c66fbe 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -29,23 +29,20 @@ function clickCallback(payload, props) { } function parseInput(event, props) { - // console.log(event); const payload = JSON.parse(event); - // console.log(payload); - code_to_function[payload.code](payload, props); } function insertMarker(mapRef, props) { - console.log(props); mapRef.injectJavaScript(` - var layer = L.marker([${props.cords.lat}, ${props.cords.long}], {ID: ${props.ID}} ) - layer.ID = ${props.ID} - layer.addTo(mymap).bindPopup("${props.title}
I am a popup.");`); + markers[${props.ID}] = L.marker([${props.cords.lat}, ${props.cords.long}], + {ID: ${props.ID}}); + markers[${props.ID}].addTo(map).on('click', onPopupClick); + `); } function goToPosition(mapRef, lat, long) { - mapRef.injectJavaScript(`mymap.setView([${lat}, ${long}], 13);`); + mapRef.injectJavaScript(`map.setView([${lat}, ${long}], 13);`); } export default function OpenStreetMap(props) { @@ -53,22 +50,18 @@ export default function OpenStreetMap(props) { const [finishedLoad, setFinishedLoad] = useState(false); const [webviewContent, setWebviewContent] = useState(null); - loadHTMLFile() - .then((html) => setWebviewContent(html)) - .catch((e) => console.warn(e)); - - props.animateToPosition != null && - goToPosition(mapRef, ...props.animateToPosition); + if (mapRef != null) { + props.animateToPosition != null && + goToPosition(mapRef, ...props.animateToPosition); - const onLoad = () => { props.markersList != null && props.markersList.length > 0 && props.markersList.map((m) => insertMarker(mapRef, m)); - }; + } - useEffect(() => { - mapRef != null && onLoad(); - }, [finishedLoad]); + loadHTMLFile() + .then((html) => setWebviewContent(html)) + .catch((e) => console.warn(e)); return (