80 lines
1.9 KiB
Plaintext
80 lines
1.9 KiB
Plaintext
@using kehati.Models.View
|
|
@{
|
|
ViewData["Title"] = "Map";
|
|
}
|
|
|
|
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
|
|
|
|
<div class="max-w-2xl">
|
|
|
|
<div class="text-xs font-medium uppercase tracking-widest text-primary">
|
|
Peta Interaktif
|
|
</div>
|
|
|
|
<h1 class="mt-3 font-serif text-5xl leading-tight text-foreground">
|
|
Sebaran Lokasi Konservasi
|
|
</h1>
|
|
|
|
<p class="mt-4 text-lg text-muted-foreground">
|
|
Titik-titik hijau di peta Jakarta. Klik setiap penanda untuk melihat detail lokasi.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Leaflet -->
|
|
<div class="mt-10 overflow-hidden rounded-2xl border border-border shadow-sm">
|
|
|
|
<div id="map" class="h-[600px] w-full"></div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Daftar Lokasi -->
|
|
<div class="mt-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
@foreach(LokasiModel loc in Model.FeaturedLocations)
|
|
{
|
|
<div class="rounded-xl border border-border bg-card p-4">
|
|
|
|
<div class="font-serif text-lg text-foreground">
|
|
@loc.Name
|
|
</div>
|
|
|
|
<div class="mt-1 text-xs text-muted-foreground">
|
|
@loc.Region · @loc.FloraCount spesies terdokumentasi
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts{
|
|
|
|
<script>
|
|
|
|
var map = L.map('map').setView([-6.2088,106.8456],11);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
|
|
attribution:'© OpenStreetMap'
|
|
}).addTo(map);
|
|
|
|
@foreach(LokasiModel l in Model.FeaturedLocations)
|
|
{
|
|
<text>
|
|
|
|
L.marker([@l.Latitude,@l.Longitude])
|
|
.addTo(map)
|
|
.bindPopup(`
|
|
<strong>@l.Name - @l.Region</strong><br>
|
|
@l.FloraCount Flora terdokumentasi <br>
|
|
@l.FaunaCount Fauna terdokumentasi
|
|
`);
|
|
|
|
</text>
|
|
}
|
|
|
|
</script>
|
|
|
|
} |