<!DOCTYPE html>
<html>
<head>
<title>Raster Tiles</title>
<link rel="stylesheet" href="https://tiles.locationiq.com/v3/libs/openlayers/8.2.0/ol.css" type="text/css">
<script src="https://tiles.locationiq.com/v3/libs/openlayers/8.2.0/ol.js"></script>
<style>
body { margin:0px; padding:0px; }
#map { position:absolute; top:0px; bottom:0px; width:100%; }
</style>
<script src="https://tiles.locationiq.com/v3/libs/olms/12.0.0/olms.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var key = 'pk.aa7f5d0539c5675b7f3429402939d8fa'; //Insert your LocationIQ access token here
//Initializing the street layer
var streetsLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://tiles.locationiq.com/v3/streets/r/{z}/{x}/{y}.png?key='+key,
attributions: '<a href="https://locationiq.com/?ref=maps" target="_blank">© LocationIQ</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
maxZoom: 20
})
});
//Let's add the Map!
var map = new ol.Map({
controls:[
new ol.control.FullScreen(), // Fullscreen
new ol.control.Zoom(), // Zoom
new ol.control.ScaleLine(), // ScaleLine to show the map scale indicator
new ol.control.Rotate(), // Map rotation control, Shift+Alt to rotate
new ol.control.Attribution(),
],
target: 'map', // The `html` section we need the map to be added to.
layers: [streetsLayer], // All layers we need are included here.
//Creates the view with the given center and zoom level.
view: new ol.View({
center: ol.proj.fromLonLat([-122.42, 37.779]), // center of the map for the initial view
zoom: 12 // Initial zoom level
})
});
</script>
</body>
</html>