diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js
index c7b8d09..03dbd68 100644
--- a/src/app/components/map/LeafLetMap.js
+++ b/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 };
diff --git a/src/app/components/map/icon.html b/src/app/components/map/icon.html
new file mode 100644
index 0000000..a97b3ed
--- /dev/null
+++ b/src/app/components/map/icon.html
@@ -0,0 +1 @@
+
diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js
index 8a3846c..8990d84 100644
--- a/src/app/screens/MapFeedScreen.js
+++ b/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: ``,
- },
- {
- ID: "2",
- title: "Casa do Daniel",
- icon: ``,
- cords: {
- lat: 51.5032,
- long: -0.09589,
- },
- },
- {
- ID: "3",
- title: "Casa do Gabriel",
- icon: ``,
- cords: {
- lat: 51.509,
- long: -0.09581,
- },
+ icon: require("../components/map/icon.html"),
},
+ // {
+ // ID: "2",
+ // title: "Casa do Daniel",
+ // icon: ``,
+ // cords: {
+ // lat: 51.5032,
+ // long: -0.09589,
+ // },
+ // },
+ // {
+ // ID: "3",
+ // title: "Casa do Gabriel",
+ // icon: ``,
+ // cords: {
+ // lat: 51.509,
+ // long: -0.09581,
+ // },
+ // },
];
return (