Openlayer DOP

by LandsD Map API

HTML

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<div id="map" class="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
}
.ol-attribution a {
  color: black;
}
.ol-attribution ul {
  font-size: 12px;
  font-family: sans-serif;
  color: black;
}

.ol-attribution.ol-uncollapsible img {
  max-height: 25px;
}

.ol-attribution.ol-uncollapsible {
  height: auto;
   background: transparent;
}

JavaScript

// resize map
const mapdiv = document.getElementById('map');
var margin;
if (document.all) {
  margin = parseInt(document.body.currentStyle.marginTop, 10) + parseInt(document.body.currentStyle.marginBottom, 10);
} else {
  margin = parseInt(document.defaultView.getComputedStyle(document.body, '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(document.body, '').getPropertyValue('margin-bottom'));
}
mapdiv.style.height = (window.innerHeight - margin) + 'px';

var apikey = 'c84e886891014383bcf608423555b0ba'

var map = new ol.Map({
  target: 'map',
	controls: ol.control.defaults({
  	attributionOptions: ({
    	collapsible: false
    })
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        attributions: 'Image ©2002 NASA/USGS|Image ©2016 NASA/USGS|Contains modified Copernicus Sentinel data [2022]|<a href="https://api.portal.hkmapservice.gov.hk/disclaimer" target="_blank" class="copyrightDiv">&copy;Map information from Lands Department</a><img src="https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg"></img',
        url: 'https://api.hkmapservice.gov.hk/osm/xyz/worldImagery/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey
      })
    }),
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://api.hkmapservice.gov.hk/osm/xyz/sclabel-tc/wgs84/tile/{z}/{x}/{y}.png?key=' + apikey
      }),
      minResolution: 200,
      maxResolution: 20000,
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([114.20847, 22.29227]),
    zoom: 6,
    minZoom: 1,
    maxZoom: 19
  })
});