Learn how to add a raster tile layer to a map .
A raster tile layer, also known as an image tile layer , displays imagery such as satellite photography or hillshading. You can combine raster tile layers to enhance the display of a street basemap layer , position the layer on top of existing layers, or position it under existing layers. When positioned above other layers, you need to give the raster tile layer a level of transparency so that users can see through it to the basemap. This combined basemap layer technique is used to enhance overall visualization.
In this tutorial, you add a Hillshade raster tile layer, which is a basemap layer composed of jpeg images, on top of a street basemap layer.
You 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.
To get started, either complete the Display a map tutorial or use this pen . To access ArcGIS location services , you need an API key .
Go to your dashboard to get an API key .
In CodePen , update apiKey to use your key.
Change line
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);
To load the hillshade tiles, you will create an XYZ{x}, {y} and {z} elements which the source substitutes with numbers when requesting each tile. The source can be displayed using a Tilesource property. Set the opacity to 0.3 so that the basemap can be seen through the hillshade layer.
The URL for the hillshade image tile layer is:
https: // server.arcgisonline.com /ArcGIS/ rest /services/ Elevation /World_Hillshade/ MapServer /tile/ {z} /{y}/ {x}
Add a load handler to the olms initialization. Inside, create an XYZ
Show more lines
Add line. Add line. Add line. Add line. Add line. Add line.
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Add a styled basemap layer </ 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" type = "text/javascript" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR-API-KEY" ;
const map = new ol.Map({
target: "map"
});
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL)
.then( function (map) {
const hillshadeURL = "https://server.arcgisonline.com/ArcGIS/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}" ;
const hillshadeSource = new ol.source.XYZ({
url: hillshadeURL
});
const tileLayer = new ol.layer.Tile({
source: hillshadeSource,
opacity: 0.3
});
map.addLayer(tileLayer);
});
</ script >
</ body >
</ html >
Show more lines
Create a TileXYZmap.addLayer
Show more lines
Add line. Add line. Add line. Add line. Add line.
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" />
< title > OpenLayers Tutorials: Add a styled basemap layer </ 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" type = "text/javascript" > </ script >
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR-API-KEY" ;
const map = new ol.Map({
target: "map"
});
map.setView(
new ol.View({
center: ol.proj.fromLonLat([ -118.805 , 34.027 ]),
zoom: 12
})
);
const basemapId = "ArcGIS:Streets" ;
const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&apiKey=" + apiKey;
olms(map, basemapURL)
.then( function (map) {
const hillshadeURL = "https://server.arcgisonline.com/ArcGIS/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}" ;
const hillshadeSource = new ol.source.XYZ({
url: hillshadeURL
});
const tileLayer = new ol.layer.Tile({
source: hillshadeSource,
opacity: 0.3
});
map.addLayer(tileLayer);
});
</ script >
</ body >
</ html >
Show more lines
In CodePen , run your code to display the map.
Your map should display a semi-transparent hillshade layer overlaid over a basemap.
Learn how to use additional ArcGIS location services in these tutorials:
