Add properties to Chandler's location

layers/chandler/layer.js

@@ -13,14 +13,15 @@ const res = await fetch("https://whereis.chandlerswift.com/api/0/last");
 const locs = await res.json();
 const loc = locs[0];
 
-let geometry = new Point(fromLonLat([loc.lon, loc.lat]));
+let feature = new Feature({
+    geometry: new Point(fromLonLat([loc.lon, loc.lat])),
+    ...loc
+});
 
 const vectorLayer = new VectorLayer({
     source: new VectorSource({
         features: [
-            new Feature({
+            feature,
-                geometry: geometry,
-            })
         ]
     }),
     style: new Style({
@@ -35,7 +36,8 @@ setInterval(async function(){
     const res = await fetch("https://whereis.chandlerswift.com/api/0/last");
     const locs = await res.json();
     const loc = locs[0];
-    geometry.setCoordinates(fromLonLat([loc.lon, loc.lat]));
+    feature.setProperties(loc); // TODO: this won't remove a property if it was in a previous response but not this one
+    feature.getGeometry().setCoordinates(fromLonLat([loc.lon, loc.lat]));
 }, 10 * 1000);
 
 export default vectorLayer;

layers/dot-cams/index.js

@@ -20,8 +20,8 @@ const allStates = {
     ...castleRockStates,
     ...travelIqStates,
     'Alabama': al,
-}
+};
-console.log(allStates, castleRockStates, travelIqStates);
+
 let dot_cams = {
     name: "State DOT Cameras",
     details: `<a href="#" onclick="this.closest('details').querySelectorAll('ul li input').forEach(e => e.checked || e.click()); return false;">Enable All</a>`,
@@ -38,23 +38,23 @@ for (let [state, url] of Object.entries(allStates)) {
             return new Style({
                 image: new Icon({
                     anchor: [0.5, 1],
-                    src: feature.values_.views[0].hasVideo ? pinVideo : pin,
+                    src: feature.getProperties().views[0].hasVideo ? pinVideo : pin,
                 }),
             });
         },
     });
 
     vectorLayer.customPopup = function(feature) {
-        const view = feature.values_.views[0];
+        const view = feature.getProperties().views[0];
         if (view.hasVideo) {
-            return `<p>${feature.values_.name}</p><video style="max-width: 80vw; max-height: 80vh;" id="popupVideo" autoplay controls></video>`;
+            return `<p>${feature.getProperties().name}</p><video style="max-width: 80vw; max-height: 80vh;" id="popupVideo" autoplay controls></video>`;
         } else {
             return `<img style="max-width: 80vw; max-height: 80vh;" src="${view.src}">`;
         }
     };
 
     vectorLayer.customPopupCallback = function(feature) {
-        const view = feature.values_.views[0];
+        const view = feature.getProperties().views[0];
         if (view.hasVideo) {
             const video = document.getElementById('popupVideo');
 

main.js

@@ -141,7 +141,7 @@ map.on('click', function (evt) {
     }
   } else {
     // exclude geometry -- https://stackoverflow.com/a/208106
-    const {geometry: _, ...featureData} = feature.values_;
+    const {geometry: _, ...featureData} = feature.getProperties();
 
     content.innerHTML = objectToTable(featureData);
   }
@@ -150,3 +150,5 @@ map.on('click', function (evt) {
 });
 
 new ResizeObserver(() => map.updateSize()).observe(document.getElementById("map"));
+
+window.map = map;