Refactor DOT cam layers; misc features

* Add more travel-iq states
 * Combine DOT cam layer UI into single place
 * Use standard schema for cam data
 * Differentiate between photo and video cameras

layers/dot-cams/travel-iq/get_data.py

@@ -3,8 +3,13 @@
 import requests
 import json
 
-with open('states.json') as f:
-    states = json.loads(f.read())
+states = {
+    "Georgia": "https://511ga.org/",
+    "Louisiana": "https://www.511la.org/",
+    "Nevada": "https://www.nvroads.com/",
+    "NewYork": "https://www.511ny.org/",
+    "Wisconsin": "https://511wi.gov/"
+}
 
 for state, baseURL in states.items():
     query={
@@ -60,9 +65,11 @@ for state, baseURL in states.items():
                     "coordinates": [c['longitude'], c['latitude']], # yes, [lon, lat] since it's [x, y]
                 },
                 "properties": {
-                    'address': c['displayName'],
-                    'website': c['videoUrl'],
-                    'originalData': c,
+                    'name': c['displayName'],
+                    'views': [{
+                        'hasVideo': c['videoUrl'],
+                        'src': c['videoUrl'][0] if isinstance(c['videoUrl'], list) else c['videoUrl'], # LA returns multiple (identical?) streams
+                    }],
                 },
             })
         query['start'] += 100

layers/dot-cams/travel-iq/index.js

@@ -1,60 +0,0 @@
-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 states from './data/states.js';
-
-import pin from './pin.svg?url'; // TODO: remove `?url`?
-
-// https://en.wikipedia.org/wiki/Department_of_transportation#List_of_U.S._state_and_insular_area_departments_of_transportation
-const dot_names = {
-    wi: "WisDOT/511WI",
-};
-
-let vectorLayers = [];
-
-for (let [state, url] of Object.entries(states)) {
-    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;
-        }
-    }
-    vectorLayers.push({
-        name: dot_names[state] ?? state,
-        layer: vectorLayer,
-    });
-}
-
-export default vectorLayers;

layers/dot-cams/travel-iq/pin.svg

@@ -1,21 +0,0 @@
-<?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/dot-cams/travel-iq/states.json

@@ -1,3 +0,0 @@
-{
-    "wi": "https://511wi.gov/"
-}