Attempt to add markers with custom icon dynamically by react native

src/app/components/map/LeafLetMap.js

@@ -1,5 +1,6 @@
 import { Asset } from "expo-asset";
 import * as FileSystem from "expo-file-system";
+import Base64 from "Base64";
 
 const HTML_FILE_PATH = require(`./Map.html`);
 
@@ -43,20 +44,30 @@ function handleEvent(event) {
   return code_to_function[payload.code](payload);
 }
 
-function insertMarker(mapRef, ID, cords) {
-  mapRef.injectJavaScript(`
+function insertMarker(mapRef, ID, cords, icon) {
+  console.log(icon);
+  mapRef.injectJavaScript(
+    `
+  let customIcon = L.divIcon({
+      html: '` +
+      icon +
+      `',
+      iconSize: 10,
+    });
+
+
   // 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}});
+    markers[${ID}] = L.marker([${cords.lat}, ${cords.long}], {ID: ${ID}, icon: customIcon });
 
 
     // Add marker to map and bing callback event to its function
     markers[${ID}].addTo(map).on('click', onPopupClick);
   }
-  `);
+  `
+  );
 }
 
 export { loadHTMLFile, handleEvent, insertMarker, goToRegion };

src/app/components/map/Map.html

@@ -5,11 +5,11 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link
-      rel="shortcut icon"
-      type="image/x-icon"
-      href="docs/images/favicon.ico"
-    />
+    <!-- <link -->
+    <!--   rel="shortcut icon" -->
+    <!--   type="image/x-icon" -->
+    <!--   href="docs/images/favicon.ico" -->
+    <!-- /> -->
     <link
       rel="stylesheet"
       href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
@@ -64,23 +64,23 @@
         }
       ).addTo(map);
 
-      L.circle([51.508, -0.11], 500, {
-        color: "red",
-        fillColor: "#f03",
-        fillOpacity: 0.5,
-      })
-        .addTo(map)
-        .bindPopup("I am a circle.");
-
-      L.polygon([
-        [51.509, -0.08],
-        [51.503, -0.06],
-        [51.51, -0.047],
-      ])
-        .addTo(map)
-        .bindPopup("I am a polygon.");
-
-      var popup = L.popup();
+//      L.circle([51.508, -0.11], 500, {
+//        color: "red",
+//        fillColor: "#f03",
+//        fillOpacity: 0.5,
+//      })
+//        .addTo(map)
+//        .bindPopup("I am a circle.");
+//
+//      L.polygon([
+//        [51.509, -0.08],
+//        [51.503, -0.06],
+//        [51.51, -0.047],
+//      ])
+//        .addTo(map)
+//        .bindPopup("I am a polygon.");
+//
+//      var popup = L.popup();
 
       function onMapClick(e) {
         var payload = {
@@ -101,8 +101,7 @@
         window.ReactNativeWebView.postMessage(JSON.stringify(payload));
       }
 
-      //map.on("popupopen", onPopupClick);
-      map.on("click", onMapClick);
+    map.on("click", onMapClick);
     </script>
   </body>
 </html>

src/app/components/map/OpenStreetMap.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
 import WebView from "react-native-webview";
 import {
@@ -11,10 +11,10 @@ import {
 function bindEventsToListeners(event, clickListener, markerListener) {
   switch (event.object) {
     case "click":
-      clickListener(event.cords);
+      clickListener && clickListener(event.cords);
       break;
     case "marker":
-      markerListener(event.id);
+      markerListener && markerListener(event.id);
       break;
     default:
       break;
@@ -22,7 +22,6 @@ function bindEventsToListeners(event, clickListener, markerListener) {
 }
 
 export default function OpenStreetMap({
-  initialRegion,
   markersList,
   animateToPosition,
   clickListener,
@@ -32,13 +31,13 @@ export default function OpenStreetMap({
   const [webviewContent, setWebviewContent] = useState(null);
 
   if (mapRef != null) {
-    initialRegion != null && goToRegion(mapRef, initialRegion);
-
     animateToPosition != null && goToRegion(mapRef, animateToPosition);
 
     markersList != null &&
       markersList.length > 0 &&
-      markersList.map(({ ID, cords }) => insertMarker(mapRef, ID, cords));
+      markersList.map(({ ID, cords, icon }) =>
+        insertMarker(mapRef, ID, cords, icon)
+      );
   }
 
   loadHTMLFile()

src/app/screens/MapFeedScreen.js

@@ -17,10 +17,12 @@ export default function MapFeedScreen() {
         lat: 51.505,
         long: -0.09,
       },
+      icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
     },
     {
       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,
@@ -30,7 +32,6 @@ 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}