Openlayers Sample with Key

by LandsD Map API

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css">
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
 <div id="map" class="map"></div>

CSS

html, body{
  height:100%;
  width:100%;
};
#map { 
height: 100%;
width:100%;}

JavaScript

var apikey= 'f4d3e21d4fc14954a1d5930d4dde3809'
var map = new ol.Map({
       target: 'map',
       layers: [
         new ol.layer.Tile({
           source: new ol.source.XYZ({
             attributions: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
             url: 'https://landsd.azure-api.net/tileservices/basemap/WGS84/2017/{z}/{x}/{y}.png?key='+apikey
           })
         }),
          new ol.layer.Tile({
				   source: new ol.source.XYZ({
				     attributions: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
             url: 'https://landsd.azure-api.net/tileservices/label/WGS84/2017/tc/{z}/{x}/{y}.png?key='+apikey
				   })
				 })
       ],
       view: new ol.View({
         center: ol.proj.fromLonLat([114.20847, 22.29227]),
         zoom: 17,
         minZoom: 10,
         maxZoom: 19
       })
     });