Fixing map marker icon loaded from its own file

src/app/components/map/LeafLetMap.js

@@ -51,16 +51,15 @@ function handleEvent(event) {
 
 async function insertMarker(mapRef, ID, cords, icon) {
   var iconSvg = icon;
+
   if (typeof icon !== 'string' && !(icon instanceof String)) {
     iconSvg = await loadLocalAsset(icon);
   }
 
-  console.log(String(iconSvg));
-
   mapRef.injectJavaScript(`
   var customIcon = L.divIcon({
     className: 'marker-class',
-    html: ${iconSvg} ,
+    html: \`${iconSvg}\`,
     iconSize: 100
   });
 
@@ -71,8 +70,7 @@ async function insertMarker(mapRef, ID, cords, icon) {
 
     // 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/screens/MapFeedScreen.js

@@ -20,24 +20,24 @@ export default function MapFeedScreen() {
       },
       icon: require("../components/map/icon.html"),
     },
-    // {
-    //   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,
-    //   },
-    // },
-    // {
-    //   ID: "3",
-    //   title: "Casa do Gabriel",
-    //   icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
-    //   cords: {
-    //     lat: 51.509,
-    //     long: -0.09581,
-    //   },
-    // },
+    {
+      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,
+      },
+    },
+    {
+      ID: "3",
+      title: "Casa do Gabriel",
+      icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
+      cords: {
+        lat: 51.509,
+        long: -0.09581,
+      },
+    },
   ];
   return (
     <View style={styles.container}>