ArcGIS API 4.18 for JavaScript Sample using Reverse Geocoding of LandsD API (Prod)

ArcGIS API 4.18 for JavaScript Sample using Reverse Geocoding of LandsD API (Prod)

by LandsD Map API

HTML

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
 <div id="viewDiv"></div>
 <div id="hint">Click to reverse geocode</div>
 <div id="rightPane">
   <div id="layerToggle">
     Select a reverse locator
     <select id="selectLocator">
       <option></option>
       <option>Building Name</option>
       <option>Site Name</option>
       <option>SubSite Name</option>
       <option>Building CSUID</option>
       <option>Lot CSUID</option>
       <option>PRN</option>
       <option>Road</option>
       <option>POI Point</option>
       <option>Place Point</option>
       <option>Geo Community</option>
       <option>Utility Point</option>
       <option>Lot</option>
       <option>GLA</option>
       <option>Building Licence</option>
       <option>Demarcation District</option>
       <option>Lands Department District</option>
       <option>Deposit Area & Vesting Order</option>
       <option>Tenancy Poly</option>
       <option>Tenancy Line</option>
       <option>Street Intersection</option>
       <option>Address</option>
       <option>Map Index</option>
       <option>Vertical Geodetic Control Point</option>
       <option>Horizontal Geodetic Control Point</option>
       <option>Local Control Point</option>
       <option>Vacant Government Site</option>
       <option>Land Sale Site</option>
     </select>
   </div>
 </div>

CSS

html,
 body {
   width: 100%;
   height: 100%;
   margin: 0;
   font-family: sans-serif;
 }

 #viewDiv {
   width: 100%;
   height: 100%;
 }


 #rightPane {
   margin: 10px;
   padding: 10px;
   background-color: #fff;
   color: #421b14;
   width: auto;
   box-shadow: 1px 1px 10px #888888;
   position: absolute;
   right: 0px;
   top: 0px;
   height: auto;
 }

 #hint {
   position: absolute;
   bottom: 20px;
   left: 5px;
   background: white;
   padding: 2px;
   font-size: 13px;
   box-shadow: 1px 1px 10px #888888;
 }

 .landsdlogo {
   width: 25px;
   height: 25px;
   display: inline-flex;
   background: url(https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg);
   background-size: 25px;
   margin-left: 4px;
 }
 
.esri-attribution a {
  color: black;
}

 .esri-attribution {
   width: auto !important;
   left: auto !important;
   background: none;
   font-size: 12px;
  font-family: sans-serif;
  color: black;
 }

 .esri-attribution__powered-by {
   display: none;
 }

JavaScript

const apikey = "c84e886891014383bcf608423555b0ba";
 const basemapVTURL = "https://api.hkmapservice.gov.hk/ags/map/basemap/WGS84";
 const mapLabelVTUrl = "https://api.hkmapservice.gov.hk/ags/map/label-en/WGS84";
 require([
   "esri/Map", "esri/Basemap",
   "esri/layers/TileLayer",
   "esri/views/MapView",
   "esri/config",
   "esri/geometry/SpatialReference",
   "esri/geometry/Point",
   "esri/tasks/Locator"
 ], function(Map, Basemap, TileLayer, MapView, esriConfig, SpatialReference, Point,
   Locator) {
   const locatorUrls = {
     'Building Name': {
       name: 'Building Name',
       placeholder: 'Building Name',
       url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/building'
     },
     'Site Name': {
       name: 'Site Name',
       placeholder: 'Site Name',
       url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/site'
     },
     'SubSite Name': {
       name: 'SubSite Name',
       placeholder: 'SubSite Name',
       url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/buildings/subsite'
     },
     'Building CSUID': {
       name: 'Building CSUID',
       placeholder: 'e.g. 1429629890T20050430',
       url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/buildingcsuid'
     },
     'Lot CSUID': {
       name: 'Lot CSUID',
       placeholder: 'e.g. 2570 158 B',
       url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/lotcsuid'
     },
     'PRN': {
       name: 'PRN',
       placeholder: 'e.g. D1692072',
       url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/prn'
     },
     'Road': {
       name: 'Road',
       placeholder: 'Road',
       url: 'https://api.hkmapservice.gov.hk/ags/gc/ib1000/transportation/streetcentrelines'
     },
     'POI Point': {
       name: 'POI Point',
       placeholder: 'POI Name',
       url: 'https://api.hkmapservice.gov.hk/ags/gc/ib5000/POI/poipoint'
     },
     'Place Point': {
       name: 'Place Point',
       placeholder: 'Place Point Name',
       url:...