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 ``; }; 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;