How to display ESRI Vector base map in Openlayers 3

Question

I am trying to add the new ESRI Vector Basemaps in OpenLayers 3. I have gotten so far as to display the layer un-styled by modifying the Mapbox Example published by OpenLayers.

Clearly I had to remove the style: createMapboxStreetsV6Style() option to get the esri layer to display. So basically the map does not know the style information to display the layer correctly.

I think it should be possible to do it because ESRI's Leaflet port and example is doing this already. I think information on esri's style IDs is available in here Leaflet code.

OpenLayers should already be able to use all this information as it is able to display Mapbox Layer. What I need help with is, how to make it use ESRI's style information.

Here's what I have so far (codepen here):

var map = new ol.Map({
  layers: [
    new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
        tilePixelRatio: 16,
        url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

.map {
  background: #f8f4f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.1.0/ol.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.1.0/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>

Palaearctic

Have you tried posting this question on gis.stackexchange.com ? You may get more help there. – Avantgarde

Not quite sure I follow, but there is a perfectly good example on the OL examples page: openlayers.org/en/latest/examples/xyz-esri.html By modifying the second part of the "url" attribute in the map object you can select your desired layer. – Latrinalatrine

@Latrinalatrine That example doe snot show vector base map. Just a regular image tiles. Vector basemaps are styles on the fly: arcgis.com/home/… – Palaearctic

Answer 1

There is a separate library, https://npmjs.com/package/ol-mapbox-style, which makes it easy to consume vector tile maps including their styles in OpenLayers. It reads the style doc and builds the whole map from it. For one of the ESRI maps you linked above, the code to get that map in OpenLayers would be

var map = new ol.Map({
  target: 'map'
});
olms.apply(map, 'https://www.arcgis.com/sharing/rest/content/items/4f4843d99c34436f82920932317893ae/resources/styles/root.json?f=json');

You can replace 4f4843d99c34436f82920932317893ae with one of the other map ids listed in the Leaflet example to get the other maps.

You can also play with that code - I have created a CodePen: https://codepen.io/ahocevar/pen/xLaBVV.

Boiardo

Answer 2

@ahocevar's suggest is perfect,

esri's root.json, sprite and glyphs are not full URL, the are only last part as see below

In your example, those not full URL works, but, I have test it in mapbox js api, it failed, error is can't parse URL,

I have to change those url to a full URL, to make it works.

                         root_json = {

                                                      "version" : 8,
                                                      "name": "test",

                                                      //"sprite" : original_rootJson.sprite,    // original is not a full URL, not work  "../sprites/sprite"   
                                                      // "sprite" : "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/2020_USA_Median_Age/VectorTileServer/resources/sprites/sprite",
                                                      "sprite" : _sprite,

                                                      

                                                      // "glyphs" : original_rootJson.glyphs,      // original is not a full URL, not work  "../fonts/{fontstack}/{range}.pbf" 
                                                      // "glyphs" : "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/2020_USA_Median_Age/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
                                                      "glyphs" : _glyphs,

                                                    

                                                      // root json  specification :   https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
                                                      "sources" : {

                                                                                "esri" : {
                                                                                            "type" : "vector",

                                                                                            //  By supplying TileJSON properties such as "tiles", "minzoom", and "maxzoom" directly in the source:
                                                                                            "tiles": [
                                                                                                          // "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/2020_USA_Median_Age/VectorTileServer/tile/{z}/{y}/{x}.pbf"
                                                                                                            _tile_pbf
                                                                                                      ],

                                                                                            // "maxzoom": 14
                                                                                            // By providing a "url" to a TileJSON resource
                                                                                            // not work,yet
                                                                                            //  "url" : "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_Childrens_Map/VectorTileServer/tile/{z}/{y}/{x}.pbf"
                                                                                            //  "url": "http://api.example.com/tilejson.json"

                                                                                        }
                                                                  },

                                                      "layers":  original_rootJson.layers     


                                      } // root_json

Rudie