<!DOCTYPE html>
<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>
            body { margin:0px; padding:0px; }
            #map { position:absolute; top:0px; bottom:0px; width:100%; }
<script src="https://tiles.locationiq.com/v3/libs/olms/12.0.0/olms.js" type="text/javascript"></script>
<div id="map" class="map"></div>
        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({
                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