ArcGIS API 4.18 for JavaScript Sample using Digital Topographic Map of Hong Kong API in Vector Tile Format (Prod)

ArcGIS API 4.18 for JavaScript Sample using Digital Topographic Map of Hong Kong API in Vector Tile Format (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="map-area"></div>
<div id="rightPane">
  <div id="layerToggle">
    Toggle Vector Tile Labels: <br />
    <input type="checkbox" id="cb_en" /><label for="cb_en">English Label</label><br />
    <input type="checkbox" id="cb_tc" /><label for="cb_tc">Traditional Chinese Label</label><br />
    <input type="checkbox" id="cb_sc" /><label for="cb_sc">Simplified Chinese Label</label>
  </div>
</div>

CSS

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

#map-area {
  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;
}

.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";
    require([
      "esri/Map", "esri/Basemap", "esri/layers/VectorTileLayer",
      "esri/views/MapView",
      "esri/config",
      "esri/geometry/SpatialReference",
      "esri/geometry/Point",
      "esri/tasks/Locator"
    ], function(Map, Basemap, VectorTileLayer, MapView, esriConfig, SpatialReference, Point,
      Locator) {
      const basemapVTURL = "https://api.hkmapservice.gov.hk/ags/map/basemap/VT/HK80";
      const mapLabelVTUrl = "https://api.hkmapservice.gov.hk/ags/map/label-en/VT/HK80";
      const labels = {
        "cb_en": {
          id: "cb_en",
          url: "https://api.hkmapservice.gov.hk/ags/map/label-en/VT/HK80/resources/styles/root.json",
        },

        "cb_tc": {
          id: "cb_tc",
          url: "https://api.hkmapservice.gov.hk/ags/map/label-tc/VT/HK80/resources/styles/root.json",
        },
        "cb_sc": {
          id: "cb_sc",
          url: "https://api.hkmapservice.gov.hk/ags/map/label-sc/VT/HK80/resources/styles/root.json"
        }
      }


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

      const basemap = new Basemap({
        baseLayers: [
          new VectorTileLayer({
            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>"
          })
        ]
      });

      const map = new Map({
        basemap: basemap,
      });

      const mView = new MapView({
        container: "map-area",
        map: map,
        zoom: 9,
        center: new...