2

So basically I am using the mapbox-gl-leaflet plugin to render mapbox vector tiles on leaflet map. Now I am trying to load ArcGIS vector tiles in the plugin but the vector tile is not rendering on the map. It is specified that the plugin supports any vector tile source like for example this one https://api.maptiler.com/maps/topo/style.json?key=input_key_here which loads without any problems. But the ArcGIS map that I am trying to load: https://www.arcgis.com/home/webmap/viewer.html?webmap=28f49811a6974659988fd279de5ce39f doesn't load in the plugin.

The URL request (points to a 404): https://www.arcgis.com/sharing/rest/content/items/28f49811a6974659988fd279de5ce39f/resources/styles/root.json

Also from the chrome developer console I get these errors when trying to load the vector map:

evented.js:140 Error: missing required property "version"
    at Object.Un [as emitValidationErrors] (validate_style.js:37)
    at Be (style.js:46)
    at i._load (style.js:245)
    at style.js:225
    at ajax.js:165

evented.js:140 Error: missing required property "sources"
    at Object.Un [as emitValidationErrors] (validate_style.js:37)
    at Be (style.js:46)
    at i._load (style.js:245)
    at style.js:225
    at ajax.js:165

evented.js:140 Error: missing required property "layers"
    at Object.Un [as emitValidationErrors] (validate_style.js:37)
    at Be (style.js:46)
    at i._load (style.js:245)
    at style.js:225
    at ajax.js:165

Edit* adding code example

<!DOCTYPE html>
<html>

  <head>
    <title>WebGL</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        margin: 0;
        background: white;
      }

    </style>

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

    <!-- Mapbox GL -->
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel='stylesheet' />
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
    
    <script src="https://rawgit.com/mapbox/mapbox-gl-leaflet/master/leaflet-mapbox-gl.js"></script>

  </head>

  <body>
    <div id="map"></div>
    
    <script>
    
        var token = 'your mapbox token';
        
        var leafletMap = L.map('map').setView([38.912753, -77.032194], 2);
            
        var satelliteArcGIS = L.mapboxGL({
            accessToken: token,
            style: 'https://www.arcgis.com/sharing/rest/content/items/28f49811a6974659988fd279de5ce39f/resources/styles/root.json?f=pjson'
        }).addTo(leafletMap);
        
    </script>
  </body>

</html>
Improve this question
2
  • 1
    Coding questions on GIS SE site should include relevant existing code, otherwise they are most likely to be closed.
    – TomazicM
    Commented Jul 1, 2020 at 6:20
  • @TomazicM Added code example, thanks for pointing it out.
    – Archelaos
    Commented Jul 1, 2020 at 7:16

1 Answer 1

Reset to default
2

I'm not familiar with mapbox-gl-leaflet plugin, but it seems it's not sufficient to display ArcGIS Esri vector layers. ArcGIS has it's own Esri Leaflet Vector Tile plugin (https://github.com/Esri/esri-leaflet-vector), which you have to use on top of mapbox-gl library.

ArcGIS map you are referring to consists of two layers. One is World Imagery and the second one you are interested in is Hybrid Reference Layer. From it's info page at https://www.arcgis.com/home/item.html?id=30d6b8271e1849cd9c3042060001f425 you can deduce it's ID, which you need to display it.

So the whole code (taken from official plugin example) to display your vector layer then looks like this:

<!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.esri.Vector.layer('30d6b8271e1849cd9c3042060001f425').addTo(map);
</script>

</body>
</html>
Improve this answer
6
  • I used the code example but the only thing displayed are labels. There isn't any satellite imagery displayed.
    – Archelaos
    Commented Jul 2, 2020 at 9:28
  • If you read carefully the answer you'll notice that it's explicitly stated that this is only for vector layer, and that's exactly what question is asking. For raster/imagery layer you have to add extra raster/imagery layer.
    – TomazicM
    Commented Jul 2, 2020 at 10:12
  • Since we drift from original plugin used to Esri Leaflet Vector Tile plugin which I am not familiar with, I tried to add first the imagery layer and then the vector source and vice versa for testing purposes. It is showing the labels and the imagery on initialization but after panning or zooming the labels get lost underneath the satellite image. I am not sure if this is related to the plugin itself.
    – Archelaos
    Commented Jul 2, 2020 at 10:21
  • If you have a new question then post it as a new question with relevant code included. Your present question is about vector layer and it was answered as such.
    – TomazicM
    Commented Jul 2, 2020 at 10:54
  • If answer helped you solve your vector layer problem, it's customary on GIS SE site to mark answer as accepted to let others with similar problems know that problems was successfully resolved.
    – TomazicM
    Commented Jul 2, 2020 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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