chandlerswift
/
maps.chandlerswift.com
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Consolidate/add castle-rock derived cameras

main
Chandler Swift 2024-01-30 00:14:55 -06:00
parent 30b7ca198a
commit c6e80cf9ad
Signed by: chandlerswift
GPG Key ID: A851D929D52FB93F
14 changed files with 196 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@ node_modules
dist
*.geojson
*.shp
layers/dot-cams/castle-rock/data/states.js

15
layers/dot-cams/README.md 100644
View File

@ -0,0 +1,15 @@
https://traveler.modot.org/map/
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
# CA
kern maybe same as WI?
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

94
layers/dot-cams/castle-rock/get_data.py 100755
View File

@ -0,0 +1,94 @@
#!/usr/bin/env python3
import requests
import json
import re
with open('states.json') as f:
states = json.loads(f.read())
with open("query.graphql") as f:
QUERY = f.read()
data = {}
for state, baseURL in states.items():
PAYLOAD = [
{
"query": QUERY,
"variables": {
"input": {
# Cover the whole state (this is pretty overkill, admittedly)
"north":90,
"south":0,
"east":0,
"west":-179,
"zoom":12,
"layerSlugs": ["normalCameras"],
"nonClusterableUris": ["dashboard"],
},
"plowType":"plowCameras",
},
},
]
res = requests.post(f'{baseURL}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 .* cameras", c['tooltip']):
raise Exception(f"Not zoomed in enough! Finding aggregate cameras: {c}")
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'])})")
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,
},
})
geojson = {
"type": "FeatureCollection",
"features": cameras,
}
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}")
# hack hack hack
#
# If I write this to one big file, I can't take advantage of any lazy loading
# for performance reasons, so I'm constrained to having a bunch of files. I
# can't programmatically import those, since es6 imports don't allow for that.
# So, codegen it is (and fairly gross codegen at that!).
with open('data/states.js', 'w') as f:
for state in states:
f.write(f"import {state} from './{state}.geojson?url';\n")
f.write('\nexport default {\n')
for state in states:
f.write(f" {state}: {state},\n")
f.write("};\n")

75
layers/dot-cams/castle-rock/index.js 100644
View File

@ -0,0 +1,75 @@
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;

0
layers/dot-cams/ia/pin.svg → layers/dot-cams/castle-rock/pin.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

0
layers/dot-cams/ia/query.graphql → layers/dot-cams/castle-rock/query.graphql
View File

8
layers/dot-cams/castle-rock/states.json 100644
View File

@ -0,0 +1,8 @@
{
"mn": "https://511mn.org/",
"co": "https://maps.cotrip.org/",
"ia": "https://511ia.org/",
"ks": "https://www.kandrive.gov/",
"ma": "https://mass511.com/",
"ne": "https://new.511.nebraska.gov/"
}

74
layers/dot-cams/ia/get_data.py
View File

@ -1,74 +0,0 @@
#!/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":45.2,
"south":38.2,
"east":-82.9,
"west":-98.3,
"zoom":11,
"layerSlugs": ["normalCameras"],
"nonClusterableUris": ["dashboard"]
},
"plowType":"plowCameras",
}
}
]
res = requests.post('https://511ia.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 .* cameras", c['tooltip']):
raise Exception(f"Not zoomed in enough! Finding aggregate cameras: {c}")
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'])})")
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,
},
})
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")

55
layers/dot-cams/ia/layer.js
View File

@ -1,55 +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) {
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;
}
}
}
export default vectorLayer;

13
layers/dot-cams/index.js
View File

@ -1,22 +1,15 @@
import mn from './mn/layer.js';
import wi from './wi/layer.js';
import ia from './ia/layer.js';
import castlerocklayers from './castle-rock/index.js';
const dot_cams = {
name: "State DOT Cameras",
layers: [
{
name: "MNDOT/511MN",
layer: mn,
},
...castlerocklayers,
{
name: "WisDOT/511WI",
layer: wi,
},
{
name: "Iowa DOT/511IA",
layer: ia,
},
],
details: `<a href="#" onclick="this.closest('details').querySelectorAll('ul li input').forEach(e => e.checked || e.click()); return false;">Enable All</a>`,
};

74
layers/dot-cams/mn/get_data.py
View File

@ -1,74 +0,0 @@
#!/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 .* cameras", c['tooltip']):
raise Exception(f"Not zoomed in enough! Finding aggregate cameras: {c}")
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'])})")
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,
},
})
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")

55
layers/dot-cams/mn/layer.js
View File

@ -1,55 +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) {
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;
}
}
}
export default vectorLayer;

21
layers/dot-cams/mn/pin.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

45
layers/dot-cams/mn/query.graphql
View File

@ -1,45 +0,0 @@
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
sources {
type
src
}
title
}
category
}
}
... on Plow {
views(limit: 5, plowType: $plowType) {
uri
... on PlowCameraView {
url
}
category
}
}
}
error {
message
type
}
}
}