0

I am trying to render on a leaflet map an ArcGIS vector layer and a satellite image layer using the [Esri Leaflet Vector Tile plugin][1]. The issue is that when I add those two layers the labels of the vector layer disapear underneath the satellite image after we pan or zoom in the map.

For reference I am trying to load this vector tile layer https://www.arcgis.com/home/webmap/viewer.html?webmap=28f49811a6974659988fd279de5ce39f on top of the world imagery map.

Code exampe:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Esri Vector Layer</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

  <!-- Load Mapbox GL -->
  <link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"/>
  <script src="https://unpkg.com/mapbox-gl/dist/mapbox-gl.js"></script>

  <!-- Esri Leaflet and Esri Leaflet Vector -->
  <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector/dist/esri-leaflet-vector.js"></script>

  <style>
    body {margin:0;padding:0;}
    #map {position: absolute;top:0;bottom:0;right:0;left:0;}
  </style>
</head>
<body>

<div id="map"></div>

<script>
  var map = L.map('map').setView([ 40.706, -73.926], 14);
  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png').addTo(map);
  L.esri.Vector.layer('28f49811a6974659988fd279de5ce39f').addTo(map);
  
</script>

</body>
</html>
1

Using the zIndex property resolved the issue:

L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png',{ zIndex: -1 }).addTo(map);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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