Adjusting parameters and how information is entered on the map (OSM)

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 };

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
           );

src/app/screens/MapFeedScreen.js

@@ -30,6 +30,7 @@ export default function MapFeedScreen() {
   return (
     <View style={styles.container}>
       <OpenStreetMap
+        initialRegion={{ lat: -12.901799, long: -51.692116, zoom: 3.2 }}
         animateToPosition={position}
         markersList={markers}
         clickListener={setClickListener}
@@ -40,7 +41,7 @@ export default function MapFeedScreen() {
         <TouchableOpacity
           style={styles.btns}
           onPress={() => {
-            setPosition([-23.644957, -46.528012]);
+            setPosition({ lat: -23.644957, long: -46.528012, zoom: 10 });
           }}
         >
           <Text style={styles.txt}>UFABC</Text>
@@ -49,7 +50,7 @@ export default function MapFeedScreen() {
         <TouchableOpacity
           style={styles.btns}
           onPress={() => {
-            setPosition([51.505, -0.09]);
+            setPosition({ lat: 51.505, long: -0.09, zoom: 14 });
           }}
         >
           <Text style={styles.txt}>Londres</Text>