0

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}.

enter image description here

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: '&copy; <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

Improve this question
0

1 Answer 1

Reset to default
1

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

Your map service must be published using the and the default scale options used by Google Maps, Bing Maps and ArcGIS Online. Esri Leaflet will not support any other spatial reference for tile layers.

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:

"lods": [
  {
    "level": 0,
    "resolution": 78271.51696399994,
    "scale": 295828763.795777
  },
  {
    "level": 1,
    "resolution": 39135.7584820001,
    "scale": 147914381.897889
  },
  {
    "level": 2,
    "resolution": 19567.87924099992,
    "scale": 73957190.948944
  },
  ...
}

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:

"lods": [
  {
    "level": 0,
    "resolution": 156543.03392800014,
    "scale": 591396864
  },
  {
    "level": 1,
    "resolution": 78271.51696399994
    "scale": 295698432,
  },
  {
    "level": 2,
    "resolution": 39135.75848200009,
    "scale": 147849216
  },
  ...

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.