fix centering of numbers on map markers, fix recenter after first drag

src/views/DiscoverView.vue

@@ -121,10 +121,9 @@
       <div class="mt-4 h-96 w-5/6 mx-auto">
         <l-map
           ref="projectMap"
-          :center="[localCenterLat, localCenterLong]"
-          :zoom="2"
           @ready="onMapReady"
           @moveend="onMoveEnd"
+          @movestart="onMoveStart"
           @zoomend="onZoomEnd"
           @zoomstart="onZoomStart"
         >
@@ -498,12 +497,18 @@ export default class DiscoverView extends Vue {
   }
 
   async onMapReady(map: L.Map) {
+    // doing this here instead of the l-map element avoids a recentering after the first drag
+    map.setView([this.localCenterLat, this.localCenterLong], 2);
     this.requestTiles(map);
   }
 
   // Tried but failed to use other vue-leaflet methods update:zoom and update:bounds
   // To access the from this.$refs, use this.$refs.projectMap.mapObject
 
+  onMoveStart(/* event: L.LocationEvent */) {
+    // don't remove markers because they follow the map when moving (and the experience is jarring)
+  }
+
   async onMoveEnd(event: L.LocationEvent) {
     if (this.zoomedSoDoNotMove) {
       // since a zoom triggers a moveend, too, don't duplicate a tile request
@@ -514,12 +519,16 @@ export default class DiscoverView extends Vue {
     }
   }
 
-  async onZoomEnd(event: L.LocationEvent) {
-    await this.requestTiles(event.target);
+  onZoomStart(/* event: L.LocationEvent */) {
+    // remove markers because otherwise they jump around at zoom end
+    Object.values(this.markers).forEach((marker) => marker.remove());
+    this.markers = {};
+
+    this.zoomedSoDoNotMove = true;
   }
 
-  onZoomStart(/* event: L.LocationEvent */) {
-    this.zoomedSoDoNotMove = true;
+  async onZoomEnd(event: L.LocationEvent) {
+    await this.requestTiles(event.target);
   }
 
   async requestTiles(targetMap: L.Map) {
@@ -535,10 +544,10 @@ export default class DiscoverView extends Vue {
         this.apiServer + "/api/v2/report/planCountsByBBox?" + queryParams,
       );
       if (response.status === 200) {
+        Object.values(this.markers).forEach((marker) => marker.remove());
+        this.markers = {};
         const results = await response.json();
         if (results.data?.tiles?.length > 0) {
-          Object.values(this.markers).forEach((marker) => marker.remove());
-          this.markers = {};
           for (const tile of results.data.tiles) {
             const pinLat = (tile.minFoundLat + tile.maxFoundLat) / 2;
             const pinLon = (tile.minFoundLon + tile.maxFoundLon) / 2;
@@ -560,9 +569,7 @@ export default class DiscoverView extends Vue {
               };
               this.searchLocal();
             });
-            this.markers[
-              "" + tile.indexLat + "X" + tile.indexLon + "*" + tile.recordCount
-            ] = marker;
+            this.markers["" + tile.indexLat + "X" + tile.indexLon] = marker;
           }
         }
         await this.searchLocal();
@@ -664,6 +671,7 @@ export default class DiscoverView extends Vue {
   display: flex;
   align-items: center;
   justify-content: center;
+  text-align: center;
   font-size: 14px;
   font-weight: bold;
   color: white;