cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
GabrielTrettel 3 years ago
parent
b6f7eb5d3c
commit
1e7214170a
2 changed files with 117 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 170
      src/app/components/map/Map.html
  2. 31
      src/app/components/map/OpenStreetMap.js

170
src/app/components/map/Map.html
View File

@ -1,68 +1,108 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<title>Mobile tutorial - Leaflet</title>
<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="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>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</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', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
var payload = {
code: 1,
content: {
latitude: e.latlng.lat.toString().slice(0,8),
longitude: e.latlng.lng.toString().slice(0,8),
}
}
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
function onPopupClick(e) {
var payload = {
code: 2,
content: "marker selecionado"
}
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
mymap.on("popupopen", onPopupClick);
mymap.on('click', onMapClick);
</script>
</body>
</html>
<head>
<title>Mobile tutorial - Leaflet</title>
<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="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>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
<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,
attribution:
'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}
).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,
content: {
latitude: e.latlng.lat.toString().slice(0, 8),
longitude: e.latlng.lng.toString().slice(0, 8),
},
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
function onPopupClick(e) {
var payload = {
code: 2,
content: "marker selecionado " + this.options.ID,
};
window.ReactNativeWebView.postMessage(JSON.stringify(payload));
}
//map.on("popupopen", onPopupClick);
map.on("click", onMapClick);
</script>
</body>
</html>

31
src/app/components/map/OpenStreetMap.js
View File

@ -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));
props.animateToPosition != null &&
goToPosition(mapRef, ...props.animateToPosition);
if (mapRef != null) {
props.animateToPosition != null &&
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}>

Write Preview
Loading…
Cancel
Save