Don't crash page if chandler layer can't load

layers/chandler/layer.js

@@ -5,24 +5,15 @@ import {Style} from 'ol/style.js';
 import Icon from 'ol/style/Icon.js';
 
 import pinURL from '/layers/chandler/pin.svg?url'; // TODO: remove `?url`?
-import { Feature } from 'ol';
+import { Collection, Feature } from 'ol';
 import { Point } from 'ol/geom';
 import { fromLonLat } from 'ol/proj';
 
-const res = await fetch("https://whereis.chandlerswift.com/api/0/last");
+let features = new Collection();
-const locs = await res.json();
-const loc = locs[0];
-
-let feature = new Feature({
-    geometry: new Point(fromLonLat([loc.lon, loc.lat])),
-    ...loc
-});
 
 const vectorLayer = new VectorLayer({
     source: new VectorSource({
-        features: [
+        features,
-            feature,
-        ]
     }),
     style: new Style({
         image: new Icon({
@@ -32,12 +23,23 @@ const vectorLayer = new VectorLayer({
     }),
 });
 
-setInterval(async function(){
+async function refresh(){
     const res = await fetch("https://whereis.chandlerswift.com/api/0/last");
     const locs = await res.json();
     const loc = locs[0];
-    feature.setProperties(loc); // TODO: this won't remove a property if it was in a previous response but not this one
+    // TODO: I could probably just `features[0] = …` but I'm not sure if that causes problems with re-rendering features
-    feature.getGeometry().setCoordinates(fromLonLat([loc.lon, loc.lat]));
+    if (features.getLength() == 0) {
-}, 10 * 1000);
+        features.push(new Feature({
+            geometry: new Point(fromLonLat([loc.lon, loc.lat])),
+            ...loc
+        }));
+    } else {
+        features.item(0).setProperties(loc); // TODO: this won't remove a property if it was in a previous response but not this one
+        features.item(0).getGeometry().setCoordinates(fromLonLat([loc.lon, loc.lat]));
+    }
+}
+
+refresh();
+setInterval(refresh, 10 * 1000);
 
 export default vectorLayer;