Remove initial animation from standard flow

script/components/map/map.js

@@ -186,18 +186,27 @@ class MapWrapper {
     // only updates concerning these keys will be sent to the update() method
     this.#observedKeys = {
       // cities
-      cityMarkers: ["isHome", "isDestination"],
+      cityMarkers: ["isHome"],
       cityMenus: ["isDestination"],
       citySourceData: ["rank"], // slow to update
       cityFeatureState: ["circleVisible", "circleColor", "isDestination"],
       // edges
       edgeFeatureState: ["visible", "active", "color", "leg", "journey"],
     };
 
-    // apply initial state (setToDefaults generates the necessary diffs)
-    this.#updateCities(this.#states.cities.setToDefaults());
-    this.#updateEdges(this.#states.edges.setToDefaults());
+    const initialCityDiffs = this.#states.cities.setToDefaults();
+    const initialEdgeDiffs = this.#states.edges.setToDefaults();
 
+    this.#showStartAnimation(cities.geo, initialCityDiffs, (pulsars) => {
+      // when animation is done, do proper initial render
+      this.#updateCities(initialCityDiffs);
+      this.#updateEdges(initialEdgeDiffs);
+
+      this.#setupEventHandlers(pulsars);
+    });
+  }
+
+  #setupEventHandlers(pulsars) {
     // initialise mouse event helper for cities and edge layers
     const cityLayers = ["city-name", "city-circle"];
     const layerMouseEvents = {
@@ -276,6 +285,35 @@ class MapWrapper {
     });
   }
 
+  #showStartAnimation(geo, cityDiffs, animationDoneCallback) {
+    const homeMarkers = cityDiffs
+      .filter((d) => d.key === "isHome" && d.newValue)
+      .map((d) => initHomeMarker(geo[d.id].lngLat));
+
+    const destinationMarkers = cityDiffs
+      .filter((d) => d.key === "isDestination" && d.newValue)
+      .map((d) => initDestinationMarker(geo[d.id].lngLat));
+
+    //this is the second animation we'll do (show destination markers dropping)
+    const animateDestinations = () =>
+      animateDropWithBounce(
+        this.map,
+        destinationMarkers,
+        200,
+        3,
+        animationDoneCallback, // when animation is done callback to main
+      );
+
+    // run the first animation (show home marker(s) dropping)
+    animateDropWithBounce(
+      this.map,
+      homeMarkers,
+      300,
+      3,
+      animateDestinations, // when that is done do the second animation
+    );
+  }
+
   on(eventName, callback) {
     this.#callbacks[eventName] = callback;
   }
@@ -293,11 +331,6 @@ class MapWrapper {
     this.#mapping = {
       edges: edges.mapping,
     };
-
-    if (this.#firstUpdate) {
-      this.#objects.cityMarkers.addToMapWithAnimation(this.map);
-      this.#firstUpdate = false;
-    }
   }
 
   #updateCities(cityDiffs) {

script/components/map/mapObjects.js

@@ -1,44 +1,35 @@
+function initHomeMarker(lngLat) {
+  const marker = new maplibregl.Marker({
+    element: createElementFromTemplate("template-city-marker-home"),
+    anchor: "bottom",
+  });
+  marker.setLngLat(lngLat);
+  return marker;
+}
+
+function initDestinationMarker(lngLat) {
+  const marker = new maplibregl.Marker({
+    element: createElementFromTemplate("template-city-marker-destination"),
+    anchor: "bottom",
+  });
+  marker.setLngLat(lngLat);
+  return marker;
+}
+
 class CityMarker {
-  #lngLat;
   marker; // the actual maplibre marker object
-  icon;
 
   constructor(lngLat) {
-    this.#lngLat = lngLat;
+    this.marker = initHomeMarker(lngLat);
   }
 
   update(diff) {
-    if (diff.key === "isHome" && diff.kind === "added" && diff.newValue)
-      this.#initHome();
-
-    if (diff.key === "isDestination" && diff.kind === "added" && diff.newValue)
-      this.#initDestination();
-  }
-
-  #initHome() {
-    this.icon = "home";
-
-    this.marker = new maplibregl.Marker({
-      element: createElementFromTemplate("template-city-marker-home"),
-      anchor: "bottom",
-    });
-    this.marker.setLngLat(this.#lngLat);
-  }
-
-  #initDestination() {
-    this.icon = "destination";
-
-    this.marker = new maplibregl.Marker({
-      element: createElementFromTemplate("template-city-marker-destination"),
-      anchor: "bottom",
-    });
-    this.marker.setLngLat(this.#lngLat);
+    // nothing to update
   }
 }
 
 class CityMarkerCollection {
   markers = {};
-  added = [];
 
   constructor(cities) {
     for (let id in cities) {
@@ -50,49 +41,21 @@ class CityMarkerCollection {
     for (let diff of diffs) {
       this.markers[diff.id].update(diff);
 
-      if (diff.kind === "added") {
-        this.added.push(diff.id); // not directly adding to map here
-      }
+      if (diff.kind === "added" && diff.newValue)
+        this.markers[diff.id].marker.addTo(map);
 
-      // todo why are these firing in initial update?
-      // if (diff.kind === "removed") this.markers[diff.id].marker.remove();
+      // todo why are getting remove events at the begging of map rendering?
+      if (diff.kind === "removed") this.markers[diff.id].marker.remove();
     }
   }
 
-  addToMapWithAnimation(map) {
-    const markers = this.added.map((id) => this.markers[id]);
-
-    const animateDestinations = () =>
-      animateDropWithBounce(
-        map,
-        markers.filter((m) => m.icon === "destination").map((m) => m.marker),
-        200,
-        3,
-      );
-
-    // animate all markers with a home icon
-    animateDropWithBounce(
-      map,
-      markers.filter((m) => m.icon === "home").map((m) => m.marker),
-      300,
-      3,
-      animateDestinations, // when that is done animate all with a destination marker
-    );
-  }
-
   setPopups(popups) {
     for (let id in this.markers) {
       // todo this has too much knowledge of the other object
       if (this.markers[id].marker)
         this.markers[id].marker.setPopup(popups.popups[id].popup);
     }
   }
-
-  removeDestinations() {
-    for (let id in this.markers)
-      if (this.markers[id].icon === "destination")
-        this.markers[id].marker.remove();
-  }
 }
 
 class CityMenu {