Geoaccelerators JSAPI GCS - cilent-side styling

by David Hollema

HTML

<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <!--
     ArcGIS API for JavaScript, https://js.arcgis.com
     For more information about the layers-vectortilelayer-json sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/layers-vectortilelayer-json/index.html
     -->
  <title>VectorTileLayer from JSON - 4.15</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #topbar {
      padding: 10px;
    }

    .action-button {
      font-size: 14px;
      height: 32px;
      margin-top: 10px;
      border: 1px solid #0079c1;
      color: #0079c1;
    }

    .action-button:hover {
      background: #0079c1;
      color: #e4e4e4;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.15/"></script>
  <script src="./index.js"></script>
</head>

<body>
  <div id="viewDiv">
    <div id="topbar" class="esri-widget">
    </div>
  </div>
</body>

</html>

JavaScript

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/VectorTileLayer"
], function(Map, MapView, VectorTileLayer) {
  const map = new Map({
    basemap: "topo-vector"
  });
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-84.55, 39.2],
    zoom: 9
  });

  // load a new vector tile layer from JSON object
  const contours = new VectorTileLayer({
    style: {
      version: 8,
      sources: {
        esri: {
          type: "vector",
          url: "http://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/"
        }
      },
      layers: [{
        source: "esri",
        "source-layer": "hamilton_contours_50ft",
        minzoom: 0,
        layout: {
          "line-join": "round",
          "line-cap": "round"
        },
        id: "hamilton_contours_50ft",
        type: "line",
        paint: {
          "line-width": 1,
          "line-color": "#1a471b"
        }
      }]
    }
  });
  map.add(contours);
  view.ui.add("topbar", "top-right");
});