diff --git a/layers/chains/culvers/layer.js b/layers/chains/culvers/layer.js index af140b4..8ee7e58 100644 --- a/layers/chains/culvers/layer.js +++ b/layers/chains/culvers/layer.js @@ -2,6 +2,8 @@ import VectorLayer from 'ol/layer/Vector'; import {Vector as VectorSource} from 'ol/source.js'; import GeoJSON from 'ol/format/GeoJSON.js'; +import { toLonLat } from 'ol/proj'; + import {Style} from 'ol/style.js'; import Icon from 'ol/style/Icon.js'; @@ -21,4 +23,23 @@ const vectorLayer = new VectorLayer({ }), }); +vectorLayer.customPopupCallback = async function(feature) { + const fotd_parent = document.createElement('div'); + fotd_parent.innerHTML = "Flavor of the Day: "; + document.querySelector('#popup-content').append(fotd_parent); + + const fotd_child = document.createElement('span'); + fotd_child.innerHTML = "Loading…"; + + const fotd_image = document.createElement('img') + fotd_parent.append(fotd_child, fotd_image); + + const [long, lat] = toLonLat(feature.getGeometry().getCoordinates()); + const res = await fetch(`https://corsproxy.io/?${encodeURIComponent(`https://www.culvers.com/api/restaurants/getLocations?lat=${lat}&long=${long}&limit=1`)}`) + const res_data = await res.json(); + fotd_child.innerHTML = res_data.data.geofences[0].metadata.flavorOfDayName; + fotd_image.src = `https://cdn.culvers.com/menu-item-detail/${res_data.data.geofences[0].metadata.flavorOfDaySlug}`; + fotd_image.style.width = "min(300px, 60vh)"; +} + export default vectorLayer;