Mapbox GL Custom Source for ArcGIS Tiled Map Services
This is an unofficial plugin, and is not affliated with Mapbox or Esri. 😇
- version 0.1.2 = tested with mapbox-gl-js v0.36.0
- version 0.2.0 = tested with mapbox-gl-js v0.43.0
- version 0.4.0 = tested with mapbox-gl-js v1.1.0
- version 0.5.0 = tested with mapbox-gl-js v1.4.0
🚦Limitations🚦
- The map service must be cached as tiles, see http://server.arcgis.com/en/server/latest/get-started/windows/tutorial-creating-a-cached-map-service.htm
- The map service must have Web Mercator tiles (srs = 102100 or 3857)
Installation
npm install mapbox-gl-arcgis-tiled-map-service
or
yarn add mapbox-gl-arcgis-tiled-map-service
Usage
var ArcGISRasterTileSource = require('mapbox-gl-arcgis-tiled-map-service');
var map = new mapboxgl.Map({
/* ... */
});
map.addSourceType('arcgisraster', ArcGISRasterTileSource, function(err) {
if(err){
/*do something*/
}
});
map.addSource('amazon-human-footprint', {
"type": "arcgisraster",
"url": "https://tiles.arcgis.com/tiles/RTK5Unh1Z71JKIiR/arcgis/rest/services/HumanFootprint/MapServer?f=json",
"tileSize": 256
});
map.addLayer({
"id": "amazon-human-footprint",
"type": "raster",
"source": "amazon-human-footprint",
"minzoom": 0,
"maxzoom": 18,
"paint": {
"raster-opacity": 75
});
Development
Build: npm run build-dev
License
MIT
Attributions
Some code was adapted from https://github.com/Leaflet/Leaflet and https://github.com/Esri/esri-leaflet