How can I use maxNativeZoom to continue to show the vector tiles beyond their maximum zoom level? #283
Open
Description
I have a tile set that is defined for zoom levels 0-2, but I want it to continue to show beyond a zoom level of 2. I believe this is done using maxNativeZoom however this setting doesnt seem to work, as the tiles are hidden beyond a zoom level of 2.
The full code for this problem is:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<style>
body {
margin: 0;
}
#map {
background: #F9F7F7;
}
</style>
</head>
<body>
<div id='map' style='width: 100vw; height: 100vh'></div>
<script>
var map = L.map('map');
// add openstreetmap basemap
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const URL = 'https://gfswindtiles.s3.eu-west-2.amazonaws.com/tiles/{z}/{x}/{y}.pbf'
const interpolator = d3.scaleLinear()
.domain([0, 4, 12, 16, 20, 24, 28].map(x => x * 1.94384))
.range(["hsl(0, 0%, 100%)", "hsl(202, 88%, 51%)", "hsl(157, 96%, 53%)", "hsl(60, 100%, 49%)", "hsl(26, 100%, 49%)", "hsl(0, 64%, 43%)", "hsl(274, 47%, 29%)"]);
const opacityInterpolaotr = d3.scaleLinear()
.domain([0, 4, 12, 28].map(x => x * 1.94384))
.range([0, 0, 1, 1]);
const vectorStyle = {
wind: function (properties, zoom) {
var speed = properties.wind_speed_max;
const color = interpolator(speed);
const opacity = opacityInterpolaotr(speed);
return {
fill: true,
fillColor: color,
stroke: false,
fillOpacity: opacity
};
}
};
L.vectorGrid.protobuf(URL, {
rendererFactory: L.canvas.tile,
// token: TOKEN,
vectorTileLayerStyles: vectorStyle,
maxNativeZoom: 20,
maxZoom: 2
}).addTo(map);
map.setView({
lat: 0,
lng: 0
}, 3);
</script>
</body>
</html>Any help would be appreciated!
Metadata
Assignees
Labels
No labels
Activity