Example of using a styled Esri vector tiles basemap (but not as the whole map)

[michaeladamkatz]

I see the example

import "ol/ol.css";
import "./styles.css";
import createMap from "ol-mapbox-style";

createMap(
  "map", "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/2020_USA_Median_Age/VectorTileServer/resources/styles/root.json"
);

I want to do that but:

(1) I want a basemap that looks like https://www.arcgis.com/apps/mapviewer/index.html?layers=de26a3cf4cc9451298ea173c4b324736

(2) I don't want my map to be just the basemap layer, but to have other OpenLayers layers on it, such as vector layers to draw objects. createMap sounds like it makes a map with just the styled vector tile layer. Can you add other layers to that map?

Is there an example that shows these?

[ahocevar]

Yes, that's possible, and there is an example: https://github.com/openlayers/ol-mapbox-style/blob/main/examples/apply-layergroup.js. If you want to add other layers with OpenLayers, just add them to the layers array in your map constructor, like you would without ol-mapbox-style:

const myEsriBaseMap = new LayerGroup();
createMap(myEsriBaseMap, myEsriStyle);

const Map = new Map({
  layers: [myEsriBaseMap, myOtherLayer1, myOtherLayer2]
});