0

Can someone provide a code sample to consume an ArcGIS Map Service into MapBox GL API? Thanks!

Jerry Garcia
  • 25
  • 2
  • I don't think it's possible. Map services serve up images, gl is vector. – CCantey May 08 '16 at 17:06
  • Is it someone else map service, or yours? If the latter, you can publish your map service as a vector tile layer using ArcGIS Pro. See https://doc.arcgis.com/en/arcgis-online/reference/vector-tile-layers.htm – Bjorn Svensson May 12 '16 at 18:08

2 Answers2

8
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #map1 {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 49%;
    }

    #map2 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 51%;
        width: 49%;
    }

    #map1_label,
    #map2_label {
        padding: 0.5em;
        position: absolute;
        z-index: 1;
        top: 10;
        color: #FFF;
        font-size: 1.2em;
        background-color: rgba(0, 0, 0, 0.8)
    }

    #map1_label {
        left: 10;
    }

    #map2_label {
        left: 51%;
    }
</style>


<div id="map1_label">Dynamic Map Service</div>
<div id="map2_label">Cached Map Service</div>
<div id='map1'></div>
<div id='map2'></div>

<script>
    mapboxgl.accessToken = 'your-mapbox-api-key';
    var map1 = new mapboxgl.Map({
        container: 'map1',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [153.021072, -27.470125],
        zoom: 15
    });

    var map2 = new mapboxgl.Map({
        container: 'map2',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [153.021072, -27.470125],
        zoom: 15
    });

    map1.on('load', function() {
        map1.addLayer({
            "id": "dynamic-demo",
            "type": "raster",
            "minzoom": 0,
            "maxzoom": 22,
            "source": {
                "type": "raster",
                "tiles": ['https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/export?dpi=96&transparent=true&format=png32&layers=show%3A0&bbox={bbox-epsg-3857}&bboxSR=EPSG:3857&imageSR=EPSG:3857&size=256,256&f=image'],
                "tileSize": 256
            }
        });
    });

    map2.on('load', function() {
        map2.addLayer({
            "id": "cache-demo",
            "type": "raster",
            "minzoom": 0,
            "maxzoom": 22,
            "source": {
                "type": "raster",
                "tiles": ['https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'],
                "tileSize": 256
            }
        });
    });
</script>

Rhys D
  • 81
  • 1
  • 3
  • 2
    I know this is an old post, however, just in case this helps anyone, see above: (two maps: one with dynamic service, the other with a cached service) – Rhys D Jul 18 '17 at 02:10
  • Thanks! The dynamic solution worked very well for me on Android, except I needed to put "imageSR=3857&bboxSR=3857" – Peter Keefe Apr 19 '19 at 15:39
-1

Mapbox GL only consumes vector tiles compatible with Mapbox Vector Tiles spec [1].

If ArcGIS Map Service provides compatible vector tiles, you could probably create a style with a tile source pointing to the service you mentioned [2].

[1] https://www.mapbox.com/vector-tiles/specification/

[2] https://www.mapbox.com/mapbox-gl-style-spec/#sources

tmpsantos
  • 68
  • 2
  • Thanks for your response. I've seen people post that they have accomplished this. I just need a code sample to get me going. Here is a public ArcGIS end-point. Maybe possible via WMS? I'm interested in overlaying various weather related services. http://nowcoast.noaa.gov/arcgis/rest/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer – Jerry Garcia May 10 '16 at 01:34
  • ArcGIS as WMS: http://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer?request=GetCapabilities&service=WMS – Jerry Garcia May 10 '16 at 01:36
  • 2
    MapboxGL can consume raster tile sources and wms sources. See their style spec for more info: https://www.mapbox.com/mapbox-gl-js/style-spec/ as well as: https://www.mapbox.com/mapbox-gl-js/example/wms/ – clhenrick Apr 13 '18 at 17:55