Leaflet JS - CSUID and PRN Geocode

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">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.css">
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.js"></script>
<div id="mapid"></div>

CSS

#mapid {
  height: 530px;
}
.leaflet-container a {
  color: black;
}
.leaflet-container .leaflet-control-attribution {
  background: transparent;
  font-size: 12px;
  font-family: sans-serif;
  color: black;
  font-weight: 300;
}

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 apikey = 'c84e886891014383bcf608423555b0ba'

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

L.esri.Geocoding.Suggest.prototype.params.key = apikey;
L.esri.Geocoding.Geocode.prototype.params.key = apikey;
L.esri.Service.prototype.metadata = function(callback, context) {
  return this._request('get', '', {
    key: apikey
  }, callback, context);
}

L.tileLayer('https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {  attribution: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy; Map information from Lands Department <img src='https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg' style='width:25px;height:25px'/></a>",
  maxZoom: 19,
}).addTo(map);

L.tileLayer('https://api.hkmapservice.gov.hk/osm/xyz/label-tc/WGS84/tile/{z}/{x}/{y}.png?key=' + apikey, {
  minZoom: 10,
  maxZoom: 19,
}).addTo(map);

var geocodeBuildingCSUID = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/buildingcsuid',
  label: 'Building CSUID (e.g. 1429629890T20050430)',
  maxResults: 15
});

var geocodeLotCSUID = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/lotcsuid',
  label: 'Lot CSUID (e.g. 2570 158 B)',
  maxResults: 15
});

var geocodePRN = L.esri.Geocoding.geocodeServiceProvider({
  url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/prn',
  label: 'PRN (e.g. D1692072)',
  maxResults: 15
});

var searchControl =
 ...