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
2024-01-31 01:17:04 -06:00 · 2024-01-31 01:17:04 -06:00 · dbcd151364
parent 710930f428
commit dbcd151364
16 changed files with 324 additions and 276 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,4 +2,4 @@ node_modules
 dist
 *.geojson
 *.shp
-layers/dot-cams/castle-rock/data/states.js
+layers/dot-cams/*/data/states.js
--- a/layers/dot-cams/README.md
+++ b/layers/dot-cams/README.md
@ -1,10 +1,124 @@
-https://traveler.modot.org/map/
+# Department of Transportation Cameras by State
+
+Many states are through one of a few providers:
+
+ * Castle Rock: https://www.castlerockits.com/oneweb
+ * IBI Travel IQ: https://www.ibigroup.com/ibi-products/traveliq/
+
+| State | DOT Name[^name] | Online Service Name | Video? | Web provider | Link                            |
+| ----- | --------------- | ------------------- | ------ | ------------ | ------------------------------- |
+| AK    | ALDOT           |                     |        | Travel IQ    | https://511.alaska.gov/         |
+| AL    | PF              |                     |        |              |                                 |
+| AR    | ADOT            |                     |        |              |                                 |
+| AZ    | ARDOT           |                     |        |              |                                 |
+| CA    | Caltrans        |                     |        |              |                                 |
+| CO    | CDOT            |                     |        |              |                                 |
+| CT    | CTDOT           |                     |        |              |                                 |
+| DE    | DelDOT          |                     |        |              |                                 |
+| FL    | FDOT            |                     |        |              |                                 |
+| GA    | GDOT            |                     |        |              |                                 |
+| HI    | HDOT            |                     |        |              |                                 |
+| IA    | ITD             |                     |        |              |                                 |
+| ID    | IDOT            |                     |        |              |                                 |
+| IL    | INDOT           |                     |        |              |                                 |
+| IN    | DOT             |                     |        |              |                                 |
+| KS    | KDOT            |                     |        |              |                                 |
+| KY    | KYTC            |                     |        |              |                                 |
+| LA    | DOTD            |                     |        |              |                                 |
+| MA    | MaineDOT        |                     |        |              |                                 |
+| MD    | MDOT            |                     |        |              |                                 |
+| ME    | MassDOT         |                     |        |              |                                 |
+| MI    | MDOT            |                     |        |              |                                 |
+| MN    | MNDOT           | 511MN               |        | Castle Rock  |                                 |
+| MO    | MoDOT           |                     |        |              | https://traveler.modot.org/map/ |
+| MS    | MDOT            |                     |        |              |                                 |
+| MT    | MDT             |                     |        |              |                                 |
+| NC    | NDOT            |                     |        |              |                                 |
+| ND    | NDOT            |                     |        |              |                                 |
+| NE    | NHDOT TODO: fix |                     |        |              |                                 |
+| NH    | NJDOT           |                     |        |              |                                 |
+| NJ    | NMDOT           |                     |        |              |                                 |
+| NM    | NYSDOT          |                     |        |              |                                 |
+| NV    | NCDOT           |                     |        |              |                                 |
+| NY    | NDDOT           |                     |        |              |                                 |
+| OH    | ODOT            |                     |        |              |                                 |
+| OK    | ODOT            |                     |        |              |                                 |
+| OR    | ODOT            |                     |        |              |                                 |
+| PA    | PennDOT         |                     |        |              |                                 |
+| RI    | RIDOT           |                     |        |              |                                 |
+| SC    | SCDOT           |                     |        |              |                                 |
+| SD    | SDDOT           |                     |        |              |                                 |
+| TN    | TDOT            |                     |        |              |                                 |
+| TX    | TxDOT           |                     |        |              |                                 |
+| UT    | UDOT            |                     |        |              |                                 |
+| VA    | VTrans          |                     |        |              |                                 |
+| VT    | VDOT            |                     |        |              |                                 |
+| WA    | WSDOT           |                     |        |              |                                 |
+| WI    | WisDOT          |                     |        |              |                                 |
+| WV    | WVDOT           |                     |        |              |                                 |
+| WY    | WYDOT           |                     |        |              |                                 |
+
+
+[^name]: From https://en.wikipedia.org/wiki/Department_of_transportation#List_of_U.S._state_and_insular_area_departments_of_transportation
+
+
+

 https://map.wyoroad.info/wtimap/index.html

 https://www.sd511.org/#&zoom=6.396744103345674&lon=-96.21250629888505&lat=44.0011361134118&states

 https://www.travelmidwest.com/lmiga/cameraReport.jsp?location=GATEWAY.IL
+https://www.traffic-cams.com/seatonville/illinois/all
+
+https://www.wyoroad.info/
+https://map.wyoroad.info/wtimap/index.html
+
+https://www.511mt.net
+
+https://wsdot.com/Travel/Real-time/Map/
+
+oregon: https://tripcheck.com/
+
+https://www.nmroads.com/mapIndex.html?
+
+https://drivetexas.org/?r=co / https://its.txdot.gov/its/District/FTW/cameras
+
+oklahoma: https://oktraffic.org/#/map
+
+arkansas: https://www.idrivearkansas.com/
+
+tn: https://smartway.tn.gov/traffic?features=incident,traffic
+
+https://goky.ky.gov/
+https://maps.kytc.ky.gov/trafficcameras/?xmin=-9450477.801928485&xmax=-9383289.654065905&ymin=4696826.35185232&ymax=4742421.039224366
+
+https://www.511sc.org/#zoom=7.392317422778981&lon=-80.72462271068872&lat=33.54446902822535&dmsg&rest&cams&other&cong&wthr&acon&incd&trfc iteris
+
+https://drivenc.gov/#
+https://eapps.ncdot.gov/services/traffic-prod/v1/cameras/
+https://eapps.ncdot.gov/services/traffic-prod/v1/cameras/images?filename=US70_YearganRd.jpg&t=1706599344471
+
+https://www.mdottraffic.com/default.aspx?showMain=true
+
+Michigan is just...down? https://mdotjboss.state.mi.us/MiDrive/map
+
+ohio: https://www.ohgo.com/all-ohio?lt=39.949999999999996&ln=-83.05&z=7&ls=incident,construction
+
+https://511pa.com/
+
+https://www.dot.ri.gov/travel/index.php
+
+https://511nj.org/camera
+
+https://www.511virginia.org/
+
+https://wv511.org/
+
+https://chart.maryland.gov/TrafficCameras/GetTrafficCameras
+
+http://goakamai.org/cameras
+

 # CA
 kern maybe same as WI?
@ -13,3 +127,15 @@ https://kern511.org/cctv?start=0&length=10&order%5Bi%5D=1&order%5Bdir%5D=asc
 https://dot.ca.gov/programs/traffic-operations/traveler-information/511

 "rr": "https://riverregion511.org" castlerock
+
+
+No video, only photos ??
+    "ak": "https://511.alaska.gov/",
+    "az": "https://az511.com/",
+    "ct": "https://ctroads.org/",
+    "new england": "https://newengland511.org/",
+    "id": "https://511.idaho.gov/",
+    "ut": "https://www.udottraffic.utah.gov/",
+
+Some kind of signature needed:
+    "fl": "https://fl511.com/",
--- a/layers/dot-cams/al/get_data.py
+++ b/layers/dot-cams/al/get_data.py
@ -7,18 +7,60 @@ cameras = []

 res = requests.get("https://api.algotraffic.com/v3.0/Cameras")
 res.raise_for_status()
+# {
+#     "id": 1164,
+#     "location": {
+#         "latitude": 30.56705,
+#         "longitude": -88.19211,
+#         "city": "Theodore",
+#         "county": "Mobile",
+#         "displayRouteDesignator": "I-10",
+#         "routeDesignator": "I-10",
+#         "routeDesignatorType": "Interstate",
+#         "displayCrossStreet": "Theodore Dawes Rd",
+#         "crossStreet": "Theodore Dawes Rd",
+#         "crossStreetType": "Arterial",
+#         "direction": "East",
+#         "linearReference": 14.0
+#     },
+#     "responsibleRegion": "Southwest",
+#     "hlsUrl": "https://cdn3.wowza.com/5/aTZuSEJVaHcxakdx/mobile-fastly/mob-cam-c090.stream/playlist.m3u8",
+#     "imageUrl": "https://api.algotraffic.com/v3/Cameras/1164/snapshot.jpg",
+#     "accessLevel": "Public"
+# }

 for c in res.json():
-    cameras.append({
-        "type": "Feature",
-        "geometry": {
-            "type": "Point",
-            "coordinates": [c['location']['longitude'], c['location']['latitude']], # yes, [lon, lat] since it's [x, y]
-        },
-        "properties": {
-            'originalData': c,
-        },
-    })
+    try:
+        if c['accessLevel'] != 'Public':
+            print("warn: access level is not public; ignoring:", c)
+            continue
+        if not c['hlsUrl'].startswith('https://'):
+            raise Exception("invalid hlsUrl")
+        if not c['imageUrl'].startswith('https://'):
+            raise Exception("invalid imageUrl")
+        cameras.append({
+            "type": "Feature",
+            "geometry": {
+                "type": "Point",
+                "coordinates": [c['location']['longitude'], c['location']['latitude']], # yes, [lon, lat] since it's [x, y]
+            },
+            "properties": {
+                "name": c['location']['displayRouteDesignator'] + '/' + c['location']['displayCrossStreet'],
+                "views": [
+                    {
+                        'hasVideo': True,
+                        'src': c['hlsUrl'],
+                    },
+                    # {
+                    #     'hasVideo': False,
+                    #     'src': c['imageUrl'],
+                    # }
+                ]
+            },
+        })
+    except Exception as e:
+        print(c)
+        raise e

 geojson = {
    "type": "FeatureCollection",
--- a/layers/dot-cams/al/layer.js
+++ b/layers/dot-cams/al/layer.js
@ -1,46 +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 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.hlsUrl;
-    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;
--- a/layers/dot-cams/castle-rock/get_data.py
+++ b/layers/dot-cams/castle-rock/get_data.py
@ -4,13 +4,21 @@ import requests
 import json
 import re

-with open('states.json') as f:
-    states = json.loads(f.read())
+states = {
+    "Minnesota": "https://511mn.org/",
+    "Colorado": "https://maps.cotrip.org/",
+    "Iowa": "https://511ia.org/",
+    "Indiana": "https://511in.org/",
+    "Kansas": "https://www.kandrive.gov/",
+    "Massachusetts": "https://mass511.com/",
+    "Nebraska": "https://new.511.nebraska.gov/"
+}

 with open("query.graphql") as f:
    QUERY = f.read()

 for state, baseURL in states.items():
+    print(f"{state}: ", end="", flush=True)
    PAYLOAD = [
        {
            "query": QUERY,
@ -38,6 +46,8 @@ for state, baseURL in states.items():
    cameras = []

    viewCount = 0
+    photoCount = 0
+    videoCount = 0

    for c in camera_views:
        if len(c['features']) != 1:
@ -47,22 +57,36 @@ for state, baseURL in states.items():
        if re.match(r"Show .* cameras", c['tooltip']):
            raise Exception(f"Not zoomed in enough! Finding aggregate cameras: {c}")

+        if len(c['views']) == 0:
+            raise Exception("Camera has no views")
+
        for view in c['views']:
-            if len(view['sources']) != 1 if view['category'] == 'VIDEO' else 0:
-                print(view)
-                raise Exception(f"Unexpected number of sources ({len(view['sources'])})")
+            if view['category'] != c['views'][0]['category']:
+                print(f"warn: Differing types detected: {c['views']}")
+            if view['category'] == 'VIDEO':
+                if state == "Nebraska":
+                    print(c)
+                videoCount += 1
+                if len(view['sources']) != 1:
+                    raise Exception(f"Unexpected number of sources ({len(view['sources'])})")
+            else:
+                photoCount += 1
            for source in view['sources'] or []:
                if source['type'] != 'application/x-mpegURL':
                    raise Exception(f"Unexpected type {source['type']}")

-        viewCount += len(c['views'])
        cameras.append({
            "type": "Feature",
            "geometry": c['features'][0]['geometry'],
            "properties": {
-                'address': c['tooltip'],
-                'website': c['views'][0]['url'],
-                'originalData': c,
+                'name': c['tooltip'],
+                'views': [
+                    {
+                        'hasVideo': v['category'] == 'VIDEO',
+                        'src': v['sources'][0]['src'] if v['category'] == 'VIDEO' else v['url'],
+                    } for v in c['views']
+                ],
+                # 'originalData': c,
            },
        })

@ -74,8 +98,8 @@ for state, baseURL in states.items():
    with open(f"data/{state}.geojson", "w") as f:
        f.write(json.dumps(geojson))

-    print(f"{len(cameras)} locations found for {state}")
-    print(f"{viewCount} total views for {state}")
+    print(f"{len(cameras)} locations found")
+    print(f"{state}: {photoCount} photo + {videoCount} video cameras")

 # hack hack hack
 #
--- a/layers/dot-cams/castle-rock/index.js
+++ b/layers/dot-cams/castle-rock/index.js
@ -1,75 +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 = {
-    mn: "Minnesota: MNDOT/511MN",
-    ia: "Iowa: Iowa DOT/511IA",
-    wi: "Wisconsin: WisDOT/511WI",
-    co: "Colorado: CDOT/COtrip",
-    ks: "Kansas: KDOT/KanDrive",
-    ne: "Nebraska: NDOT/Nebraska 511",
-    ma: "Massachusetts: MassDOT/Mass511",
-}
-
-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) {
-        const view = feature.values_.originalData.views[0];
-        if (view.category.toLowerCase() == "video") {
-            return `<video style="max-width: 80vw; max-height: 80vh;" id="popupVideo" autoplay controls></video>`;
-        } else if (view.category.toLowerCase() == "image") {
-            return `<img style="max-width: 80vw; max-height: 80vh;" src="${view.url}">`;
-        } else {
-            throw new Exception(`unknown category ${view.category}`);
-        }
-    };
-
-    vectorLayer.customPopupCallback = function(feature) {
-        const view = feature.values_.originalData.views[0];
-        if (view.category.toLowerCase() == "video") {
-            const video = document.getElementById('popupVideo');
-
-            const videoSrc = view.sources[0].src;
-            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;
--- a/layers/dot-cams/castle-rock/pin.svg
+++ b/layers/dot-cams/castle-rock/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>
--- a/layers/dot-cams/castle-rock/states.json
+++ b/layers/dot-cams/castle-rock/states.json
@ -1,9 +0,0 @@
-{
-    "mn": "https://511mn.org/",
-    "co": "https://maps.cotrip.org/",
-    "ia": "https://511ia.org/",
-    "in_": "https://511in.org/",
-    "ks": "https://www.kandrive.gov/",
-    "ma": "https://mass511.com/",
-    "ne": "https://new.511.nebraska.gov/"
-}
--- a/layers/dot-cams/index.js
+++ b/layers/dot-cams/index.js
@ -1,20 +1,80 @@
-import al from './al/layer.js';
-import wi from './travel-iq/index.js';
+import VectorLayer from 'ol/layer/Vector';
+import {Vector as VectorSource} from 'ol/source.js';
+import GeoJSON from 'ol/format/GeoJSON.js';

-import castlerocklayers from './castle-rock/index.js';
-import travelIqLayers from './travel-iq/index.js';
+import Hls from 'hls.js';

-const dot_cams = {
+import {Style} from 'ol/style.js';
+import Icon from 'ol/style/Icon.js';
+
+import pin from './pin.svg?url'; // TODO: remove `?url`?
+import pinVideo from './pin-video.svg?url'; // TODO: remove `?url`?
+
+import castleRockStates from './castle-rock/data/states.js';
+import travelIqStates from './travel-iq/data/states.js';
+import al from './al/data.geojson?url';
+
+import dot_names from './layer_names.js';
+
+const allStates = {
+    ...castleRockStates,
+    ...travelIqStates,
+    'Alabama': al,
+}
+console.log(allStates, castleRockStates, travelIqStates);
+let dot_cams = {
    name: "State DOT Cameras",
-    layers: [
-        ...castlerocklayers,
-        ...travelIqLayers,
-        {
-            name: "Alabama: ALDOT/ALGO",
-            layer: al,
-        },
-    ],
    details: `<a href="#" onclick="this.closest('details').querySelectorAll('ul li input').forEach(e => e.checked || e.click()); return false;">Enable All</a>`,
+    layers: [],
 };

+for (let [state, url] of Object.entries(allStates)) {
+    const vectorLayer = new VectorLayer({
+        source: new VectorSource({
+            url: url,
+            format: new GeoJSON,
+        }),
+        style: function(feature, resolution){
+            return new Style({
+                image: new Icon({
+                    anchor: [0.5, 1],
+                    src: feature.values_.views[0].hasVideo ? pinVideo : pin,
+                }),
+            });
+        },
+    });
+
+    vectorLayer.customPopup = function(feature) {
+        const view = feature.values_.views[0];
+        if (view.hasVideo) {
+            return `<p>${feature.values_.name}</p><video style="max-width: 80vw; max-height: 80vh;" id="popupVideo" autoplay controls></video>`;
+        } else {
+            return `<img style="max-width: 80vw; max-height: 80vh;" src="${view.src}">`;
+        }
+    };
+
+    vectorLayer.customPopupCallback = function(feature) {
+        const view = feature.values_.views[0];
+        if (view.hasVideo) {
+            const video = document.getElementById('popupVideo');
+
+            if (Hls.isSupported()) {
+                var hls = new Hls();
+                hls.loadSource(view.src);
+                hls.attachMedia(video);
+            }
+            // iDevice support, untested (only works in Safari; required for iPhones)
+            else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = view.src;
+            }
+        }
+    }
+    dot_cams.layers.push({
+        name: dot_names[state] ?? state,
+        layer: vectorLayer,
+    });
+}
+
+dot_cams.layers.sort((a, b) => a.name > b.name ? 1 : -1); // Names are always unique
+
 export default dot_cams;
--- a/layers/dot-cams/layer_names.js
+++ b/layers/dot-cams/layer_names.js
@ -0,0 +1,9 @@
+export default {
+    mn: "Minnesota: MNDOT/511MN",
+    ia: "Iowa: Iowa DOT/511IA",
+    wi: "Wisconsin: WisDOT/511WI",
+    co: "Colorado: CDOT/COtrip",
+    ks: "Kansas: KDOT/KanDrive",
+    ne: "Nebraska: NDOT/Nebraska 511",
+    ma: "Massachusetts: MassDOT/Mass511",
+};
--- a/layers/dot-cams/pin-video.svg
+++ b/layers/dot-cams/pin-video.svg
@ -0,0 +1,15 @@
+<?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;" />
+  <path transform="scale(15), translate(5, 5)" style="fill:#fff;" fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2z"/>
+</svg>
--- a/layers/dot-cams/al/pin.svg
+++ b/layers/dot-cams/al/pin.svg
--- a/layers/dot-cams/travel-iq/get_data.py
+++ b/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
--- a/layers/dot-cams/travel-iq/index.js
+++ b/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;
--- a/layers/dot-cams/travel-iq/pin.svg
+++ b/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>
--- a/layers/dot-cams/travel-iq/states.json
+++ b/layers/dot-cams/travel-iq/states.json
@ -1,3 +0,0 @@
-{
-    "wi": "https://511wi.gov/"
-}