Last active
January 1, 2022 06:33
-
-
Save jgravois/51e2b30e3d6cf6c00f06b263a29108a2 to your computer and use it in GitHub Desktop.
Esri OSM vector tiles in mapbox-gl-js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: apache-2.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title>Display a map</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.49.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.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> | |
| // https://esri.com/arcgis-blog/products/arcgis-living-atlas/mapping/new-osm-vector-basemap | |
| const styleUrl = "http://www.arcgis.com/sharing/rest/content/items/3e1a00aeae81496587988075fe529f71/resources/styles/root.json" | |
| // first fetch the esri style file | |
| // https://www.mapbox.com/mapbox-gl-js/style-spec | |
| fetch(styleUrl) | |
| .then(response => { | |
| return response.json() | |
| .then(style => { | |
| // next fetch metadata for the raw tiles | |
| const metadataUrl = style.sources.esri.url; | |
| fetch(metadataUrl) | |
| .then(response => { | |
| return response.json() | |
| .then(metadata => { | |
| const ready = format(style, metadata, styleUrl); | |
| mapboxgl.accessToken = 'ezree'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: ready, | |
| center: [-74.50, 40], // starting position [lng, lat] | |
| zoom: 3, // starting zoom | |
| customAttribution: "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, map layer by Esri" | |
| }); | |
| }) | |
| }) | |
| }) | |
| }) | |
| function format (style, metadata, styleUrl) { | |
| // ArcGIS Pro published vector services dont prepend tile or tileMap urls with a / | |
| style.sources.esri = { | |
| type: 'vector', | |
| scheme: 'xyz', | |
| tilejson: metadata.tilejson || '2.0.0', | |
| format: (metadata.tileInfo && metadata.tileInfo.format) || 'pbf', | |
| /* mapbox-gl-js does not respect the indexing of esri tiles | |
| because we cache to different zoom levels depending on feature density, in rural areas 404s will still be encountered. | |
| more info: https://github.com/mapbox/mapbox-gl-js/pull/1377 | |
| */ | |
| // index: metadata.tileMap ? style.sources.esri.url + '/' + metadata.tileMap : null, | |
| maxzoom: 15, | |
| tiles: [ | |
| style.sources.esri.url + '/' + metadata.tiles[0] | |
| ], | |
| description: metadata.description, | |
| name: metadata.name | |
| }; | |
| return style; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment