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

ArcGIS API 4.18 for JavaScript Sample using 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;
  color: black;
}

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

JavaScript

var 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: 'Address',
       placeholder: 'Input Addresses',
       locator: new Locator({
         url: 'https://api.hkmapservice.gov.hk/ags/gc/loc/address/en'
       })
     }, {
       name:...