Sidebar Tree Map

{
  // From the map viewport
  bbox: "swLng,swLat,neLng,neLat",
  zoom: 13,

  // From MejikDataMap UI
  search: "searchTerm",
  page: 1,
  per_page: 100,

  // From the sidebar tree
  filters: {
    categoryId: 123 // The key is determined by the `filterKey` prop
  }
}

<!-- MyAdvancedGISPage.vue -->
<template>
  <div class="container-fluid mt-4">
    <SidebarTreeMap
      sidebar-title="Device Groups"
      content-title="Live Map for:"
      nodes-url="/api/device-groups/tree"
      filter-key="groupId"

      :loader="loadMapData"
      :geo-json-features="features"
      :total-rows="total"
      :is-loading="isLoading"

      <!-- Pass-through props for MejikDataMap/LeafletMap -->
      :selection-mode="'multi'"
      :selected-features.sync="selected"
      :visible-layers="['live-position']"

      @more-info-click="showDeviceDetails"
      @edit-node="openGroupEditor"
    />
  </div>
</template>

<script>
import axios from 'axios';
import SidebarTreeMap from './components/SidebarTreeMap.vue';

export default {
  components: { SidebarTreeMap },
  data() {
    return {
      features: [],
      total: 0,
      isLoading: false,
      selected: [],
    };
  },
  methods: {
    // The required loader function
    async loadMapData(params) {
      this.isLoading = true;
      try {
        // The loader receives the combined params from all sources
        const apiParams = {
          bbox: params.bbox,
          zoom: params.zoom,
          search: params.search,
          page: params.page,
          per_page: params.per_page,
          ...params.filters // Adds { groupId: ... } to the request
        };

        const response = await axios.get('/api/devices/live', { params: apiParams });
        this.features = response.data.features || [];
        this.total = response.data.meta.total || 0;
      } catch (error) {
        console.error("Failed to load map data:", error);
      } finally {
        this.isLoading = false;
      }
    },
    showDeviceDetails(feature) {
      console.log('Show details for device:', feature.properties.title);
    },
    openGroupEditor(node) {
      console.log('Open modal to edit group:', node);
    }
  }
}
</script>

{
  // Dari viewport peta
  bbox: "swLng,swLat,neLng,neLat",
  zoom: 13,

  // Dari UI MejikDataMap
  search: "istilahPencarian",
  page: 1,
  per_page: 100,

  // Dari sidebar pohon
  filters: {
    categoryId: 123 // Kunci ditentukan oleh prop `filterKey`
  }
}