Browse Source

Working example of storing an ID inside marker object in OSM.

master
GabrielTrettel 4 years ago
parent
commit
1e7214170a
  1. 108
      src/app/components/map/Map.html
  2. 27
      src/app/components/map/OpenStreetMap.js

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

@ -1,15 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<title>Mobile tutorial - Leaflet</title> <title>Mobile tutorial - Leaflet</title>
<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="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<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"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<style> <style>
html, body {
html,
body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@ -18,51 +32,77 @@
height: 400px; height: 400px;
} }
</style> </style>
<style>body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; }</style>
</head>
<body>
<div id='map'></div>
<script>
var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2FicmllbC10cmV0dGVsIiwiYSI6ImNrb2RjNWIzYjAwczIyd25yNnUweDNveTkifQ.xRASmGTYm0ieS-FjVrXSjA', {
<style>
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100vw;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map("map").setView([51.505, -0.09], 13);
var markers = {};
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2FicmllbC10cmV0dGVsIiwiYSI6ImNrb2RjNWIzYjAwczIyd25yNnUweDNveTkifQ.xRASmGTYm0ieS-FjVrXSjA",
{
maxZoom: 18, maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
attribution:
'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
id: "mapbox/streets-v11",
tileSize: 512, tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
zoomOffset: -1,
}
).addTo(map);
L.circle([51.508, -0.11], 500, { L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
color: "red",
fillColor: "#f03",
fillOpacity: 0.5,
})
.addTo(map)
.bindPopup("I am a circle.");
L.polygon([ L.polygon([
[51.509, -0.08], [51.509, -0.08],
[51.503, -0.06], [51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
[51.51, -0.047],
])
.addTo(map)
.bindPopup("I am a polygon.");
var popup = L.popup(); var popup = L.popup();
function onMapClick(e) { function onMapClick(e) {
var payload = { var payload = {
code: 1, code: 1,
content: { content: {
latitude: e.latlng.lat.toString().slice(0,8),
longitude: e.latlng.lng.toString().slice(0,8),
}
}
latitude: e.latlng.lat.toString().slice(0, 8),
longitude: e.latlng.lng.toString().slice(0, 8),
},
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload)); window.ReactNativeWebView.postMessage(JSON.stringify(payload));
} }
function onPopupClick(e) { function onPopupClick(e) {
var payload = { var payload = {
code: 2, code: 2,
content: "marker selecionado"
}
content: "marker selecionado " + this.options.ID,
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload)); window.ReactNativeWebView.postMessage(JSON.stringify(payload));
} }
mymap.on("popupopen", onPopupClick);
mymap.on('click', onMapClick);
</script>
</body>
</html>
//map.on("popupopen", onPopupClick);
map.on("click", onMapClick);
</script>
</body>
</html>

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

@ -29,23 +29,20 @@ function clickCallback(payload, props) {
} }
function parseInput(event, props) { function parseInput(event, props) {
// console.log(event);
const payload = JSON.parse(event); const payload = JSON.parse(event);
// console.log(payload);
code_to_function[payload.code](payload, props); code_to_function[payload.code](payload, props);
} }
function insertMarker(mapRef, props) { function insertMarker(mapRef, props) {
console.log(props);
mapRef.injectJavaScript(` mapRef.injectJavaScript(`
var layer = L.marker([${props.cords.lat}, ${props.cords.long}], {ID: ${props.ID}} )
layer.ID = ${props.ID}
layer.addTo(mymap).bindPopup("<b>${props.title}</b><br />I am a popup.");`);
markers[${props.ID}] = L.marker([${props.cords.lat}, ${props.cords.long}],
{ID: ${props.ID}});
markers[${props.ID}].addTo(map).on('click', onPopupClick);
`);
} }
function goToPosition(mapRef, lat, long) { function goToPosition(mapRef, lat, long) {
mapRef.injectJavaScript(`mymap.setView([${lat}, ${long}], 13);`);
mapRef.injectJavaScript(`map.setView([${lat}, ${long}], 13);`);
} }
export default function OpenStreetMap(props) { export default function OpenStreetMap(props) {
@ -53,22 +50,18 @@ export default function OpenStreetMap(props) {
const [finishedLoad, setFinishedLoad] = useState(false); const [finishedLoad, setFinishedLoad] = useState(false);
const [webviewContent, setWebviewContent] = useState(null); const [webviewContent, setWebviewContent] = useState(null);
loadHTMLFile()
.then((html) => setWebviewContent(html))
.catch((e) => console.warn(e));
if (mapRef != null) {
props.animateToPosition != null && props.animateToPosition != null &&
goToPosition(mapRef, ...props.animateToPosition); goToPosition(mapRef, ...props.animateToPosition);
const onLoad = () => {
props.markersList != null && props.markersList != null &&
props.markersList.length > 0 && props.markersList.length > 0 &&
props.markersList.map((m) => insertMarker(mapRef, m)); props.markersList.map((m) => insertMarker(mapRef, m));
};
}
useEffect(() => {
mapRef != null && onLoad();
}, [finishedLoad]);
loadHTMLFile()
.then((html) => setWebviewContent(html))
.catch((e) => console.warn(e));
return ( return (
<View flex={1}> <View flex={1}>

Loading…
Cancel
Save