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 ``; } else if (view.category.toLowerCase() == "image") { return ``; } 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;