Add 511MN cameras layer

index.html

@@ -15,6 +15,10 @@
       </div>
     </aside>
     <div id="map"></div>
+    <div id="popup" class="ol-popup">
+      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+      <div id="popup-content"></div>
+    </div>
     <script type="module" src="./main.js"></script>
   </body>
 </html>

layers/511mn/layer.js

@@ -0,0 +1,24 @@
+import VectorLayer from 'ol/layer/Vector';
+import {Vector as VectorSource} from 'ol/source.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+
+import {Style} from 'ol/style.js';
+import Icon from 'ol/style/Icon.js';
+
+import url from './data.geojson?url'; // TODO: remove `?url`?
+import pin from './pin.svg?url'; // TODO: remove `?url`?
+
+const vectorLayer = new VectorLayer({
+    source: new VectorSource({
+        url: url,
+        format: new GeoJSON,
+    }),
+    style: new Style({
+        image: new Icon({
+            anchor: [0.5, 1],
+            src: pin,
+        }),
+    }),
+});
+
+export default vectorLayer;

layers/511mn/pin.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 384 512"
+   width="40px"
+   height="30px"
+   version="1.1"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+  <path
+     d="m 384,192 c 0,87.4 -117,243 -168.3,307.2 -12.3,15.3 -35.1,15.3 -47.4,0 C 116.1,435 0,279.4 0,192 0,85.96 85.96,0 192,0 245.96029,0 294.73775,22.275796 329.62577,58.136607 363.27205,92.721042 384,139.94065 384,192 Z"
+     style="fill:#000;fill-opacity:1" />
+  <g transform="translate(-10 -52.362) scale(0.4)">
+    <g transform="matrix(1.1311 0 0 1.1311 -76.881 -20.513)">
+      <rect style="stroke:#ffffff;stroke-width:7.7518;fill:#ffffff" ry="57.185" height="337.9" width="560.25" y="363.1" x="233.88" />
+      <rect style="stroke:#ffffff;stroke-width:7.2923;fill:#ffffff" ry="40.515" height="81.03" width="241.25" y="310.54" x="389.61" />
+    </g>
+      <path style="stroke:#000000;stroke-width:32;fill:#00000000" d="m508.57 188.08c0 32.348-26.223 58.571-58.571 58.571s-58.571-26.223-58.571-58.571 26.223-58.571 58.571-58.571c32.339 0 58.559 26.209 58.571 58.548" transform="matrix(1.4504 0 0 1.4504 -257.49 -204.11) matrix(1.274 0 0 1.274 -47.288 304.47)" />
+  </g>
+</svg>

layers/511mn/process_data.py

@@ -0,0 +1,66 @@
+#!/usr/bin/env python3
+
+import requests
+import json
+import re
+
+with open("query.graphql") as f:
+    QUERY = f.read()
+
+PAYLOAD = [
+    {
+        "query": QUERY,
+        "variables": {
+            "input": {
+                # Cover the whole state (this is pretty overkill, admittedly)
+                "north":53.23294,
+                "south":40.40589,
+                "east":-78.6823,
+                "west":-107.24675,
+                "zoom":9,
+                "layerSlugs": ["normalCameras"],
+                "nonClusterableUris": ["dashboard"]
+            },
+            "plowType":"plowCameras",
+        }
+    }
+]
+
+res = requests.post('https://511mn.org/api/graphql', json=PAYLOAD)
+res.raise_for_status()
+
+camera_views = res.json()[0]['data']['mapFeaturesQuery']['mapFeatures']
+
+cameras = []
+
+viewCount = 0
+
+for c in camera_views:
+    if len(c['features']) != 1:
+        print(c)
+        raise Exception(f"Unexpected number of features: {len(c['features'])}")
+    
+    if re.match(r"Show [\d]* cameras", c['tooltip']):
+        raise Exception(f"Not zoomed in enough! Finding aggregate cameras: {c}")
+
+    viewCount += len(c['views'])
+    cameras.append({
+        "type": "Feature",
+        "geometry": c['features'][0]['geometry'],
+        "properties": {
+            'address': c['tooltip'],
+            'website': c['views'][0]['url'],
+            'originalData': c,
+        },
+    })
+
+geojson = {
+    "type": "FeatureCollection",
+    "features": cameras,
+}
+
+with open("data.geojson", "w") as f:
+    f.write(json.dumps(geojson))
+
+print(f"{len(cameras)} locations found")
+print(f"{viewCount} total views")

