I'm using [email protected] and leaflet 1.7.1 and esri-leaflet-vector plugin.
When I'm adding VectorTileServer layer, rendered tiles are showing in the wrong place and in the wrong scale. Where I doing wrong?
VectorTileServer is published in Web Mercator "spatialReference":{"wkid":102100,"latestWkid":3857}.
Taka a look on the Norway.
it is shown in the wrong place and in the wrong scale?
const map = L.map('map').setView([50, 18], 3);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.esri.Vector.vectorTileLayer("https://services.geodataonline.no/arcgis/rest/services/GeocacheVector/GeocacheGraatone_WM/VectorTileServer", {
style: (style) => {
style.layers.forEach(function (layer) {
if (layer.layout['text-rotate']) {
layer.layout['text-rotate'].stops = [[0, 0]]
}
});
return style
}
}
).addTo(map); body { margin:0; padding:0; }
#map {
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Esri Leaflet</title>
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet-vector.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>Anyone can help ? Regards Mik
One thing I noticed with this layer you're using is that the scale properties of each zoom level seem to be off. From the esri-leaflet docs
If you go to arcgis's sample tutorial for vector tile layers, they have a sample example with a sample vector tile layer there: Santa Monica Mountain Parcels. If you open up that tile server url, you'll see the JSON with property
lods:I'm going to assume that these are the default scales accepted by esri-leaflet, considering these are the ones used in their sample vector tile layer. They're also listed here: What ratio scales do Google Maps zoom levels correspond to?
If you open up the tile server url for the layer you're trying to use for norway, you'll see the same, but the scale numbers seem to be off by one zoom level:
This is why your norway layer is wrong, but at least is consistently wrong across all zoom layers (meaning it always shows up in the same, wrong spot, at half the size it should be).
If you have any control over / connection with the people who server that layer, I'd let them know their zoom levels are wrong.
In the meantime, there may be a way to override the JSON that esri-leaflet is using when loading that layer, but it would be a lot of work of digging into their source code, and very hacky.