Vector Tile

by LandsD Map API

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.33/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.33/dijit/themes/nihilo/nihilo.css">
<script src="https://js.arcgis.com/3.35/"></script>
<body class="nihilo">
    <div id="mainWindow"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map-area" class="shadow"></div>
      <div id="landsdlogo" class="landsdlogo"></div>
      <div id="rightPane">
           <div id="layerToggle">
            Toggle Vector Tile Labels: <br />
           </div>
      </div>
    </div>
    <div id ="coor"></div>
</body>

CSS

html,
 body,
 #map-area {
   //height: 100%;
   //width: 100%;
   margin: 2;
   padding: 2;
   
 }
 
 body{
   position:relative;
 }
 
.logo-med {
    width: 46px !important;
    height: 22px !important;
    background-image: url(https://js.arcgis.com/3.20/esri/images/map/logo-sm.png) !important;
    }

#landsdlogo {
  display: inline-block;
  vertical-align: bottom;
  width: 25px;
  height: 25px;
  background: url(https://mapapis01.blob.core.windows.net/images/landsdlogo.jpg);
  background-repeat: no-repeat;
  background-size: 25px 25px;
}

.esriAttribution a {
  color: black;
}

.esriAttribution {
  background: transparent;
  font-size: 12px;
  font-family: sans-serif;
  color: black;
}

#coor{
  position:absolute;
  left:0;
  bottom:0;
  background-color:white;
  padding:2px;
  border:1px solid black;
  font-size:12px;
  display:none;
}

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

JavaScript

// resize map
const mapdiv = window['map-area'];
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 basemapVTURL = "https://api.hkmapservice.gov.hk/ags/map/basemap/VT/WGS84"
var mapLabelVTUrl = "https://api.hkmapservice.gov.hk/ags/map/label-en/VT/WGS84"
            
/////
require([
  "esri/map","esri/basemaps", "esri/geometry/Point", "esri/layers/VectorTileLayer", "esri/SpatialReference", "dojo/_base/array", "dijit/form/CheckBox", "dojo/dom", "dojo/dom-construct", "dojo/domReady!"
],
        function(Map, esriBasemaps, Point, VectorTileLayer, SpatialReference, arrayUtils, CheckBox, dom, domConstruct) {
  
  XMLHttpRequest.prototype.openRaw = XMLHttpRequest.prototype.open
  XMLHttpRequest.prototype.open = function(method, url, asyn, usr, pwd){
    if(url.indexOf("ags/map")>=0){
      if(url.indexOf("?")>=0) url += "&key="+apikey
      else url += "?key="+apikey
    }
    this.openRaw(method, url, asyn, usr, pwd)
  }
  esriBasemaps.LandsDVT84 = {
    baseMapLayers: [
      {url: basemapVTURL + "/resources/styles/root.json",
       type: "VectorTile"}
    ]}

  var map = new Map("map-area", {
    center: [114.1095, 22.3964],
    zoom: 9,
    basemap: "LandsDVT84",
    showAttribution: true
  });
  
  var layers = []
  arrayUtils.forEach([
  {
  	url:"https://api.hkmapservice.gov.hk/ags/map/label-en/VT/WGS84/resources/styles/root.json",
		id: "English Label"
  },
  {
    url:"https://api.hkmapservice.gov.hk/ags/map/label-tc/VT/WGS84/resources/styles/root.json",
    id: "Traditional Chinese Label"
  },
  {
   ...