diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index 9e78933..699463a 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/src/app/components/map/LeafLetMap.js @@ -15,8 +15,8 @@ const loadHTMLFile = async () => { } }; -function goToPosition(mapRef, lat, long) { - mapRef.injectJavaScript(`map.setView([${lat}, ${long}], 13);`); +function goToRegion(mapRef, { lat, long, zoom }) { + mapRef.injectJavaScript(`map.setView([${lat}, ${long}], ${zoom});`); } const code_to_function = { @@ -38,18 +38,25 @@ function markerCallback(payload) { }; } -function parseInput(event) { +function handleEvent(event) { const payload = JSON.parse(event.nativeEvent.data); return code_to_function[payload.code](payload); } -function insertMarker(mapRef, props) { +function insertMarker(mapRef, ID, cords) { mapRef.injectJavaScript(` - if (!(${props.ID} in markers)) { - markers[${props.ID}] = L.marker([${props.cords.lat}, ${props.cords.long}], - {ID: ${props.ID}}); - markers[${props.ID}].addTo(map).on('click', onPopupClick); + // Check if there is no other marker with same ID already in map + if (!(${ID} in markers)) { + + // Creates marker object + markers[${ID}] = L.marker([${cords.lat}, ${cords.long}], + {ID: ${ID}}); + + + // Add marker to map and bing callback event to its function + markers[${ID}].addTo(map).on('click', onPopupClick); } `); } -export { loadHTMLFile, parseInput, insertMarker, goToPosition }; + +export { loadHTMLFile, handleEvent, insertMarker, goToRegion }; diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index 6459345..4c98e43 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -3,9 +3,9 @@ import { View } from "react-native"; import WebView from "react-native-webview"; import { loadHTMLFile, - parseInput, + handleEvent, insertMarker, - goToPosition, + goToRegion, } from "./LeafLetMap"; function bindEventsToListeners(event, clickListener, markerListener) { @@ -22,6 +22,7 @@ function bindEventsToListeners(event, clickListener, markerListener) { } export default function OpenStreetMap({ + initialRegion, markersList, animateToPosition, clickListener, @@ -31,11 +32,13 @@ export default function OpenStreetMap({ const [webviewContent, setWebviewContent] = useState(null); if (mapRef != null) { - animateToPosition != null && goToPosition(mapRef, ...animateToPosition); + initialRegion != null && goToRegion(mapRef, initialRegion); + + animateToPosition != null && goToRegion(mapRef, animateToPosition); markersList != null && markersList.length > 0 && - markersList.map((m) => insertMarker(mapRef, m)); + markersList.map(({ ID, cords }) => insertMarker(mapRef, ID, cords)); } loadHTMLFile() @@ -50,7 +53,7 @@ export default function OpenStreetMap({ }} onMessage={(event) => { bindEventsToListeners( - parseInput(event), + handleEvent(event), clickListener, markerListener ); diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index 329a99f..185cc77 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/src/app/screens/MapFeedScreen.js @@ -30,6 +30,7 @@ export default function MapFeedScreen() { return ( { - setPosition([-23.644957, -46.528012]); + setPosition({ lat: -23.644957, long: -46.528012, zoom: 10 }); }} > UFABC @@ -49,7 +50,7 @@ export default function MapFeedScreen() { { - setPosition([51.505, -0.09]); + setPosition({ lat: 51.505, long: -0.09, zoom: 14 }); }} > Londres