Learn how to display a map with a basemap layer using OpenLayers .
A map contains layers of geographic data. A map contains a basemap layer and, optionally, one or more data layers . You can display a specific area of a map by using a map view and setting the location and zoom level .
In this tutorial you will use OpenLayers to display a map of the Santa Monica Mountains in California using the topographic basemap layer .
This tutorial is the starting point the other OpenLayers tutorials.
PrerequisitesYou need a free ArcGIS developer account to access your dashboard and API keys . The API key must be scoped to access the services used in this tutorial.
Steps Create a new penGo to CodePen to create a new pen for your application. Add HTMLDefine an HTML page to create a map that is the full width and height of the browser window.
In CodePen > HTML , add HTML and CSS to create a page with a div element called map
.
More info Use the HTML to create a page with a map. Use the map
div to display the map. Use the CSS to make the map full width and height.
The <!DOCTYPE html>
tag is not required in CodePen. If you are using a different editor or running the page on a local server, be sure to add this tag to the top of your HTML page.
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Load the librariesYou will need add <script>
and <link>
tags to load the JavaScript and CSS files for OpenLayers and ol-mapbox-style
.
In the <head>
element, add references to the OpenLayers CSS and JavaScript library.
Show more lines
Add line. Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Add a reference to the ol-mapbox-style
library, which is required to load and style a vector tile layer using a vector tile style in OpenLayers.
More info The additional library olms.js
is provided by the developers of OpenLayers. The acronym "olms" stands for OpenLayers Mapbox Style. For more information, see the ol-mapbox-style documentation .
Show more lines
Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Create a map and viewUse the Map
and View
classes to create an OpenLayers map.
More info The OpenLayers Map
class displays the contents of the map and provides a user interface to interact with it. It supports clicking, zooming, panning, rotating, and tilting the perspective of the map. It also lets you interact with the visible contents of the map data, for example finding features at the mouse cursor. You can also use it to modify the data displayed by adding new sources or changing layer properties. OpenLayers takes care of automatically re-rendering as needed in response to changes made to layers.
For further details, see the OpenLayers documentation .
Add a <script>
element in the <body>
element.
Show more lines
Add line. Add line. Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Use the Map
class to create the map with options to control its display and behavior. Set the target
property to "map"
, which is the id of the div element.
Show more lines
Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Create a View
, and use setView
to apply it to the map. To center the map view, set the center
property to -118.80500,34.02700
and the zoom
property to 13
.
Show more lines
Add line. Add line. Add line. Add line. Add line. Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Get an API keyYou will need an API key to access ArcGIS services .
Go to your developer dashboard to get an API key . Copy the key as it will be used in the next step. Add the basemap layerOpenLayers does not directly support a vector basemap or a vector style file, so you will use the openlayers-mapbox-style
(olms) JavaScript library to load a Mapbox style from the Basemap layer service and render it with OpenLayers.
More info The Mapbox style is JSON file that contains a reference to the vector tile layers used in the style, and visual styling rules to apply to one or more data layers in those tiles.
Store your API key as a variable. You will need to include this API key whenever you invoke ArcGIS services.
Show more lines
Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Create a basemapId
variable and set it to ArcGIS:Streets
.
Show more lines
Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Construct the basemap URL based on basemapId
and your API key.
Show more lines
Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Use olms
to apply the basemap style to your map. The olms
function takes two inputs, the map
element and the URL for a Mapbox basemap style file.
Show more lines
Add line.
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Display a map </ title >
< style >
html ,
body ,
#map {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px ;
color : #323232 ;
}
</ style >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type = "text/css" />
< script src = "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" > </ script >
< script src = "https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const map = new ol.Map({ target: "map" });
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const apiKey = "YOUR-API-KEY" ;
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL);
</ script >
</ body >
</ html >
Show more lines
Run the appIn CodePen , run your code to display the map.
The map should display the topographic basemap layer for an area of the Santa Monica Mountains in California. Pan and zoom to explore the map.
What's next?Learn how to use additional ArcGIS location services in these tutorials: