vector-tiles-in-mapbox-gl.md

Vector Tiles in Mapbox GL

Adding ESRI Vector Tiles to Mapbox GL JS by Jonah Adkins

Here we can see that adding an Esri vector tile service is a bit different from adding Mapbox tiles. For the Esri tiles, we’re referencing the pbf with the appropriate tiling scheme (z/x/y) using the tiles property instead of url property. To pull in each road type from Esri, I downloaded the style json and looked for references to road layers.

Appending resources/styles/root.json?f=pjson to the end of the service URL gives you the full style with layer names and such

https://tiles.arcgis.com/tiles/41TSzUbTxELRIXMD/arcgis/rest/services/2cool2school/VectorTileServer/tile/{z}/{y}/{x}.pbf

Creating Vector Tiles in ArcGIS

Map Sources

Official Docs

import * as React from 'react';
import ReactMapGL, {Source, Layer} from 'react-map-gl';

const EMPTY_STYLE = {
  version: 8,
  sources: {},
  layers: []
};

const geojson = {
  type: 'FeatureCollection',
  features: [
    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
  ]
};

class Map extends React.Component {
  render() {
    return (
      <ReactMapGL latitude={37.78} longitude={-122.41} zoom={8} mapStyle={EMPTY_STYLE}>
        <Source id="my-data" type="geojson" data={geojson}>
          <Layer
            id="point"
            type="circle"
            paint={{
              'circle-radius': 10,
              'circle-color': '#007cbf'
            }} />
        </Source>
      </ReactMapGL>
    );
  }
}

For vector tiles follow example from Trailmap:

    <Source id="MAPC trail vector tiles" type="vector" tiles={['https://tiles.arcgis.com/tiles/c5WwApDsDjRhIVkH/arcgis/rest/services/Walking_trail_vector_tiles/VectorTileServer/tile/{z}/{y}/{x}.pbf']}>
      <Layer {...pavedPaths} />
      <Layer {...unimprovedPaths} />
      <Layer {...protectedBikeLane} />
      <Layer {...bikeLane} />
      <Layer {...pavedFootway} />
      <Layer {...naturalSurfaceFootway} />
      <Layer {...pavedPathsProposed} />
      <Layer {...unimprovedPathsProposed} />
      <Layer {...protectedBikeLaneProposed} />
      <Layer {...bikeLaneProposed} />
      <Layer {...pavedFootwayProposed} />
      <Layer {...naturalSurfaceFootwayProposed} />
    </Source>

Vector Tile Service Documentation

Publish hosted tile layers.