GeoPlatform - OpenLayers -Add an MVT Layer

Shows how to display a mapbox vector tile in OpenLayers

HTML

<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css">
<div id="divmap">
  <nav id="menu"></nav>
  
  <div id="map" class="map">
  </div>
</div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; z-index: 10; top: 0; bottom: 0; width: 100%; }

#menu {
    background: #fff;
    position: absolute;
    z-index: 100;
    top: 10px;
    right: 10px;
    border-radius: 3px;
    width: 120px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    font-family: 'Open Sans', sans-serif;
  }

  #menu a {
    font-size: 13px;
    color: #404040;
    display: block;
    margin: 0;
    padding: 0;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    text-align: center;
  }

  #menu a:last-child {
    border: none;
  }

  #menu a:hover {
    background-color: #f8f8f8;
    color: #404040;
  }

  #menu a.active {
    background-color: #3887be;
    color: #ffffff;
  }

  #menu a.active:hover {
    background: #3074a4;
  }

JavaScript

/*jshint esversion: 6 */

// Set up the OSM layer
let background = new ol.layer.Tile({
  source: new ol.source.OSM({
    source: new ol.source.OSM()
  })
});

let style = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'rgb(255, 175, 109)',
    width: 3,
    opacity: 1,
  })
});

// add mapbox vector tile
let mvt = new ol.layer.VectorTile({
  declutter: true,
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    url: 'https://sit-tileservice.geoplatform.info/vector/ngda_nhpn/{z}/{x}/{y}.mvt',
  }),
  style: style
});

let layers = [background, mvt];

// Create the map
let map = new ol.Map({
  layers: layers,
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([-105, 39.753056], 'EPSG:4326', 'EPSG:3857'),
    zoom: 12
  })
});