Esri REST API to Mapbox GL

7/10/2023

You have your GIS data in ArcGIS Online or ArcServer, but you want to make a Mapbox GL map with your data. If this is your issue, keep reading. Adding Esri vector data from a Map Service or Feature Service to a Mapbox GL map is extremely easy but might not be immediately obvious. Enter the Esri REST API.

In this example, we will pull Park and Ride locations from PennDOT's Open Data portal. We use the Esri REST API to query the data as GeoJSON and follow Mapbox's example to load data from an external GeoJSON file. It is as simple as entering the REST API query URL inline for the data property for your data source.

    map.on("load", () => {
        map.addSource("source-park-ride", {
            "type": "geojson",
            "data": "https://gis.penndot.gov/arcgis/rest/services/opendata/parkandride/MapServer/0/query?where=1=1&outFields=DESCRIPTION,SPACES&outSR=4326&geometryPrecision=4&f=geojson"
        });
        map.addLayer({
            "id": "layer-park-ride",
            "type": "circle",
            "source": "source-park-ride",
            "paint": {
                "circle-color": "#83f",
                "circle-radius": 5,
                "circle-stroke-width": 2,
                "circle-stroke-color": "#fff"
            }
        });
    });
    

Keep in mind the caveat of the size of your data, since this technique is using GeoJSON, a big dataset could overwhelm your browser. Use query parameters to limit geometry precision, pair down attributes, or filter data with a WHERE REST query to reduce the size of your GeoJSON response and only send what data you need to the browser.