ArcGIS API 4.18 for JavaScript Sample using Composite Geocode Locator of LandsD API (Prod)

ArcGIS API 4.18 for JavaScript Sample using Composite Geocode Locator 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>

CSS

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

.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;
}

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

JavaScript

const apikey = "c84e886891014383bcf608423555b0ba";
 const basemapVTURL = "https://api.hkmapservice.gov.hk/ags/map/basemap/HK80";
 const mapLabelVTUrl = "https://api.hkmapservice.gov.hk/ags/map/label-en/HK80";

 require([
   "esri/Map", "esri/Basemap",
   "esri/layers/TileLayer",
   "esri/views/MapView",
   "esri/config",
   "esri/geometry/SpatialReference",
   "esri/geometry/Point",
   "esri/widgets/Search",
   "esri/tasks/Locator",
 ], function(Map, Basemap, TileLayer, MapView, esriConfig, SpatialReference, Point, Search,
   Locator) {


   esriConfig.request.interceptors.push({
     before: function(params) {
       if (params.url.indexOf("api.hkmapservice.gov.hk") >= 0) {
         if (params.requestOptions.query) {
           params.requestOptions.query.key = apikey
         } else {
           params.requestOptions.query = {
             key: apikey
           }
         }
       }
     },
     after: function(response) {
       if (!response.ssl) {
         response.ssl = true;
       }
     }
   });


   var map = new Map();
   map.add(new TileLayer({
     url: basemapVTURL,
     copyright: "<a href='https://api.portal.hkmapservice.gov.hk/disclaimer' target='_blank'>&copy;  Map information from Lands Department<div class='landsdlogo'></div></a>"
   }));
   map.add(new TileLayer(mapLabelVTUrl));
   var mView = new MapView({
     container: "viewDiv",
     map: map,
     zoom: 11,
     center: new Point(833359, 822961, new SpatialReference({
       wkid: 2326
     })),
   });

   fetch(basemapVTURL + "?f=json&key=" + apikey).then(response => response.json())
     .then(data => {
       mView.constraints.lods = data.tileInfo.lods;
     });

   var searchWidget = new Search({
     view: mView,
     includeDefaultSources: false,
     locationEnabled: false,
     sources: [{
       name: 'Composite',
       placeholder: 'Composite Locator',
       locator: new Locator({
         url: 'https://api.hkmapservice.gov.hk/ags/gc/composite/en'
       })
     }]
   });

...