mirror of
https://github.com/Leaflet/Leaflet.VectorGrid.git
synced 2025-07-23 00:50:04 +00:00
117 lines
3.4 KiB
HTML
117 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Leaflet.VectorGrid Points Example</title>
|
|
<meta charset="utf-8" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="./leaflet.css" />
|
|
<script src="./leaflet-src.js"></script>
|
|
<script src="../Leaflet.VectorGrid.bundled.js"></script>
|
|
</head>
|
|
<body style='margin:0'>
|
|
<div id="map" style="width: 100vw; height: 100vh"></div>
|
|
|
|
|
|
<!-- <script type="text/javascript" src="../vendor/pbf-dev.js"></script>
|
|
<script type="text/javascript" src="../vendor/vector-tile-dev.js"></script>
|
|
|
|
<script type="text/javascript" src="../src/Leaflet.Renderer.SVG.Tile.js"></script>
|
|
<script type="text/javascript" src="../src/Leaflet.Renderer.Canvas.Tile.js"></script>
|
|
<script type="text/javascript" src="../src/Leaflet.VectorGrid.js"></script>
|
|
<script type="text/javascript" src="../src/Leaflet.VectorGrid.Protobuf.js"></script>-->
|
|
|
|
<script>
|
|
|
|
var map = L.map('map');
|
|
|
|
// var cartodbAttribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>';
|
|
//
|
|
// var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
|
|
// attribution: cartodbAttribution,
|
|
// opacity: 0.5
|
|
// }).addTo(map);
|
|
|
|
|
|
var url = 'https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
|
|
|
|
var vectorTileOptions = {
|
|
rendererFactory: L.canvas.tile,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://www.mapbox.com/about/maps/">MapBox</a>',
|
|
vectorTileLayerStyles: {
|
|
'poi_label': function(properties, zoom) {
|
|
return {
|
|
weight: 2,
|
|
color: 'red',
|
|
opacity: 1,
|
|
fillColor: 'yellow',
|
|
fill: true,
|
|
radius: 6,
|
|
fillOpacity: 0.7
|
|
}
|
|
},
|
|
|
|
water: [],
|
|
country_label: [],
|
|
marine_label: [],
|
|
state_label: [],
|
|
place_label: [],
|
|
waterway_label: [],
|
|
landuse: [],
|
|
landuse_overlay: [],
|
|
road: [],
|
|
waterway: [],
|
|
aeroway: [],
|
|
tunnel: [],
|
|
bridge: [],
|
|
barrier_line: [],
|
|
building: [],
|
|
road_label: [],
|
|
housenum_label: [],
|
|
},
|
|
interactive: true, // Make sure that this VectorGrid fires mouse/pointer events
|
|
getFeatureId: function(f) {
|
|
return f.properties.osm_id;
|
|
}
|
|
};
|
|
|
|
L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
|
|
|
var highlight;
|
|
var clearHighlight = function() {
|
|
if (highlight) {
|
|
pbfLayer.resetFeatureStyle(highlight);
|
|
}
|
|
highlight = null;
|
|
};
|
|
var pbfLayer = L.vectorGrid.protobuf(url, vectorTileOptions)
|
|
.on('click', function(e) { // The .on method attaches an event handler
|
|
L.popup()
|
|
.setContent(e.layer.properties.name || e.layer.properties.type)
|
|
.setLatLng(e.latlng)
|
|
.openOn(map);
|
|
|
|
clearHighlight();
|
|
highlight = e.layer.properties.osm_id;
|
|
pbfLayer.setFeatureStyle(highlight, {
|
|
weight: 2,
|
|
color: 'red',
|
|
opacity: 1,
|
|
fillColor: 'red',
|
|
fill: true,
|
|
radius: 6,
|
|
fillOpacity: 1
|
|
})
|
|
|
|
L.DomEvent.stop(e);
|
|
})
|
|
.addTo(map);
|
|
|
|
map.on('click', clearHighlight);
|
|
|
|
map.setView([40.9994639, -74.163208], 15);
|
|
</script>
|
|
</body>
|
|
</html>
|