|
@ -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 © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' + |
|
|
|
|
|
|
|
|
attribution: |
|
|
|
|
|
'Map data © <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> |