Add WI DOT cams layer

layers/dot-cams/index.js

@@ -0,0 +1,18 @@
+import mn from './mn/layer.js';
+import wi from './wi/layer.js';
+
+const dot_cams = {
+    name: "State DOT Cameras",
+    layers: [
+        {
+            name: "MNDOT/511MN",
+            layer: mn,
+        },
+        {
+            name: "WisDOT/511WI",
+            layer: wi,
+        },
+    ],
+};
+
+export default dot_cams;

layers/dot-cams/wi/get_data.py

@@ -0,0 +1,74 @@
+#!/usr/bin/python3
+
+import requests
+import json
+
+query={
+    "columns": [ # no clue what any of this is, so here it stays
+        {
+            "data": None,
+            "name": "",
+        },
+        {
+            "name": "sortId",
+            "s": True,
+        },
+        {
+            "name": "region",
+            "s": True,
+        },
+        {
+            "name": "county",
+            "s": True,
+        },
+        {
+            "name": "roadway",
+            "s": True,
+        },
+        {
+            "name": "description1",
+        },
+        {
+            "data": 6,
+            "name": "",
+        },
+    ],
+    "start": 0,
+    "length": 100,
+}
+
+cameras = []
+available_cameras = 999_999 # lots
+
+while len(cameras) < available_cameras:
+    res = requests.get("https://511wi.gov/List/GetData/Cameras", {
+        "query": json.dumps(query),
+        "lang": "en",
+    })
+    res.raise_for_status()
+    res = res.json()
+    available_cameras = res['recordsTotal']
+    for c in res['data']:
+        cameras.append({
+            "type": "Feature",
+            "geometry": {
+                "type": "Point",
+                "coordinates": [c['longitude'], c['latitude']], # yes, [lon, lat] since it's [x, y]
+            },
+            "properties": {
+                'address': c['displayName'],
+                'website': c['videoUrl'],
+                'originalData': c,
+            },
+        })
+    query['start'] += 100
+
+geojson = {
+    "type": "FeatureCollection",
+    "features": cameras,
+}
+
+with open("data.geojson", "w") as f:
+    f.write(json.dumps(geojson))
+
+print(f"{len(cameras)} locations found")

layers/dot-cams/wi/layer.js

@@ -0,0 +1,46 @@
+import VectorLayer from 'ol/layer/Vector';
+import {Vector as VectorSource} from 'ol/source.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+
+import Hls from 'hls.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,
+        }),
+    }),
+});
+
+vectorLayer.customPopup = function(feature) {
+    return `<video style="max-width: 80vw; max-height: 80vh;" id="popupVideo" autoplay controls></video>`;
+};
+
+vectorLayer.customPopupCallback = function(feature) {
+    
+    const video = document.getElementById('popupVideo');
+
+    const videoSrc = feature.values_.originalData.videoUrl;
+    if (Hls.isSupported()) {
+        var hls = new Hls();
+        hls.loadSource(videoSrc);
+        hls.attachMedia(video);
+    }
+    // iDevice support, untested (only works in Safari; required for iPhones)
+    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = videoSrc;
+    }
+}
+
+export default vectorLayer;

layers/dot-cams/wi/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/index.js

@@ -14,7 +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';
+import dot_cams from './dot-cams/index.js';
 
 const layerCategories = [
     { // Base maps
@@ -76,12 +76,9 @@ const layerCategories = [
                 name: "Bikepacking.com Routes",
                 layer: bikepackingLayer,
             },
-            {
-                name: "511MN Cameras",
-                layer: _511mncamerasLayer,
-            }
         ]
     },
+    dot_cams,
     trips,
     chains,
     census_bureau,