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
This commit is contained in:
parent
710930f428
commit
dbcd151364
GPG key ID:
A851D929D52FB93F
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -2,4 +2,4 @@ node_modules
|
||||||
dist
|
dist
|
||||||
*.geojson
|
*.geojson
|
||||||
*.shp
|
*.shp
|
||||||
layers/dot-cams/castle-rock/data/states.js
|
layers/dot-cams/*/data/states.js
|
||||||
|
|
|
||||||
|
|
@ -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://map.wyoroad.info/wtimap/index.html
|
||||||
|
|
||||||
https://www.sd511.org/#&zoom=6.396744103345674&lon=-96.21250629888505&lat=44.0011361134118&states
|
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.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
|
# CA
|
||||||
kern maybe same as WI?
|
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
|
https://dot.ca.gov/programs/traffic-operations/traveler-information/511
|
||||||
|
|
||||||
"rr": "https://riverregion511.org" castlerock
|
"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/",
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,37 @@ cameras = []
|
||||||
|
|
||||||
res = requests.get("https://api.algotraffic.com/v3.0/Cameras")
|
res = requests.get("https://api.algotraffic.com/v3.0/Cameras")
|
||||||
res.raise_for_status()
|
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():
|
for c in res.json():
|
||||||
|
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({
|
cameras.append({
|
||||||
"type": "Feature",
|
"type": "Feature",
|
||||||
"geometry": {
|
"geometry": {
|
||||||
|
|
@ -16,9 +45,22 @@ for c in res.json():
|
||||||
"coordinates": [c['location']['longitude'], c['location']['latitude']], # yes, [lon, lat] since it's [x, y]
|
"coordinates": [c['location']['longitude'], c['location']['latitude']], # yes, [lon, lat] since it's [x, y]
|
||||||
},
|
},
|
||||||
"properties": {
|
"properties": {
|
||||||
'originalData': c,
|
"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 = {
|
geojson = {
|
||||||
"type": "FeatureCollection",
|
"type": "FeatureCollection",
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -4,13 +4,21 @@ import requests
|
||||||
import json
|
import json
|
||||||
import re
|
import re
|
||||||
|
|
||||||
with open('states.json') as f:
|
states = {
|
||||||
states = json.loads(f.read())
|
"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:
|
with open("query.graphql") as f:
|
||||||
QUERY = f.read()
|
QUERY = f.read()
|
||||||
|
|
||||||
for state, baseURL in states.items():
|
for state, baseURL in states.items():
|
||||||
|
print(f"{state}: ", end="", flush=True)
|
||||||
PAYLOAD = [
|
PAYLOAD = [
|
||||||
{
|
{
|
||||||
"query": QUERY,
|
"query": QUERY,
|
||||||
|
|
@ -38,6 +46,8 @@ for state, baseURL in states.items():
|
||||||
cameras = []
|
cameras = []
|
||||||
|
|
||||||
viewCount = 0
|
viewCount = 0
|
||||||
|
photoCount = 0
|
||||||
|
videoCount = 0
|
||||||
|
|
||||||
for c in camera_views:
|
for c in camera_views:
|
||||||
if len(c['features']) != 1:
|
if len(c['features']) != 1:
|
||||||
|
|
@ -47,22 +57,36 @@ for state, baseURL in states.items():
|
||||||
if re.match(r"Show .* cameras", c['tooltip']):
|
if re.match(r"Show .* cameras", c['tooltip']):
|
||||||
raise Exception(f"Not zoomed in enough! Finding aggregate cameras: {c}")
|
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']:
|
for view in c['views']:
|
||||||
if len(view['sources']) != 1 if view['category'] == 'VIDEO' else 0:
|
if view['category'] != c['views'][0]['category']:
|
||||||
print(view)
|
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'])})")
|
raise Exception(f"Unexpected number of sources ({len(view['sources'])})")
|
||||||
|
else:
|
||||||
|
photoCount += 1
|
||||||
for source in view['sources'] or []:
|
for source in view['sources'] or []:
|
||||||
if source['type'] != 'application/x-mpegURL':
|
if source['type'] != 'application/x-mpegURL':
|
||||||
raise Exception(f"Unexpected type {source['type']}")
|
raise Exception(f"Unexpected type {source['type']}")
|
||||||
|
|
||||||
viewCount += len(c['views'])
|
|
||||||
cameras.append({
|
cameras.append({
|
||||||
"type": "Feature",
|
"type": "Feature",
|
||||||
"geometry": c['features'][0]['geometry'],
|
"geometry": c['features'][0]['geometry'],
|
||||||
"properties": {
|
"properties": {
|
||||||
'address': c['tooltip'],
|
'name': c['tooltip'],
|
||||||
'website': c['views'][0]['url'],
|
'views': [
|
||||||
'originalData': c,
|
{
|
||||||
|
'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:
|
with open(f"data/{state}.geojson", "w") as f:
|
||||||
f.write(json.dumps(geojson))
|
f.write(json.dumps(geojson))
|
||||||
|
|
||||||
print(f"{len(cameras)} locations found for {state}")
|
print(f"{len(cameras)} locations found")
|
||||||
print(f"{viewCount} total views for {state}")
|
print(f"{state}: {photoCount} photo + {videoCount} video cameras")
|
||||||
|
|
||||||
# hack hack hack
|
# hack hack hack
|
||||||
#
|
#
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -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/"
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +1,80 @@
|
||||||
import al from './al/layer.js';
|
import VectorLayer from 'ol/layer/Vector';
|
||||||
import wi from './travel-iq/index.js';
|
import {Vector as VectorSource} from 'ol/source.js';
|
||||||
|
import GeoJSON from 'ol/format/GeoJSON.js';
|
||||||
|
|
||||||
import castlerocklayers from './castle-rock/index.js';
|
import Hls from 'hls.js';
|
||||||
import travelIqLayers from './travel-iq/index.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",
|
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>`,
|
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;
|
export default dot_cams;
|
||||||
|
|
|
||||||
9
layers/dot-cams/layer_names.js
Normal file
9
layers/dot-cams/layer_names.js
Normal file
|
|
@ -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",
|
||||||
|
};
|
||||||
15
layers/dot-cams/pin-video.svg
Normal file
15
layers/dot-cams/pin-video.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 939 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
|
@ -3,8 +3,13 @@
|
||||||
import requests
|
import requests
|
||||||
import json
|
import json
|
||||||
|
|
||||||
with open('states.json') as f:
|
states = {
|
||||||
states = json.loads(f.read())
|
"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():
|
for state, baseURL in states.items():
|
||||||
query={
|
query={
|
||||||
|
|
@ -60,9 +65,11 @@ for state, baseURL in states.items():
|
||||||
"coordinates": [c['longitude'], c['latitude']], # yes, [lon, lat] since it's [x, y]
|
"coordinates": [c['longitude'], c['latitude']], # yes, [lon, lat] since it's [x, y]
|
||||||
},
|
},
|
||||||
"properties": {
|
"properties": {
|
||||||
'address': c['displayName'],
|
'name': c['displayName'],
|
||||||
'website': c['videoUrl'],
|
'views': [{
|
||||||
'originalData': c,
|
'hasVideo': c['videoUrl'],
|
||||||
|
'src': c['videoUrl'][0] if isinstance(c['videoUrl'], list) else c['videoUrl'], # LA returns multiple (identical?) streams
|
||||||
|
}],
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
query['start'] += 100
|
query['start'] += 100
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,3 +0,0 @@
|
||||||
{
|
|
||||||
"wi": "https://511wi.gov/"
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue