Leftlet Grayscale with Key

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

#mapid { height: 530px; }

JavaScript

var map = L.map('mapid').setView([22.29227, 114.20847], 16);

var apikey = 'f4d3e21d4fc14954a1d5930d4dde3809'

var bounds = [
    [22.150,  113.6900, ], // Southwest coordinates
    [22.6000, 114.5700]  // Northeast coordinates
];
map.setMaxBounds(bounds);
map.options.minZoom = 10;
map.options.maxZoom = 20;

L.tileLayer('https://landsd.azure-api.net/dev/osm/xyz/basemap/gs/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
attribution: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
    maxZoom: 20,
    id: 'APIKEY'
}).addTo(map);


L.tileLayer('https://landsd.azure-api.net/dev/osm/xyz/label-tc/WGS84/tile/{z}/{x}/{y}.png?key='+apikey, {
    attribution: '<a href="https://mapapis01.blob.core.windows.net/info/disclaimer.html"  target="_blank">&copy;Lands Department, HKSARG</a>',
    maxZoom: 19,
    id: 'APIKEY'
}).addTo(map);