html marker in OSM (not working)

3 years ago · 6ec71c262d
3 changed files with 35 additions and 13 deletions
--- a/src/app/components/map/LeafLetMap.js
+++ b/src/app/components/map/LeafLetMap.js
@ -9,12 +9,11 @@ const loadLocalAsset = async (asset) => {
    const fileString = await FileSystem.readAsStringAsync(localUri);

    return fileString;
-
  } catch (error) {
    console.warn(error);
  }
  return "asidaosid";
-}
+};

 const loadHTMLFile = async () => {
  return loadLocalAsset(HTML_FILE_PATH);
@ -60,20 +59,49 @@ function handleEvent(event) {
  return code_to_function[payload.code](payload);
 }

+function buildIcon(icon) {
+  return `\`
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+.dot {
+  height: 25px;
+  width: 25px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+}
+</style>
+</head>
+<body>
+
+<div style="text-align:center">
+  <span class="dot"></span>
+</div>
+</body>
+</html> 
+
+  \``;
+}
+
 async function insertMarker(mapRef, ID, coordinate, icon) {
  var iconSvg = icon;

  mapRef.injectJavaScript(`
  var customIcon = L.divIcon({
    className: 'marker-class',
-    html: \`${iconSvg}\`,
+    html: ${buildIcon(icon)},
    iconSize: 70
  });

  // Check if there is no other marker with same ID already in map
  if (!(${ID} in markers)) {
    // Creates marker object
-    markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}});
+    markers[${ID}] = L.marker([${coordinate.latitude}, ${
+    coordinate.longitude
+  }], {icon: customIcon, ID: ${ID}});

    // Add marker to map and bing callback event to its function
    markers[${ID}].addTo(map).on('click', onPopupClick);
--- a/src/app/components/map/OpenStreetMap.js
+++ b/src/app/components/map/OpenStreetMap.js
@ -39,7 +39,6 @@ export default function OpenStreetMap({
  markersList,
  clickListener,
  moveEndListener,
-  focusChanged,
 }) {
  const [mapRef, setMapRef] = useState(null);
  const webviewContent = html_content;
@ -60,7 +59,7 @@ export default function OpenStreetMap({
      markersList.forEach((val, key) => {
        insertMarker(mapRef, val.ID, val.coordinate, val.image);
      });
-  }, [markersList, focusChanged])
+  }, [markersList])

  return (
    <View flex={1}>
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@ -1,22 +1,18 @@
 import React, { useEffect, useContext } from "react";
 import { StyleSheet, View } from "react-native";
 import OpenStreetMap from "../components/map/OpenStreetMap";
-import { CurrentLocationContext } from "../context/CurrentLocationContext";
 import attachFocusToQuery from "../hooks/useFocus";
-import {MapMarkerList} from "../components/MapMarkerList";
+import { MapMarkerList } from "../components/MapMarkerList";

 export default function MapFeedScreen() {
  const focusChanged = attachFocusToQuery();

-
  return (
    <View style={styles.container}>
      <OpenStreetMap
-        markersList={MapMarkerList({reload:focusChanged, renderRain:true})}
+        markersList={MapMarkerList({ reload: focusChanged, renderRain: true })}
        centerUserLocation={true}
-        focusChanged={focusChanged}
      />
-
    </View>
  );
 }
@ -56,4 +52,3 @@ const styles = StyleSheet.create({
    color: "white",
  },
 });
-