maps.chandlerswift.com/layers/dot-cams/mn/layer.js

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 videoID = view.url.split('/').pop();

        const videoSrc = `https://video.dot.state.mn.us/public/${videoID}.stream/playlist.m3u8`;
        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;