code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ - 0.1276 , 51.5074 ], zoom: 13 }); const fenceCoords = [[ - 0.15 , 51.52 ], [ - 0.10 , 51.52 ], [ - 0.10 , 51.50 ], [ - 0.15 , 51.50 ], [ - 0.15 , 51.52 ]]; function pointInPolygon ( lng , lat , ring ) { let inside = false ; for ( let i = 0 , j = ring. length - 1 ; i < ring. length ; j = i ++ ) { const [ xi , yi ] = ring[i], [ xj , yj ] = ring[j]; if ((yi > lat) !== (yj > lat) && lng < (xj - xi) * (lat - yi) / (yj - yi) + xi) inside = ! inside; } return inside; } map. on ( 'load' , () => { map. addSource ( 'fence' , { type: 'geojson' , data: { type: 'Feature' , geometry: { type: 'Polygon' , coordinates: [fenceCoords] } } }); map. addLayer ({ id: 'fence-fill' , type: 'fill' , source: 'fence' , paint: { 'fill-color' : '#9C27B0' , 'fill-opacity' : 0.15 } }); map. addLayer ({ id: 'fence-line' , type: 'line' , source: 'fence' , paint: { 'line-color' : '#9C27B0' , 'line-width' : 2 } }); }); map. on ( 'click' , ( e ) => { const inside = pointInPolygon (e.lngLat.lng, e.lngLat.lat, fenceCoords); new maptilersdk. Popup () . setLngLat (e.lngLat) . setHTML (inside ? '<b style="color:#4CAF50">Inside zone</b>' : '<b style="color:#e63946">Outside zone</b>' ) . addTo (map); }); content_copy Copyopen_in_new Open
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" /> < script src = "https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js" ></ script > < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script > maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ - 0.1276 , 51.5074 ], zoom: 13 }); const fenceCoords = [[ - 0.15 , 51.52 ], [ - 0.10 , 51.52 ], [ - 0.10 , 51.50 ], [ - 0.15 , 51.50 ], [ - 0.15 , 51.52 ]]; function pointInPolygon ( lng , lat , ring ) { let inside = false ; for ( let i = 0 , j = ring. length - 1 ; i < ring. length ; j = i ++ ) { const [ xi , yi ] = ring[i], [ xj , yj ] = ring[j]; if ((yi > lat) !== (yj > lat) && lng < (xj - xi) * (lat - yi) / (yj - yi) + xi) inside = ! inside; } return inside; } map. on ( 'load' , () => { map. addSource ( 'fence' , { type: 'geojson' , data: { type: 'Feature' , geometry: { type: 'Polygon' , coordinates: [fenceCoords] } } }); map. addLayer ({ id: 'fence-fill' , type: 'fill' , source: 'fence' , paint: { 'fill-color' : '#9C27B0' , 'fill-opacity' : 0.15 } }); map. addLayer ({ id: 'fence-line' , type: 'line' , source: 'fence' , paint: { 'line-color' : '#9C27B0' , 'line-width' : 2 } }); }); map. on ( 'click' , ( e ) => { const inside = pointInPolygon (e.lngLat.lng, e.lngLat.lat, fenceCoords); new maptilersdk. Popup () . setLngLat (e.lngLat) . setHTML (inside ? '<b style="color:#4CAF50">Inside zone</b>' : '<b style="color:#e63946">Outside zone</b>' ) . addTo (map); }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import * as maptilersdk from '@maptiler/sdk' ; import '@maptiler/sdk/dist/maptiler-sdk.css' ; maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ - 0.1276 , 51.5074 ], zoom: 13 }); const fenceCoords = [[ - 0.15 , 51.52 ], [ - 0.10 , 51.52 ], [ - 0.10 , 51.50 ], [ - 0.15 , 51.50 ], [ - 0.15 , 51.52 ]]; function pointInPolygon ( lng , lat , ring ) { let inside = false ; for ( let i = 0 , j = ring. length - 1 ; i < ring. length ; j = i ++ ) { const [ xi , yi ] = ring[i], [ xj , yj ] = ring[j]; if ((yi > lat) !== (yj > lat) && lng < (xj - xi) * (lat - yi) / (yj - yi) + xi) inside = ! inside; } return inside; } map. on ( 'load' , () => { map. addSource ( 'fence' , { type: 'geojson' , data: { type: 'Feature' , geometry: { type: 'Polygon' , coordinates: [fenceCoords] } } }); map. addLayer ({ id: 'fence-fill' , type: 'fill' , source: 'fence' , paint: { 'fill-color' : '#9C27B0' , 'fill-opacity' : 0.15 } }); map. addLayer ({ id: 'fence-line' , type: 'line' , source: 'fence' , paint: { 'line-color' : '#9C27B0' , 'line-width' : 2 } }); }); map. on ( 'click' , ( e ) => { const inside = pointInPolygon (e.lngLat.lng, e.lngLat.lat, fenceCoords); new maptilersdk. Popup () . setLngLat (e.lngLat) . setHTML (inside ? '<b style="color:#4CAF50">Inside zone</b>' : '<b style="color:#e63946">Outside zone</b>' ) . addTo (map); }); maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [-0.1276, 51.5074],
zoom: 13
});
const fenceCoords = [[-0.15, 51.52], [-0.10, 51.52], [-0.10, 51.50], [-0.15, 51.50], [-0.15, 51.52]];
function pointInPolygon(lng, lat, ring) {
let inside = false;
for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
const [xi, yi] = ring[i], [xj, yj] = ring[j];
if ((yi > lat) !== (yj > lat) && lng < (xj - xi) * (lat - yi) / (yj - yi) + xi) inside = !inside;
}
return inside;
}
map.on('load', () => {
map.addSource('fence', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Polygon', coordinates: [fenceCoords] } } });
map.addLayer({ id: 'fence-fill', type: 'fill', source: 'fence', paint: { 'fill-color': '#9C27B0', 'fill-opacity': 0.15 } });
map.addLayer({ id: 'fence-line', type: 'line', source: 'fence', paint: { 'line-color': '#9C27B0', 'line-width': 2 } });
});
map.on('click', (e) => {
const inside = pointInPolygon(e.lngLat.lng, e.lngLat.lat, fenceCoords);
new maptilersdk.Popup()
.setLngLat(e.lngLat)
.setHTML(inside ? '<b style="color:#4CAF50">Inside zone</b>' : '<b style="color:#e63946">Outside zone</b>')
.addTo(map);
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" />
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [-0.1276, 51.5074],
zoom: 13
});
const fenceCoords = [[-0.15, 51.52], [-0.10, 51.52], [-0.10, 51.50], [-0.15, 51.50], [-0.15, 51.52]];
function pointInPolygon(lng, lat, ring) {
let inside = false;
for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
const [xi, yi] = ring[i], [xj, yj] = ring[j];
if ((yi > lat) !== (yj > lat) && lng < (xj - xi) * (lat - yi) / (yj - yi) + xi) inside = !inside;
}
return inside;
}
map.on('load', () => {
map.addSource('fence', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Polygon', coordinates: [fenceCoords] } } });
map.addLayer({ id: 'fence-fill', type: 'fill', source: 'fence', paint: { 'fill-color': '#9C27B0', 'fill-opacity': 0.15 } });
map.addLayer({ id: 'fence-line', type: 'line', source: 'fence', paint: { 'line-color': '#9C27B0', 'line-width': 2 } });
});
map.on('click', (e) => {
const inside = pointInPolygon(e.lngLat.lng, e.lngLat.lat, fenceCoords);
new maptilersdk.Popup()
.setLngLat(e.lngLat)
.setHTML(inside ? '<b style="color:#4CAF50">Inside zone</b>' : '<b style="color:#e63946">Outside zone</b>')
.addTo(map);
});
</script>
</body>
</html> import * as maptilersdk from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [-0.1276, 51.5074],
zoom: 13
});
const fenceCoords = [[-0.15, 51.52], [-0.10, 51.52], [-0.10, 51.50], [-0.15, 51.50], [-0.15, 51.52]];
function pointInPolygon(lng, lat, ring) {
let inside = false;
for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
const [xi, yi] = ring[i], [xj, yj] = ring[j];
if ((yi > lat) !== (yj > lat) && lng < (xj - xi) * (lat - yi) / (yj - yi) + xi) inside = !inside;
}
return inside;
}
map.on('load', () => {
map.addSource('fence', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Polygon', coordinates: [fenceCoords] } } });
map.addLayer({ id: 'fence-fill', type: 'fill', source: 'fence', paint: { 'fill-color': '#9C27B0', 'fill-opacity': 0.15 } });
map.addLayer({ id: 'fence-line', type: 'line', source: 'fence', paint: { 'line-color': '#9C27B0', 'line-width': 2 } });
});
map.on('click', (e) => {
const inside = pointInPolygon(e.lngLat.lng, e.lngLat.lat, fenceCoords);
new maptilersdk.Popup()
.setLngLat(e.lngLat)
.setHTML(inside ? '<b style="color:#4CAF50">Inside zone</b>' : '<b style="color:#e63946">Outside zone</b>')
.addTo(map);
});
