How to migrate to an ArcGIS basemap
You can use the ArcGIS basemap styles service styles to provide the basemap for your application. There are over 30 different styles to choose from such as streets, navigation, light gray, dark gray, OpenStreetMap, and satellite imagery. You can also create and use your own custom basemap styles by using the Vector tile style editor.
In order to access the basemap styles service, you need to get an API key or implement OAuth 2.0.
Steps
- Get an API key or implement OAuth 2.0.
- Reference the
ol-mapbox-stylelibrary. - Remove the
layersparameter and its contents from yourmap. - Set the basemap styles service URL, style enumeration, and API key. Learn more in Introduction to basemap layers.
- Apply the basemap URL to your
mapusingolms.
Example
OpenStreetMap tile layer to ArcGIS vector basemap layer
This example replaces the OSM tile layer with the arcgis/streets basemap style. To do so, you will need to access the ol-mapbox-style library.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12.3.5/dist/olms.js"></script>
<script>
const map = new ol.Map({
target: "map",
view: new ol.View({
center: ol.proj.fromLonLat([-118.805, 34.027]),
zoom: 12
}),
layers: [
new TileLayer({
source: new ol.source.OSM(),
}),
],
});
const accessToken = "YOUR_ACCESS_TOKEN";
const basemapId = "arcgis/streets";
const basemapURL = `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapId}?token=${accessToken}`;
olms.apply(map, basemapURL)
</script>
How to access and display GeoJSON data
You can host your GeoJSON data as a feature layer in a feature service. The advantage of this is that you can use a SQL or spatial query to access a subset of the GeoJSON data.
Example
Display GeoJSON data
The example below demonstrates how to access GeoJSON from a hosted feature layer versus from a static file.
<script>
const map = new ol.Map({
layers: [
new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: "/data/myGeoJSON.geojson"
})
})
],
});
olms.apply(map, basemapURL)
.then(function (map) {
const pointLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=geojson"
})
});
map.addLayer(pointLayer);
});
</script>