400 lines
17 KiB
Plaintext
400 lines
17 KiB
Plaintext
@{
|
|
Layout = "_Layout";
|
|
|
|
ViewData["Title"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Description"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
|
|
ViewData["Keywords"] = "Keanekaragaman Hayati, Flora Fauna Jakarta, Konservasi, Ekosistem Urban, Biodiversitas, Jakarta";
|
|
ViewData["OgTitle"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgDescription"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
|
|
ViewData["TwitterTitle"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterDescription"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
|
|
|
|
// Breadcumb
|
|
ViewData["BreadcrumbText"] = "Keanekaragaman Hayati";
|
|
ViewData["TitleBeforeHighlight"] = "Keanekaragaman";
|
|
ViewData["TitleHighlight"] = "Hayati";
|
|
}
|
|
|
|
<!-- Breadcumb -->
|
|
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
|
|
|
|
<div class="flex justify-center">
|
|
<div class="w-full max-w-7xl py-12 px-4">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl font-bold mb-4">Keanekaragaman Hayati</h1>
|
|
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
|
|
Jelajahi keanekaragaman hayati di berbagai taman dan ruang terbuka hijau di DKI Jakarta. Klik pada marker di peta untuk melihat flora dan fauna yang dapat ditemukan di lokasi tersebut.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Map Container -->
|
|
<div class="flex flex-col lg:flex-row gap-6 h-screen lg:h-[600px]">
|
|
<!-- Map -->
|
|
<div class="flex-1 order-2 lg:order-1">
|
|
<div id="map" class="w-full h-64 lg:h-full rounded-lg shadow-lg"></div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="w-full lg:w-96 order-1 lg:order-2">
|
|
<div class="bg-white rounded-lg shadow-lg h-full overflow-hidden">
|
|
<div id="sidebar-content" class="h-full flex flex-col">
|
|
<!-- Default Content -->
|
|
<div id="default-content" class="p-6 flex flex-col items-center justify-center h-full text-center">
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-2">Pilih Lokasi</h3>
|
|
<p class="text-gray-600 text-sm">Klik pada marker di peta untuk melihat informasi keanekaragaman hayati di lokasi tersebut.</p>
|
|
</div>
|
|
|
|
<!-- Location Content (Hidden by default) -->
|
|
<div id="location-content" class="hidden h-full flex flex-col">
|
|
<div class="p-4 bg-green-50 border-b">
|
|
<h2 id="location-title" class="text-xl font-bold text-green-800"></h2>
|
|
<p id="location-description" class="text-sm text-green-600 mt-1"></p>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
<div id="flora-fauna-content">
|
|
<!-- Content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mapbox CSS -->
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet"/>
|
|
|
|
<!-- Mapbox JS -->
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
|
|
|
|
<script>
|
|
// Mapbox access token from appsettings.json
|
|
mapboxgl.accessToken = '@ViewBag.MapboxToken';
|
|
|
|
// Initialize map
|
|
const map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/streets-v11',
|
|
center: [106.8451, -6.2088], // Jakarta center
|
|
zoom: 11
|
|
});
|
|
|
|
// GeoJSON data for locations
|
|
const geojson = {
|
|
type: 'FeatureCollection',
|
|
features: [
|
|
{
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [106.8570, -6.2297]
|
|
},
|
|
properties: {
|
|
id: 'taman-tebet',
|
|
title: 'Taman Tebet',
|
|
description: 'Ruang terbuka hijau di kawasan Tebet'
|
|
}
|
|
},
|
|
{
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [106.8296, -6.1944]
|
|
},
|
|
properties: {
|
|
id: 'taman-suropati',
|
|
title: 'Taman Suropati',
|
|
description: 'Taman bersejarah di pusat kota Jakarta'
|
|
}
|
|
},
|
|
{
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [106.8317, -6.1927]
|
|
},
|
|
properties: {
|
|
id: 'taman-menteng',
|
|
title: 'Taman Menteng',
|
|
description: 'Taman rekreasi keluarga di kawasan Menteng'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
// Location data with complete flora and fauna
|
|
const locations = {
|
|
'taman-tebet': {
|
|
name: 'Taman Tebet',
|
|
description: 'Ruang terbuka hijau di kawasan Tebet',
|
|
coordinates: [106.8570, -6.2297],
|
|
flora: [
|
|
{
|
|
category: '🌳 Pohon',
|
|
species: [
|
|
{
|
|
name: 'Trembesi (Samanea saman)',
|
|
description: 'Pohon besar yang sering ditemukan di ruang terbuka hijau dengan canopy yang luas, memberikan teduh bagi pengunjung.'
|
|
},
|
|
{
|
|
name: 'Ketapang (Terminalia cattapa)',
|
|
description: 'Banyak ditemukan di pinggir jalan atau taman, daun lebar dan pohon yang relatif mudah ditemukan di daerah tropis.'
|
|
},
|
|
{
|
|
name: 'Angsana (Pterocarpus indicus)',
|
|
description: 'Pohon dengan daun yang lebat, sering menjadi peneduh yang baik di taman-taman kota.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
category: '🌺 Tanaman Hias dan Semak',
|
|
species: [
|
|
{
|
|
name: 'Bunga Sepatu (Hibiscus rosa-sinensis)',
|
|
description: 'Tanaman berbunga yang sering ditanam di sekitar taman dan memberikan warna cerah.'
|
|
},
|
|
{
|
|
name: 'Bougenville (Bougainvillea spp.)',
|
|
description: 'Tanaman hias dengan bunga cerah yang dapat ditemukan menghiasi pagar atau area terbuka.'
|
|
},
|
|
{
|
|
name: 'Pucuk Merah (Syzygium oleana)',
|
|
description: 'Tanaman semak yang sering ditanam di taman untuk memberikan nuansa hijau dan menghiasi pagar taman.'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
fauna: [
|
|
{
|
|
category: '🦅 Burung',
|
|
species: [
|
|
{
|
|
name: 'Kutilang (Pycnonotus goiavier)',
|
|
description: 'Burung kecil yang sering terlihat di pohon-pohon dan semak-semak taman, dengan suara khasnya yang merdu.'
|
|
},
|
|
{
|
|
name: 'Jalak (Gracupica jalla)',
|
|
description: 'Burung berwarna cerah yang bisa ditemukan di taman ini, suka berkelompok dan sering terbang tinggi.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
category: '🐿️ Mamalia',
|
|
species: [
|
|
{
|
|
name: 'Bajing (Callosciurus spp.)',
|
|
description: 'Mamalia kecil yang sering terlihat memanjat pohon atau berlari di tanah taman. Mereka sangat aktif dan mudah terlihat pada siang hari.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
category: '🦋 Serangga',
|
|
species: [
|
|
{
|
|
name: 'Kupu-kupu (Papilio spp.)',
|
|
description: 'Ditemukan di berbagai bunga di taman, terutama yang memiliki warna cerah.'
|
|
},
|
|
{
|
|
name: 'Lebah (Apis mellifera)',
|
|
description: 'Aktif di sekitar tanaman berbunga, berperan dalam penyerbukan tanaman.'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
'taman-suropati': {
|
|
name: 'Taman Suropati',
|
|
description: 'Taman bersejarah di pusat kota Jakarta',
|
|
coordinates: [106.8296, -6.1944],
|
|
flora: [
|
|
{
|
|
category: '🌳 Pohon',
|
|
species: [
|
|
{
|
|
name: 'Mahoni (Swietenia mahagoni)',
|
|
description: 'Pohon peneduh yang banyak ditemukan di taman kota, memiliki daun majemuk dan batang yang kokoh.'
|
|
},
|
|
{
|
|
name: 'Flamboyan (Delonix regia)',
|
|
description: 'Pohon dengan bunga merah cerah yang bermekaran di musim kemarau, memberikan pemandangan yang indah.'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
fauna: [
|
|
{
|
|
category: '🦅 Burung',
|
|
species: [
|
|
{
|
|
name: 'Merpati (Columba livia)',
|
|
description: 'Burung yang sangat umum ditemukan di taman kota, sering terlihat mencari makan di tanah.'
|
|
},
|
|
{
|
|
name: 'Tekukur (Streptopelia chinensis)',
|
|
description: 'Burung bersuara khas yang sering terdengar di pagi hari, biasa hinggap di pohon-pohon taman.'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
'taman-menteng': {
|
|
name: 'Taman Menteng',
|
|
description: 'Taman rekreasi keluarga di kawasan Menteng',
|
|
coordinates: [106.8317, -6.1927],
|
|
flora: [
|
|
{
|
|
category: '🌳 Pohon',
|
|
species: [
|
|
{
|
|
name: 'Beringin (Ficus benjamina)',
|
|
description: 'Pohon besar dengan akar gantung yang karakteristik, memberikan teduh yang sangat baik.'
|
|
},
|
|
{
|
|
name: 'Tanjung (Mimusops elengi)',
|
|
description: 'Pohon dengan bunga putih harum yang bermekaran sepanjang tahun, daun hijau mengkilap.'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
fauna: [
|
|
{
|
|
category: '🦅 Burung',
|
|
species: [
|
|
{
|
|
name: 'Gereja Taruk (Passer montanus)',
|
|
description: 'Burung kecil yang hidup berkelompok, sering terlihat di area dengan banyak pengunjung.'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
category: '🐱 Mamalia',
|
|
species: [
|
|
{
|
|
name: 'Kucing Liar (Felis catus)',
|
|
description: 'Kucing yang hidup bebas di taman, biasanya jinak dan sering diberi makan pengunjung.'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
};
|
|
|
|
// Add markers from geojson (menggunakan for..of agar sesuai dokumentasi)
|
|
for (const feature of geojson.features) {
|
|
// Membuat elemen custom marker
|
|
const el = document.createElement('div');
|
|
el.className = 'marker';
|
|
// Anda bisa menambahkan innerHTML/icon custom di sini jika ingin
|
|
|
|
// Membuat marker dengan elemen custom
|
|
new mapboxgl.Marker(el)
|
|
.setLngLat(feature.geometry.coordinates)
|
|
.addTo(map);
|
|
|
|
// Tambahkan event klik pada marker
|
|
el.addEventListener('click', function() {
|
|
showLocationInfo(feature.properties.id);
|
|
});
|
|
}
|
|
|
|
function showLocationInfo(locationId) {
|
|
const location = locations[locationId];
|
|
|
|
// Hide default content and show location content
|
|
document.getElementById('default-content').classList.add('hidden');
|
|
document.getElementById('location-content').classList.remove('hidden');
|
|
|
|
// Update location info
|
|
document.getElementById('location-title').textContent = location.name;
|
|
document.getElementById('location-description').textContent = location.description;
|
|
|
|
// Generate flora and fauna content
|
|
let content = '';
|
|
|
|
// Flora section
|
|
if (location.flora && location.flora.length > 0) {
|
|
content += '<div class="mb-6"><h3 class="text-lg font-semibold text-green-800 mb-4 flex items-center"><span class="mr-2">🌿</span>Flora</h3>';
|
|
|
|
location.flora.forEach(category => {
|
|
content += `<div class="mb-4">
|
|
<h4 class="font-medium text-green-700 mb-2">${category.category}</h4>
|
|
<div class="space-y-3">`;
|
|
|
|
category.species.forEach(species => {
|
|
content += `<div class="bg-green-50 p-3 rounded-lg">
|
|
<h5 class="font-medium text-gray-800 mb-1">${species.name}</h5>
|
|
<p class="text-sm text-gray-600">${species.description}</p>
|
|
</div>`;
|
|
});
|
|
|
|
content += '</div></div>';
|
|
});
|
|
|
|
content += '</div>';
|
|
}
|
|
|
|
// Fauna section
|
|
if (location.fauna && location.fauna.length > 0) {
|
|
content += '<div class="mb-6"><h3 class="text-lg font-semibold text-orange-800 mb-4 flex items-center"><span class="mr-2">🦋</span>Fauna</h3>';
|
|
|
|
location.fauna.forEach(category => {
|
|
content += `<div class="mb-4">
|
|
<h4 class="font-medium text-orange-700 mb-2">${category.category}</h4>
|
|
<div class="space-y-3">`;
|
|
|
|
category.species.forEach(species => {
|
|
content += `<div class="bg-orange-50 p-3 rounded-lg">
|
|
<h5 class="font-medium text-gray-800 mb-1">${species.name}</h5>
|
|
<p class="text-sm text-gray-600">${species.description}</p>
|
|
</div>`;
|
|
});
|
|
|
|
content += '</div></div>';
|
|
});
|
|
|
|
content += '</div>';
|
|
}
|
|
|
|
document.getElementById('flora-fauna-content').innerHTML = content;
|
|
|
|
// Fly to location
|
|
map.flyTo({
|
|
center: location.coordinates,
|
|
zoom: 15,
|
|
duration: 1000
|
|
});
|
|
}
|
|
|
|
// Add navigation controls
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
|
|
// Add geolocate control
|
|
map.addControl(
|
|
new mapboxgl.GeolocateControl({
|
|
positionOptions: {
|
|
enableHighAccuracy: true
|
|
},
|
|
trackUserLocation: true,
|
|
showUserHeading: true
|
|
})
|
|
);
|
|
</script>
|
|
|
|
<style>
|
|
.marker {
|
|
background-image: url('https://docs.mapbox.com/help/demos/custom-markers-gl-js/mapbox-icon.png');
|
|
background-size: cover;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
</style> |