-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathleaflet.html
48 lines (48 loc) · 1.84 KB
/
leaflet.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
<html>
<head><title>OGC API - Tiles exercise</title></head>
<body>
<div id="map" style="width:100vw;height:100vh;"></div>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.js"></script>
<script>
map = L.map('map').setView({ lat: 26.425181, lng: -102.5493906 }, 4);
map.addLayer(
new L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
minZoom: 1,
maxZoom: 16,
}));
function getColor(val){
if (val < 40) {return "#f2e6c7"}
else if (val < 80) {return "#8fa37e"}
else if (val < 100) {return "#f0d17d"}
else if (val < 120) {return "#d7ded1"}
else return "#c2d0d9";
}
var vectorTileStyling = {
greater_hyderabad_municipal_corporation_ward_Boundaries: function(properties) {
return ({
fill: true,
fillColor: getColor(properties.objectid),
color: "#ffffff",
fillOpacity: 1.0,
weight: 5,
//color: "#ffffff",
opacity: 1.0,
});
}
}
var mapVectorTileOptions = {
rendererFactory: L.canvas.tile,
interactive: true,
vectorTileLayerStyles: vectorTileStyling,
};
var pbfURL='http://localhost:8000/ogcapi/collections/my-points-1/tiles/WebMercatorQuad/{z}/{x}/{y}?f=mvt';
var pbfLayer=L.vectorGrid.protobuf(pbfURL,mapVectorTileOptions).on('click',function(e) {
console.log(e.layer);
L.DomEvent.stop(e);
}).addTo(map);
</script>
</body>
</html>