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
16 changed files with 324 additions and 276 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 |
Loading…
Add table
Add a link
Reference in a new issue