Avoid double api call on load map

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

ocg-server/static/js/community/explore/map.js

@@ -2,14 +2,12 @@ import { fetchData } from "./explore.js";
 
 export class Map {
   // Initialize map.
-  constructor(entity) {
+  constructor(entity, data) {
     // Check if map is already initialized
     if (Map._instance) {
-      // Invalidate map size to fix the map container
-      Map._instance.map.invalidateSize();
-
       Map._instance.entity = entity;
-      Map._instance.setup();
+      Map._instance.enabledMoveEnd = false;
+      Map._instance.setup(data);
       return Map._instance;
     }
 
@@ -20,18 +18,19 @@ export class Map {
     document.getElementsByTagName("head")[0].appendChild(script);
 
     this.entity = entity;
+    this.enabledMoveEnd = false;
 
     // Setup map after script is loaded
     script.onload = () => {
-      this.setup();
+      this.setup(data);
     };
 
     // Save map instance
     Map._instance = this;
   }
 
   // Setup map instance.
-  setup() {
+  setup(data) {
     this.map = L.map("map-box", {
       maxZoom: 20,
       minZoom: 3,
@@ -50,11 +49,14 @@ export class Map {
 
     // Load events after the map is loaded
     this.map.on("load", () => {
-      this.refresh(true);
+      this.refresh(true, data);
     });
 
+    // Remove map on unload, invalidating the size and removing event listeners
     this.map.on("unload", () => {
-      this.layerGroup.clearLayers();
+      this.map.invalidateSize();
+      this.map.off();
+      this.map.remove();
     });
 
     // Setting the position of the map: lat/long and zoom level
@@ -78,15 +80,30 @@ export class Map {
     // Adding a listener to the map after setting the position to get the bounds
     // when the map is moved (zoom or pan)
     this.map.on("moveend", () => {
-      this.refresh();
+      if (this.enabledMoveEnd) {
+        this.refresh();
+      }
+      this.enabledMoveEnd = true;
+    });
+
+    this.map.on("viewreset", () => {
+      console.log("View reset");
     });
   }
 
   // Refresh map, updating the markers.
-  async refresh(overwriteBounds) {
-    const data = await this.fetchData(overwriteBounds);
+  async refresh(overwriteBounds = false, currentData = null) {
+    let data;
+    if (currentData) {
+      data = currentData;
+    } else {
+      data = await this.fetchData(overwriteBounds);
+    }
 
-    fixMapBoxClasses();
+    // Clear previous markers for the layer group
+    if (this.map.hasLayer(this.layerGroup)) {
+      this.layerGroup.clearLayers();
+    }
 
     if (data) {
       // Get items from data
@@ -117,10 +134,6 @@ export class Map {
     params.delete("view_mode");
     params.delete("kind", "virtual");
 
-    // Add limit and offset
-    params.append("limit", 100);
-    params.append("offset", 0);
-
     if (overwriteBounds) {
       // Get bbox to overwrite bounds on first load
       params.append("include_bbox", true);
@@ -158,11 +171,6 @@ export class Map {
       popupAnchor: [0, -25],
     };
 
-    // Clear previous markers for the layer group
-    if (this.map.hasLayer(this.layerGroup)) {
-      this.layerGroup.clearLayers();
-    }
-
     // Add markers
     items.forEach((item) => {
       // Skip items without coordinates
@@ -200,15 +208,3 @@ export class Map {
     });
   }
 }
-
-// Fix map box classes (issue to refresh map on filters changes).
-const fixMapBoxClasses = () => {
-  const mapBox = document.getElementById("map-box");
-  if (mapBox && !mapBox.classList.contains("leaflet-container")) {
-    const classes =
-      "leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom".split(
-        " ",
-      );
-    mapBox.classList.add(...classes);
-  }
-};

ocg-server/templates/community/base.html

@@ -28,14 +28,14 @@
             integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq"
             crossorigin="anonymous"></script>
 
+    {# djlint:off #}
     <script type="text/javascript">
       // Tailwind CSS configuration
-      const palette = JSON.parse('{{ community.theme.palette|json|safe }}');
       tailwind.config = {
         theme: {
           extend: {
             colors: {
-              primary: palette,
+              primary: {{ community.theme.palette|json|safe }},
             },
             fontSize: {
               filterTitle: '0.8rem',
@@ -48,7 +48,8 @@
           },
         },
       };
-    </script>
+</script>
+    {# djlint:on #}
   </head>
   <body class="h-full {% block bg_color %} bg-white {% endblock bg_color %}">
     <div class="min-h-full flex flex-col">

ocg-server/templates/community/explore/events/results.html

@@ -83,17 +83,21 @@
 {# Map view -#}
 <div class="mt-5 border-t border-gray-100 md:mt-7 p-5 md:p-7">
   <div class="relative w-full border h-[600px] md:h-[820px] overflow-hidden">
-    <div id="map-box" class="w-full h-full"></div>
+    <div id="map-box"
+         class="relative w-full h-full leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom">
+    </div>
   </div>
 </div>
 
+{# djlint:off #}
 <script type="module">
   import {
     Map
   } from '/static/js/community/explore/map.js';
 
-  const map = new Map('events');
+  const map = new Map('events', { events: {{ events|json|safe }}, bbox: {{ bbox|json|safe }} });
 </script>
+{# djlint:on #}
 {# End map view -#}
 
 {% endmatch %}

ocg-server/templates/community/explore/groups/results.html

@@ -35,17 +35,21 @@
 {# Map view -#}
 <div class="mt-5 border-t border-gray-100 md:mt-7 p-5 md:p-7">
   <div class="relative w-full border h-[600px] md:h-[820px] overflow-hidden">
-    <div id="map-box" class="relative w-full h-full"></div>
+    <div id="map-box"
+         class="relative w-full h-full leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom">
+    </div>
   </div>
 </div>
 
+{# djlint:off #}
 <script type="module">
   import {
     Map
   } from '/static/js/community/explore/map.js';
 
-  const map = new Map('groups');
+  const map = new Map('groups', { groups: {{ groups|json|safe }}, bbox: {{ bbox|json|safe }} });
 </script>
+{# djlint:on #}
 {# End map view -#}
 
 {% when _ %}