-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcheck-is-inside-a-polygon.html
136 lines (109 loc) · 3.95 KB
/
check-is-inside-a-polygon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check if point is inside a polygon</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/@mapbox/leaflet-pip@latest/leaflet-pip.min.js"></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
<style>
html,
body {
margin: 0;
}
#map-container {
width: min(100vw, 800px);
height: min(80vw, 500px);
}
</style>
</head>
<body>
<h1>Clique em um lugar para checar se o ponto está dentro da área de cobertura:</h1>
<div id="map-container"></div>
<p id="result">Carregando...</p>
<button onclick="showCurrentLocation()">Find me</button>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaWFnb2JydW5vIiwiYSI6ImNram41cDI1bjBhYWEyeXFscGp5ZG15bnAifQ.kGQsH0C6Li7MwXrOWr1Qmw';
const carnaubalLatLng = new mapboxgl.LngLat(-40.941498, -4.162548);
const resultEl = document.getElementById('result')
// Init map
const map = new mapboxgl.Map({
container: document.getElementById('map-container'),
center: carnaubalLatLng, // starting position [lng, lat]
zoom: 13.4, // starting zoom
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
});
const marker = new mapboxgl.Marker();
let carnaubalNeighborhoodsData;
let carnaubalNeighborhoodsGeoJson;
map.on('load', async function (event) {
await drawPolygonOnMap();
resultEl.textContent = ''
})
map.on('click', function (event) {
showMarkerOnMap(event.lngLat);
checkIfPointIsInsideThePolygon(event.lngLat);
});
function showMarkerOnMap(lngLat) {
marker.setLngLat(lngLat).addTo(map);
}
async function loadGeoJsonData() {
carnaubalNeighborhoodsData = await fetch('carnaubal-neighborhoods.geojson').then(res => res.json())
carnaubalNeighborhoodsGeoJson = new L.geoJson(carnaubalNeighborhoodsData.data)
}
async function drawPolygonOnMap() {
await loadGeoJsonData()
map.addSource('carnaubal-neighborhoods', carnaubalNeighborhoodsData)
map.addLayer({
'source': 'carnaubal-neighborhoods',
'id': 'carnaubal-shape',
'type': 'fill',
'layout': {},
'paint': {
'fill-color': '#099',
'fill-outline-color': '#000',
'fill-opacity': 0.3,
}
});
}
function checkIfPointIsInsideThePolygon(lngLat) {
const polygonFound = leafletPip.pointInLayer(lngLat, carnaubalNeighborhoodsGeoJson, true)[0];
const isWithinCoverageArea = !!polygonFound;
console.log('isWithinCoverageArea =', isWithinCoverageArea)
if (isWithinCoverageArea) {
resultEl.innerHTML = `
<span style="color:green">Está DENTRO da área 👍</span><br>
<span>Nome da região: ${polygonFound.feature.properties.name}</span>
`
}
else {
resultEl.innerHTML = `<span style="color:red">Está FORA da área ❌</span>`
}
}
function showCurrentLocation() {
if (!('geolocation' in navigator)) {
return alert('Seu navegador não suporta geolocalização :(');
}
// Get user latitude and longitude
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
{
enableHighAccuracy: true,
}
);
function successCallback(position) {
const userLatLng = new mapboxgl.LngLat(position.coords.longitude, position.coords.latitude);
map.setCenter(userLatLng);
showMarkerOnMap(userLatLng);
checkIfPointIsInsideThePolygon(userLatLng)
}
function errorCallback() {
alert('Não foi possível determinar sua localização automaticamente :(');
}
}
</script>
</body>
</html>