Leftlet for World Imagery (DEV)

by LandsD Map API

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="mapid"></div>

CSS

html, body, #mapid {
   height: 100%;
   width: 100%;
   margin: 0;
 }

 .leaflet-container .leaflet-control-attribution {
   background: transparent;
 }

 .leaflet-control-attribution.leaflet-control>a:nth-child(1) {
   display: none;
 }

 .att {
   float: right;
   margin-right: 30px;
   font-size: 10px;
   background-color: #FFFFFFB2;
   margin-bottom: 3px;
   padding: 0px 2px 0px 2px;
 }

 .landsDLogo {
   width: 28px;
   height: 28px;
   display: inline-flex;
   background: url(https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg);
   background-size: 28px;
   position: absolute;
   right: 3px;
   bottom: 3px;
 }

JavaScript

// resize map
const mapdiv = document.getElementById('mapid');
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 map = L.map('mapid').setView([22.29227, 114.20847], 8);

var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809' //landsd.azure-api.net starter key

remove_lf = true;
L.tileLayer('https://landsd.azure-api.net/dev/osm/xyz/worldimagery/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
  attribution: '<span class="att">Image ©2002 NASA/USGS</span><br><span class="att">Image ©2016 NASA/USGS</span><br><span class="att">Contains modified Copernicus Sentinel data [2022]</span><br/><br/><span class="att"><a href="https://api.portal.hkmapservice.gov.hk/disclaimer" target="_blank" >&copy;Map information from Lands Department</a></span><div class="landsDLogo"></div>',
  maxZoom: 19,
}).on('load', () => {
  if (remove_lf) {
    let attr = document.getElementsByClassName("leaflet-control-attribution leaflet-control")[0];
    attr.childNodes[1].remove();
    remove_lf = false;
  }
}).addTo(map);


L.tileLayer('https://landsd.azure-api.net/dev/osm/xyz/sclabel-en/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
  //attribution: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy; Imagery from NASA/Lands Department</a>",
  maxZoom: 19,
}).addTo(map);