layers/511mn/query.graphql

@@ -0,0 +1,40 @@
+query MapFeatures($input: MapFeaturesArgs!, $plowType: String) {
+  mapFeaturesQuery(input: $input) {
+    mapFeatures {
+      bbox
+      tooltip
+      uri
+      features {
+        id
+        geometry
+        properties
+      }
+      ... on Event {
+        priority
+      }
+      __typename
+      ... on Camera {
+        views(limit: 5) {
+          uri
+          ... on CameraView {
+            url
+          }
+          category
+        }
+      }
+      ... on Plow {
+        views(limit: 5, plowType: $plowType) {
+          uri
+          ... on PlowCameraView {
+            url
+          }
+          category
+        }
+      }
+    }
+    error {
+      message
+      type
+    }
+  }
+}

layers/index.js

@@ -14,6 +14,7 @@ import cellular from './cellular.js';
 import light_pollution from './light_pollution.js';
 import state_land from './state-land/index.js';
 import trips from './trips/index.js';
+import _511mncamerasLayer from './511mn/layer.js';
 
 const layerCategories = [
     { // Base maps
@@ -75,6 +76,11 @@ const layerCategories = [
                 name: "Bikepacking.com Routes",
                 layer: bikepackingLayer,
             },
+            {
+                name: "511MN Cameras",
+                layer: _511mncamerasLayer,
+                enabled: true,
+            }
         ]
     },
     trips,

main.js

@@ -2,15 +2,36 @@ import './style.css';
 import {Map, View} from 'ol';
 import {fromLonLat, get} from 'ol/proj.js';
 import {defaults as defaultControls} from 'ol/control.js';
+import Overlay from 'ol/Overlay.js';
 
 import ToggleMenuControl from './ui/controls.js';
 
 import layerCategories from './layers/index.js';
 
+// from https://openlayers.org/en/latest/examples/popup.html
+const container = document.getElementById('popup');
+const content = document.getElementById('popup-content');
+const closer = document.getElementById('popup-closer');
+const popupOverlay = new Overlay({
+  element: container,
+  autoPan: {
+    animation: {
+      duration: 250,
+    },
+  },
+});
+
+closer.onclick = function () {
+  popupOverlay.setPosition(undefined);
+  closer.blur();
+  return false;
+};
+
 const map = new Map({
   controls: defaultControls().extend([new ToggleMenuControl()]),
   target: 'map',
   layers: [],
+  overlays: [popupOverlay],
   view: new View({
     center: fromLonLat([-93.24151, 44.80376]),
     zoom: 10,
@@ -56,3 +77,35 @@ for (let category of layerCategories) {
     }
   }
 }
+
+function objectToTable(o) {
+  // TODO: hack hack hack
+  let table = `<table style="margin: 0.5em; border-collapse: collapse;">`;
+  for (let [key, value] of Object.entries(o)) {
+    if (typeof value === "object") {
+      value = objectToTable(value);
+    }
+    if (typeof value === "string" && value.startsWith('https://')) {
+      value = `<a href="${value}">${value}</a>`
+    }
+    table += `<tr><td style="border: 1px solid;">${key}</td><td style="border: 1px solid;">${value}</td></tr>`;
+  }
+  table += `</table>`;
+  return table;
+}
+
+// from https://openlayers.org/en/latest/examples/icon.html
+map.on('click', function (evt) {
+  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+    return feature;
+  });
+  if (!feature) {
+    return;
+  }
+
+  // exclude geometry -- https://stackoverflow.com/a/208106
+  const {geometry: _, ...featureData} = feature.values_;
+
+  content.innerHTML = objectToTable(featureData);
+  popupOverlay.setPosition(evt.coordinate);
+});

style.css

@@ -82,3 +82,47 @@ aside summary {
     right: 0.5em;
   }
 }
+
+/* POPUP (from https://openlayers.org/en/latest/examples/popup.html) */
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 280px;
+}
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.ol-popup-closer:after {
+  content: "✖";
+}
+/* END POPUP */