leighghunt/index.html

## index.html
<!DOCTYPE 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"
  />
  <meta name="description" content="[Vector tiles - 4.2]">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the layers-vectortilelayer sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/layers-vectortilelayer/index.html
  -->
  <title>Vector tiles - 4.2</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
  <script src="https://js.arcgis.com/4.2/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/VectorTileLayer",
      "esri/widgets/Compass",
      "esri/geometry/Point",
      "esri/geometry/SpatialReference",
      "dojo/domReady!"
    ], function(Map, MapView, VectorTileLayer, Compass, Point, SpatialReference) {

      // Create a Map
      var map = new Map();

      // Make map view and bind it to the map
      var view = new MapView({
        container: "viewDiv",
        map: map,
        //center: [174.74, -36.840556],
        //center: [5921401.645, 1755147.706],
        zoom: 12
      });

      /********************************************************************
       * Add a tile layer to the map
       *
       * The url property must either point to the style as
       * demonstrated below or to the URL of a Vector Tile service
       * such as:
       * https://basemaps.arcgis.com/b2/arcgis/rest/services/World_Basemap/VectorTileServer
       *********************************************************************/
      var tileLyr = new VectorTileLayer({
          url: "https://tiles.arcgis.com/tiles/XTtANUDT8Va4DLwI/arcgis/rest/services/NZ_Canvas_Dark__Vector_/VectorTileServer"
//        url: "https://www.arcgis.com/sharing/rest/content/items/bf79e422e9454565ae0cbe9553cf6471/resources/styles/root.json"
      });
      map.add(tileLyr);

      var ptAuckland = new Point({
        x: 1755147.706,
        y: 5921401.645,
        spatialReference: 2193
      });
      view.center = ptAuckland;

      view.on("click", function(event) {
        console.log("view.on('click')");
        console.log("view.rotation: " + view.rotation);

        /*
        var info = "<br> <span> view click event: </span> x: " +
          event.mapPoint.x.toFixed(2) + " y: " + event.mapPoint.y.toFixed(
            2);
        */
      });

      /*
      view.on("pointer-move", function(event) {
        console.log("view.on('pointer-move')");
        console.log(event);
      });
      */
      var compassWidget = new Compass({
        view: view
      });

      view.ui.add(compassWidget, "top-left");

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>


</body>
</html>
	<!DOCTYPE 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"
	/>
	<meta name="description" content="[Vector tiles - 4.2]">
	<!--
	ArcGIS API for JavaScript, https://js.arcgis.com
	For more information about the layers-vectortilelayer sample, read the original sample description at developers.arcgis.com.
	https://developers.arcgis.com/javascript/latest/layers-vectortilelayer/index.html
	-->
	<title>Vector tiles - 4.2</title>
	<style>
	html,
	body,
	#viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	</style>

	<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
	<script src="https://js.arcgis.com/4.2/"></script>

	<script>
	require([
	"esri/Map",
	"esri/views/MapView",
	"esri/layers/VectorTileLayer",
	"esri/widgets/Compass",
	"esri/geometry/Point",
	"esri/geometry/SpatialReference",
	"dojo/domReady!"
	], function(Map, MapView, VectorTileLayer, Compass, Point, SpatialReference) {

	// Create a Map
	var map = new Map();

	// Make map view and bind it to the map
	var view = new MapView({
	container: "viewDiv",
	map: map,
	//center: [174.74, -36.840556],
	//center: [5921401.645, 1755147.706],
	zoom: 12
	});

	/********************************************************************
	* Add a tile layer to the map
	*
	* The url property must either point to the style as
	* demonstrated below or to the URL of a Vector Tile service
	* such as:
	* https://basemaps.arcgis.com/b2/arcgis/rest/services/World_Basemap/VectorTileServer
	*********************************************************************/
	var tileLyr = new VectorTileLayer({
	url: "https://tiles.arcgis.com/tiles/XTtANUDT8Va4DLwI/arcgis/rest/services/NZ_Canvas_Dark__Vector_/VectorTileServer"
	// url: "https://www.arcgis.com/sharing/rest/content/items/bf79e422e9454565ae0cbe9553cf6471/resources/styles/root.json"
	});
	map.add(tileLyr);

	var ptAuckland = new Point({
	x: 1755147.706,
	y: 5921401.645,
	spatialReference: 2193
	});
	view.center = ptAuckland;

	view.on("click", function(event) {
	console.log("view.on('click')");
	console.log("view.rotation: " + view.rotation);

	/*
	var info = "<br> <span> view click event: </span> x: " +
	event.mapPoint.x.toFixed(2) + " y: " + event.mapPoint.y.toFixed(
	2);
	*/
	});

	/*
	view.on("pointer-move", function(event) {
	console.log("view.on('pointer-move')");
	console.log(event);
	});
	*/
	var compassWidget = new Compass({
	view: view
	});

	view.ui.add(compassWidget, "top-left");

	});
	</script>
	</head>
	<body>
	<div id="viewDiv"></div>


	</body>
	</html>