Refashion utf grid demo in pug

src/pug/pages/demo/scripts/utf-grid.js

@@ -0,0 +1,44 @@
+"use-strict"
+
+document.addEventListener('DOMContentLoaded', function pageLoaded() {
+    var map = L.map('map', {
+        center: [39.96, -75.15],
+        zoom: 15,
+    });
+
+    // add basemap
+    var basemap = L.tileLayer('https://korona.geog.uni-heidelberg.de/tiles/roadsg/x={x}&y={y}&z={z}', {
+        maxZoom: 19,
+        attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    });
+    map.addLayer(basemap);
+
+    // dynamically set path based on host
+    var PROD_PATH = 'https://d3hvvzen5hf4hb.cloudfront.net/';
+    var DEV_PATH = 'http://localhost:3000/';
+    var TILESERVER_PATH;
+    var host = window.location.hostname;
+    if (!host || host === 'localhost') TILESERVER_PATH = DEV_PATH;
+    else TILESERVER_PATH = PROD_PATH;
+
+    L.tileLayer(TILESERVER_PATH + 'tile/{z}/{x}/{y}.png?config=data-type-example&layers=["inlets"]').addTo(map);
+    var grid = L.utfGrid(TILESERVER_PATH + 'grid/{z}/{x}/{y}?config=data-type-example&layers=["inlets"]&utfFields=owner,operator', { useJsonP: false })
+
+    // keep track of currently active marker
+    //var marker
+    grid.on('mouseover', function gridClick(e) {
+        if (e.data) {
+            L.popup()
+                .setLatLng(e.latlng)
+                .setContent("This inlet is owned by " + e.data.owner + " and operated by " + e.data.operator + ".")
+                .openOn(map)
+        }
+    })
+    map.addLayer(grid);
+
+
+    // prompt user to mouse over the map, remove mouseover div on mouseover
+    document.getElementById('mousePrompt').addEventListener('mouseover', function onMouseOver() {
+        this.parentNode.removeChild(this);
+    })
+});

src/pug/pages/demo/utf-grid.pug

@@ -0,0 +1,29 @@
+extends ../../components/layout.pug
+
+block vars
+    - var pageTitle = 'UTF Grids'
+
+block scripts
+    include ../../components/leaflet-scripts.pug
+    script(src='./scripts/L.UTFGrid-min.js')
+    script(src='./scripts/utf-grid.js')
+
+block content
+    h2.display-4 UTF Grids
+    p.lead Serve UTF grids and interact with your data.
+    .row
+        .m-auto
+            code#urlExample https://yourtiles.cloudfront.net/tile/{z}/{x}/{y}.png?utfFields=owner,operator
+        figure.figure.w-100(style={'position': 'relative'})
+            .figure-img#map(style={'position': 'absolute', 'z-index': '1'})
+            .jumbotron.w-100.display-4.text-center#mousePrompt(style={
+                'position': 'absolute',
+                'z-index': '2',
+                'height': '500px',
+                'opacity': '0.5'
+            }) Mouse over me!
+            figcaption.figure-caption#dataDesc(style={'position': 'absolute', 'top': '500px', 'z-index': '3'})
+                | This point layer contains all the wastewater and stormwater inlets in Philadelphia with latitude and longitude coordinates. |
+                |
+                a(href="https://www.opendataphilly.org/dataset/water-inlets") City of Philadelphia
+