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. 45
      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 { Asset } from "expo-asset";
import * as FileSystem from "expo-file-system"; import * as FileSystem from "expo-file-system";
import Base64 from "Base64";
const HTML_FILE_PATH = require(`./Map.html`); const HTML_FILE_PATH = require(`./Map.html`);
@ -43,20 +44,30 @@ function handleEvent(event) {
return code_to_function[payload.code](payload); 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 // Check if there is no other marker with same ID already in map
if (!(${ID} in markers)) { if (!(${ID} in markers)) {
// Creates marker object // 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 // Add marker to map and bing callback event to its function
markers[${ID}].addTo(map).on('click', onPopupClick); markers[${ID}].addTo(map).on('click', onPopupClick);
} }
`);
`
);
} }
export { loadHTMLFile, handleEvent, insertMarker, goToRegion }; export { loadHTMLFile, handleEvent, insertMarker, goToRegion };

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

@ -5,11 +5,11 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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 <link
rel="stylesheet" rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
@ -64,23 +64,23 @@
} }
).addTo(map); ).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) { function onMapClick(e) {
var payload = { var payload = {
@ -101,7 +101,6 @@
window.ReactNativeWebView.postMessage(JSON.stringify(payload)); window.ReactNativeWebView.postMessage(JSON.stringify(payload));
} }
//map.on("popupopen", onPopupClick);
map.on("click", onMapClick); map.on("click", onMapClick);
</script> </script>
</body> </body>

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

3
src/app/screens/MapFeedScreen.js

@ -17,10 +17,12 @@ export default function MapFeedScreen() {
lat: 51.505, lat: 51.505,
long: -0.09, 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", ID: "2",
title: "Casa do Daniel", 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: { cords: {
lat: 51.5032, lat: 51.5032,
long: -0.09589, long: -0.09589,
@ -30,7 +32,6 @@ export default function MapFeedScreen() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<OpenStreetMap <OpenStreetMap
initialRegion={{ lat: -12.901799, long: -51.692116, zoom: 3.2 }}
animateToPosition={position} animateToPosition={position}
markersList={markers} markersList={markers}
clickListener={setClickListener} clickListener={setClickListener}

Loading…
Cancel
Save