water-management-system/frontend/src/components/charts/MapView.vue

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps<{
  center?: [number, number]
  zoom?: number
  markers?: Array<{ lat: number; lng: number; name: string; value?: string }>
}>()

const mapContainer = ref<HTMLElement>()

let map: any = null

onMounted(async () => {
  const L = (await import('leaflet')).default
  await import('leaflet/dist/leaflet.css')

  map = L.map(mapContainer.value!).setView(props.center || [44.6000, 82.9000], props.zoom || 10)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap', maxZoom: 18
  }).addTo(map)

  if (props.markers) {
    props.markers.forEach(m => {
      L.marker([m.lat, m.lng])
        .addTo(map)
        .bindPopup(`<b>${m.name}</b><br/>${m.value || ''}`)
    })
  }
})

onUnmounted(() => { if (map) map.remove() })
</script>

<style scoped>
.map-container { width: 100%; height: 500px; border-radius: 8px }
</style>