Search code examples
mapboxarcgismapbox-gl-js

Nothing showing when plotting vector tile layer from Arcgis server on MapBox GL JS map


I'm trying to plot a supplied vector tile layer onto a map using MapBox GL JS. I've followed the documentation here but nothing apart from the basic map is being output and there are no console errors. In the browser's Network tab I can see lots of .pbf requests being returned with data so it would seem that the endpoint is passing data back, but I don't know how to determine what the problem is in plotting that data onto the map.

The code is as follows:

mapboxgl.accessToken = '[my access token]';
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        zoom: 6,
        center: [-0.118092, 51.509865]
      });

      map.once("load", () => {
        map.addSource("ncn", {
          type: "vector",
          tiles: [
            "https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/tile/{z}/{y}/{x}.pbf"
          ]
        });

        map.addLayer({
          id: "ncn-lines",
          type: "line",
          source: "ncn",
          "source-layer": "NCN_Vector_Tile_Package",
          "layout": {
            "visibility": "visible"
          },
          'paint': {
            'line-color': 'rgb(255, 0, 0)'
          }
        });
      });

I am fairly sure that the type should be line (rather than fill) as the data is supposed to contain route lines rather than vector shapes.

I don't have access to the Arcgis server so can't see how anything is configured at that side. Can anyone suggest what might be wrong here and/or how to debug?


Solution

  • It looks like the value for source-layer is not correct - it should be NCN_2020. Here's a demo showing it working: https://jsbin.com/xunuhibuki/1/edit?html,output

    How do you get that value? I'm not quite sure the best way, but the way I found: add ?f=html to your vector tile layer like this: https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/?f=html then click "Styles" link at the bottom which gives you an example of how to construct your map.addLayer() commands in your mapboxgl code.