Browse Source

Attempt to add markers with custom icon dynamically by react native

master
GabrielTrettel 3 years ago
parent
commit
9df6027a76
  1. 21
      src/app/components/map/LeafLetMap.js
  2. 47
      src/app/components/map/Map.html
  3. 13
      src/app/components/map/OpenStreetMap.js
  4. 3
      src/app/screens/MapFeedScreen.js

21
src/app/components/map/LeafLetMap.js

@ -1,5 +1,6 @@
import { Asset } from "expo-asset";
import * as FileSystem from "expo-file-system";
import Base64 from "Base64";
const HTML_FILE_PATH = require(`./Map.html`);
@ -43,20 +44,30 @@ function handleEvent(event) {
return code_to_function[payload.code](payload);
}
function insertMarker(mapRef, ID, cords) {
mapRef.injectJavaScript(`
function insertMarker(mapRef, ID, cords, icon) {
console.log(icon);
mapRef.injectJavaScript(
`
let customIcon = L.divIcon({
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}});
markers[${ID}] = L.marker([${cords.lat}, ${cords.long}], {ID: ${ID}, icon: customIcon });
// Add marker to map and bing callback event to its function
markers[${ID}].addTo(map).on('click', onPopupClick);
}
`);
`
);
}
export { loadHTMLFile, handleEvent, insertMarker, goToRegion };

47
src/app/components/map/Map.html

@ -5,11 +5,11 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="shortcut icon"
type="image/x-icon"
href="docs/images/favicon.ico"
/>
<!-- <link -->
<!-- rel="shortcut icon" -->
<!-- type="image/x-icon" -->
<!-- href="docs/images/favicon.ico" -->
<!-- /> -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
@ -64,23 +64,23 @@
}
).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();
// 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 = {
@ -101,8 +101,7 @@
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
//map.on("popupopen", onPopupClick);
map.on("click", onMapClick);
map.on("click", onMapClick);
</script>
</body>
</html>

13
src/app/components/map/OpenStreetMap.js

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import { View } from "react-native";
import WebView from "react-native-webview";
import {
@ -11,10 +11,10 @@ import {
function bindEventsToListeners(event, clickListener, markerListener) {
switch (event.object) {
case "click":
clickListener(event.cords);
clickListener && clickListener(event.cords);
break;
case "marker":
markerListener(event.id);
markerListener && markerListener(event.id);
break;
default:
break;
@ -22,7 +22,6 @@ function bindEventsToListeners(event, clickListener, markerListener) {
}
export default function OpenStreetMap({
initialRegion,
markersList,
animateToPosition,
clickListener,
@ -32,13 +31,13 @@ export default function OpenStreetMap({
const [webviewContent, setWebviewContent] = useState(null);
if (mapRef != null) {
initialRegion != null && goToRegion(mapRef, initialRegion);
animateToPosition != null && goToRegion(mapRef, animateToPosition);
markersList != null &&
markersList.length > 0 &&
markersList.map(({ ID, cords }) => insertMarker(mapRef, ID, cords));
markersList.map(({ ID, cords, icon }) =>
insertMarker(mapRef, ID, cords, icon)
);
}
loadHTMLFile()

3
src/app/screens/MapFeedScreen.js

@ -17,10 +17,12 @@ 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,
@ -30,7 +32,6 @@ export default function MapFeedScreen() {
return (
<View style={styles.container}>
<OpenStreetMap
initialRegion={{ lat: -12.901799, long: -51.692116, zoom: 3.2 }}
animateToPosition={position}
markersList={markers}
clickListener={setClickListener}

Loading…
Cancel
Save