Vector Tile Demo

Vector Tile Demo

by LandsD Map API

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vector Tile Demo</title>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="rightPane">
      <div>
        <label for="styleLink">Custom style json</label>
        <input class="styleLink" id="styleLink" type="text" value="https://mapapis02.blob.core.windows.net/mapapi/vector_demo_style.json" />
        <input id="load" type="button" value="Load" /><br>
        <span id="load_msg"></span>
      </div>
      <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 class="theme">
        <table>
          <tr>
            <td> <input class="full-button" id="Grayscale" type="button" value="Gray Scale" /> </td>
            <td> <input class="full-button" id="RedScale" type="button" value="Red Scale" /> </td>
          </tr>
          <tr>
            <td> <input class="full-button" id="GreenScale" type="button" value="Green Scale" /> </td>
            <td> <input class="full-button" id="BlueScale" type="button" value="Blue Scale" /> </td>
          </tr>
          <tr>
            <td> <input class="full-button" id="Random" type="button" value="Random Color" /> </td>
            <td> <input class="full-button" type="button" id="resetStyle" value="Default" /> </td>
          </tr>
          <tr>
            <td> <input class="full-button" type="button"...

CSS

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

#rightPane {
  margin: 5px;
  background-color: none;
  color: #421b14;
  width: auto;
  position: absolute;
  right: 0px;
  top: 0px;
  height: auto;
  cursor: move;
}

#rightPane>div {
  margin: 5px;
  padding: 5px;
  width: 200px;
  background-color: #fff;
  box-shadow: 1px 1px 10px #888888;
}

#rightPane>div.theme,
#rightPane>div.theme>table {
  padding: 0;
  width: 210px;
  border-collapse: collapse;
}

#rightPane>div.theme>table>tbody>tr>td {
  padding: 0;
  width: 105px;
  border: 1px solid grey;
  text-align: center;
}

#styleLink {
  width: 140px;
}

#layerToggle>input[type=checkbox],
#layerToggle>label {
  cursor: pointer;
}

.color-pick {
  text-align: right;
  cursor: pointer;
}

#rightPane-top {
  width: 500px;
}

.full-button {
  margin: 0px 5px 0px 5px;
  height: 24px;
  background-color: #FFFFFF;
  border: 0;
  cursor: pointer;
}



/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}


.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 12px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript

const apikey = "c84e886891014383bcf608423555b0ba";
const basemapVTURL = "https://api.hkmapservice.gov.hk/ags/map/basemap/VT/WGS84/resources/styles/root.json"
const labels = [{
    id: "cb_en",
    url: "https://api.hkmapservice.gov.hk/ags/map/label-en/VT/WGS84/resources/styles/root.json",
  },
  {
    id: "cb_tc",
    url: "https://api.hkmapservice.gov.hk/ags/map/label-tc/VT/WGS84/resources/styles/root.json",
  },
  {
    id: "cb_sc",
    url: "https://api.hkmapservice.gov.hk/ags/map/label-sc/VT/WGS84/resources/styles/root.json"
  }
];


let vectorStyleJson;
const styleLayerIds = {
  "Building": [
    "Lv13/10_BLDGPOLY_50K/BLD",
    "Lv13/10_BLDGPOLY_50K/CGA/0",
    "Lv13/10_BLDGPOLY_50K/CGA/1",
    "Lv13/10_BLDGPOLY_50K/CGA/2",
    "Lv14/12_BLDGPOLY_50K/BLD",
    "Lv14/12_BLDGPOLY_50K/CGA/0",
    "Lv14/12_BLDGPOLY_50K/CGA/1",
    "Lv14/12_BLDGPOLY_50K/CGA/2",
    "Lv15/14_BLDGPOLY_10K/BLD-1",
    "Lv15/14_BLDGPOLY_10K/CGA-1/0",
    "Lv15/14_BLDGPOLY_10K/CGA-1/1",
    "Lv15/14_BLDGPOLY_10K/CGA-1/2",
    "Lv15/14_BLDGPOLY_10K/POD-1",
    "Lv16/18_BLDGPOLY_10K/BLD-1",
    "Lv16/18_BLDGPOLY_10K/CGA-1/0",
    "Lv16/18_BLDGPOLY_10K/CGA-1/1",
    "Lv16/18_BLDGPOLY_10K/CGA-1/2",
    "Lv16/18_BLDGPOLY_10K/POD-1",
    "Lv17-Lv18/18_BuildingLine_5K/OG, DUM",
    "Lv17-Lv18/18_BuildingLine_5K/OG, FEN; US, FEN/0",
    "Lv17-Lv18/18_BuildingLine_5K/OG, FEN; US, FEN/1",
    "Lv17-Lv18/18_BuildingLine_5K/OG, FEN; US, FEN/2",
    "Lv17-Lv18/18_BuildingLine_5K/OG, OSL; US, OSL",
    "Lv17-Lv18/18_BuildingLine_5K/OG, PDL",
    "Lv17-Lv18/18_BuildingLine_5K/OG, WLL; US, WLL/0",
    "Lv17-Lv18/18_BuildingLine_5K/OG, WLL; US, WLL/1",
    "Lv17-Lv18/19_BuildingPoly_5K/OG, CON; OG, CGA; OG, CHN",
    "Lv17-Lv18/19_BuildingPoly_5K/OG, CSN",
    "Lv17-Lv18/19_BuildingPoly_5K/OG, OSS/0",
    "Lv17-Lv18/19_BuildingPoly_5K/OG, OSS/2",
    "Lv17-Lv18/19_BuildingPoly_5K/OG, POD",
    "Lv17-Lv18/19_BuildingPoly_5K/OG, RUI/0",
    "Lv17-Lv18/19_BuildingPoly_5K/OG, USN",
   ...