From 91b60abce9319bbf7be6825228264612daba66bc Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Wed, 2 Jun 2021 22:02:38 -0300
Subject: [PATCH] Fixing issue with multiple markers in OSM.

---
 src/app/components/map/LeafLetMap.js | 19 +++++++------------
 src/app/components/map/Map.html      | 20 --------------------
 src/app/screens/MapFeedScreen.js     |  9 +++++++++
 3 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js
index a025cdf..c7b8d09 100644
--- a/src/app/components/map/LeafLetMap.js
+++ b/src/app/components/map/LeafLetMap.js
@@ -1,6 +1,5 @@
 import { Asset } from "expo-asset";
 import * as FileSystem from "expo-file-system";
-import Base64 from "Base64";
 
 const HTML_FILE_PATH = require(`./Map.html`);
 
@@ -45,23 +44,19 @@ function handleEvent(event) {
 }
 
 function insertMarker(mapRef, ID, cords, icon) {
-  console.log(icon);
+  console.log(ID);
   mapRef.injectJavaScript(
     `
-  let customIcon = L.divIcon({
-      html: '` +
-      icon +
-      `',
-      iconSize: 10,
-    });
-
+  var customIcon = L.divIcon({
+    className: 'marker-class',
+    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}, icon: customIcon });
-
+    markers[${ID}] = L.marker([${cords.lat}, ${cords.long}], {icon: customIcon, ID: ${ID}});
 
     // Add marker to map and bing callback event to its function
     markers[${ID}].addTo(map).on('click', onPopupClick);
diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html
index ef17f18..4d01be9 100644
--- a/src/app/components/map/Map.html
+++ b/src/app/components/map/Map.html
@@ -47,8 +47,6 @@
     <div id="map"></div>
     <script>
       var map = L.map("map").setView([51.505, -0.09], 13);
-
-
       var markers = {};
 
       L.tileLayer(
@@ -64,24 +62,6 @@
         }
       ).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();
-
       function onMapClick(e) {
         var payload = {
           code: 1,
diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js
index e04121f..8a3846c 100644
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@@ -28,6 +28,15 @@ export default function MapFeedScreen() {
         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}>