Attempt to solve the problem of markers not being updated on the map as data is entered.

src/app/components/map/LeafLetMap.js

@@ -25,6 +25,10 @@ function goToRegion(mapRef, position) {
     setCustomView(${position.lat}, ${position.long}, 16.5);`);
 }
 
+function setViewCode(lat, long, zoom = 16.5) {
+  return `setCustomView(${lat}, ${long}, ${zoom});`;
+}
+
 const code_to_function = {
   "1": clickCallback,
   "2": markerCallback,
@@ -80,4 +84,4 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
   }`);
 }
 
-export { loadHTMLFile, handleEvent, insertMarker, goToRegion };
+export { loadHTMLFile, handleEvent, insertMarker, goToRegion, setViewCode };

src/app/components/map/OpenStreetMap.js

@@ -2,13 +2,11 @@ import React, { useState, useEffect } from "react";
 import { View, StyleSheet, Text } from "react-native";
 import WebView from "react-native-webview";
 import {
-  loadHTMLFile,
+  setViewCode,
   handleEvent,
   insertMarker,
-  goToRegion,
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
-import { useLocation, getLocation } from "../../hooks/useLocation";
 import html_content from "./Map.js";
 
 
@@ -43,14 +41,10 @@ export default function OpenStreetMap({
   moveEndListener,
 }) {
   const [mapRef, setMapRef] = useState(null);
-  // const [webviewContent, setWebviewContent] = useState(null);
   const webviewContent = html_content;
   const [markerListener, setMarkerListener] = useState(null);
+  const viewFunction = setViewCode(global.location.lat, global.location.long);
 
-  const viewFunction = `\
-    setCustomView(${global.location.lat}, ${global.location.long}, 16.5);`;
-
-  console.log(global.location);
   markersList &&
     mapRef &&
     notEmpy(markersList) &&
@@ -58,9 +52,14 @@ export default function OpenStreetMap({
       insertMarker(mapRef, val.ID, val.coordinate, val.image);
     });
 
-  // loadHTMLFile()
-  //   .then((html) => setWebviewContent(html))
-  //   .catch((e) => console.warn(e));
+  useEffect(() => {
+    markersList &&
+      mapRef &&
+      notEmpy(markersList) &&
+      markersList.forEach((val, key) => {
+        insertMarker(mapRef, val.ID, val.coordinate, val.image);
+      });
+  }, [markersList])
 
   return (
     <View flex={1}>