Consume ArcGIS services in Mapbox GL API?

10910
7
05-11-2016 08:00 AM
JerryGarcia
Occasional Contributor II

Can I consume ArcGIS Server REST services API into MapBox GL API?

0 Kudos
7 Replies
JerryGarcia
Occasional Contributor II

Here is an example, but not an ArcGIS service.

Can ArcGIS services be consumed like this format:

'http://maps1.aerisapi.com/[clientId]_[clientKey]/radar/{z}/{x}/{y}/current.png'

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
 
<div id='map'></div>
<script>
    mapboxgl.accessToken = 'xxxxxxxx';
    var tileset = 'mapbox.streets';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v8',
        center: [-74.50, 40], // starting position
        zoom: 5 // starting zoom
    });
 
    map.on('load', function () {
        map.addSource('aerisweather-radar', {
            "type": 'raster',
            "tiles": [
                'http://maps1.aerisapi.com/[clientId]_[clientKey]/radar/{z}/{x}/{y}/current.png',
                'http://maps2.aerisapi.com/[clientId]_[clientKey]/radar/{z}/{x}/{y}/current.png',
                'http://maps3.aerisapi.com/[clientId]_[clientKey]/radar/{z}/{x}/{y}/current.png',
                'http://maps4.aerisapi.com/[clientId]_[clientKey]/radar/{z}/{x}/{y}/current.png'
            ],
            "tileSize": 256
        });
        map.addLayer({
            "id": "radar-tiles",
            "type": "raster",
            "source": "aerisweather-radar",
            "minzoom": 0,
            "maxzoom":22
        });
    });
 
 
</script>
 
</body>
</html>
0 Kudos
JerryGarcia
Occasional Contributor II
0 Kudos
JerryGarcia
Occasional Contributor II

Can I consume the new vector tile format?

Vector tiles | ArcGIS API for JavaScript 4.0

0 Kudos
RebeccaStrauch__GISP
MVP Esteemed Contributor

From the ArcGIS User  ...ArcGIS Provides New Dimensions for Looking at Data | ArcUser

Vector Tiles

Vector tile maps download quickly, are easy to style and update, and look great on high-resolution displays. Users can customize the look and feel of vector tile maps and layers by simply editing the style of a tile layer. In November 2015, initial support for vector tiles was introduced for ArcGIS Online. A set of vector basemaps, available as both layers and web maps, was made available through the Esri Vector Basemaps (beta) group and could be displayed in the map viewer.

With ArcGIS Pro 1.2 and ArcGIS 10.4 for Server, users can generate vector tiles from their own data and display them in most web browsers. Vector tile layers and vector basemaps can be served using ArcGIS Online or Portal for ArcGIS. In ArcGIS Pro 1.2, once vector tile layers are created, they can be zipped up into vector tile packages and uploaded to ArcGIS Online or Portal for ArcGIS. Vector tile packages make it easy to update and restyle vector layers because packages contain tiles and style information. This means a vector tile package can be downloaded, modified to emphasize specific features, and shared as a new package back to the portal.

Commonly used spatial analysis tools, such as GeoEnrichment, are available in Portal for ArcGIS and ArcGIS Online.

Commonly used spatial analysis tools, such as GeoEnrichment, are available in Portal for ArcGIS and ArcGIS Online.

Custom web apps built with the ArcGIS API for JavaScript and ArcGIS Runtime SDKs can consume vector tile layers and vector basemaps by loading the web map or adding vector tile layers directly to the map. Developers can programmatically customize the style and the contents of the map such as turning a layer on or off.

Later this year, more desktop and mobile apps will use vector tile maps.

- See more at: http://www.esri.com/esri-news/arcuser/spring-2016/arcgis-provides-new-dimensions-for-looking-at-data...

I'm sure there will be more once 10.4.1 is released.  (originally I heard it was targeted or June..pre-UC, but haven't heard any rumors lately).

0 Kudos
ViktoriaMagnis
New Contributor II

Did you find a way to get this to work??

KristoforCarle
New Contributor

In case it helps anyone, I have a fork of mapbox-gl-js where I've ported Leaflet's support for AGOL tiled services GitHub - maphubs/mapbox-gl-js: Fork of Mapbox GL with support for ArcGIS Online raster tile sources 

For now, it only works with ArcGIS Online services with cached tiles. You can see an example of it in-action here: https://mapforenvironment.org/layer/info/148/Amazon-Human-Footprint#3.37/-3.39/-63.51 

I've also used Esri's open-source Terraformer project to convert MapServer or FeatureService queries to geoJSON for display on Mapbox GL, all in the browser. However, my current implementation is limited by the maxFeatures limit of the rest API query, and can be a bit slow for larger datasets. Also newer FeatureService query endpoints can generate GeoJSON directly.

JerryGarcia
Occasional Contributor II

Thanks Kristofor.  I'm still looking for a good solution.  

For now, I'm converting to geoJSON and have the same issue with number of features I can draw before the browser slows down.  Thanks!