72 lines
2.1 KiB
Plaintext
72 lines
2.1 KiB
Plaintext
@using kehati.Models.View
|
|
@using kehati.Helpers
|
|
@{
|
|
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>
|
|
</div>
|
|
|
|
@section Scripts{
|
|
|
|
<script>
|
|
|
|
var map = L.map('map').setView([-6.2088,106.8456],11);
|
|
var customIcon = L.icon({
|
|
iconUrl: '/images/marker-icon.png',
|
|
iconRetinaUrl: '/images/marker-icon-2x.png',
|
|
shadowUrl: '/images/marker-shadow.png',
|
|
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowSize: [41, 41]
|
|
});
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
|
|
attribution:'© OpenStreetMap'
|
|
}).addTo(map);
|
|
|
|
@foreach(var l in ViewBag.lokasiHome)
|
|
{
|
|
<text>
|
|
|
|
L.marker([@l.Lat,@l.Long],{
|
|
icon: customIcon
|
|
}).addTo(map)
|
|
.bindPopup(`
|
|
<div style="font-size:11px!important;">
|
|
<strong>@l.Name</strong> <br />
|
|
Status Lokasi : @l.Status <br />
|
|
Flora : @l.LokasiTumbuhan.Count <br />
|
|
Fauna : @l.LokasiFauna.Count <br /><br />
|
|
@* <a class="" href="https://www.google.com/maps?q=@l.Lat,@l.Long" target="_blank"> *@
|
|
<a asp-controller="lokasi"
|
|
asp-action="detail"
|
|
asp-route-slug="@Custom.Encode(l.MsLokasiId)"
|
|
target="_blank">
|
|
Lihat Detail
|
|
</a>
|
|
</div>
|
|
`);
|
|
|
|
</text>
|
|
}
|
|
|
|
</script>
|
|
|
|
} |