Loading svg image as asset to use in marker. Not working yet: marker does not appear on the map.

src/app/components/map/LeafLetMap.js

@@ -3,16 +3,22 @@ import * as FileSystem from "expo-file-system";
 
 const HTML_FILE_PATH = require(`./Map.html`);
 
-const loadHTMLFile = async () => {
+const loadLocalAsset = async (asset) => {
   try {
-    const [{ localUri }] = await Asset.loadAsync(HTML_FILE_PATH);
+    const [{ localUri }] = await Asset.loadAsync(asset);
     const fileString = await FileSystem.readAsStringAsync(localUri);
 
     return fileString;
+
   } catch (error) {
     console.warn(error);
-    console.warn("Unable to resolve index file");
+    // console.warn("Unable to resolve index file");
   }
+  return "asidaosid";
+}
+
+const loadHTMLFile = async () => {
+  return loadLocalAsset(HTML_FILE_PATH);
 };
 
 function goToRegion(mapRef, { lat, long, zoom }) {
@@ -43,14 +49,19 @@ function handleEvent(event) {
   return code_to_function[payload.code](payload);
 }
 
-function insertMarker(mapRef, ID, cords, icon) {
-  console.log(ID);
-  mapRef.injectJavaScript(
-    `
+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: '` + icon + `',
-    iconSize: 10
+    html: ${iconSvg} ,
+    iconSize: 100
   });
 
   // Check if there is no other marker with same ID already in map
@@ -61,8 +72,7 @@ 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/components/map/icon.html

@@ -0,0 +1 @@
+<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> 

src/app/screens/MapFeedScreen.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import OpenStreetMap from "../components/map/OpenStreetMap";
+import assets from "../config/assets"
 
 export default function MapFeedScreen() {
   const [position, setPosition] = useState(null);
@@ -17,26 +18,26 @@ 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,
-      },
-    },
-    {
-      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,
-      },
+      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,
+    //   },
+    // },
   ];
   return (
     <View style={styles.container}>