Update Banyak
This commit is contained in:
WD - Dev
Vendored
+208
@@ -0,0 +1,208 @@
|
||||
var map, marker, streetLayer, satelliteLayer, labelsLayer, hybridLayer;
|
||||
|
||||
function initMap() {
|
||||
// console.log("🚀 initMap() dipanggil");
|
||||
|
||||
var latitudeInput = document.getElementById('latitude').value;
|
||||
var longitudeInput = document.getElementById('longitude').value;
|
||||
|
||||
// console.log("📍 Input awal:", latitudeInput, longitudeInput);
|
||||
|
||||
// Kalau input sudah ada → pakai itu
|
||||
if (latitudeInput && longitudeInput) {
|
||||
var pos = {
|
||||
lat: parseFloat(latitudeInput),
|
||||
lng: parseFloat(longitudeInput)
|
||||
};
|
||||
// console.log("✅ Pakai input manual:", pos);
|
||||
initMapWithPos(pos);
|
||||
} else {
|
||||
// Kalau kosong → coba geolocation
|
||||
if (navigator.geolocation) {
|
||||
// console.log("📡 Mencoba geolocation...");
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
var pos = {
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude
|
||||
};
|
||||
// console.log("✅ Geolocation berhasil:", pos);
|
||||
initMapWithPos(pos);
|
||||
updateFormInputs(pos.lat, pos.lng);
|
||||
}, function() {
|
||||
console.warn("⚠️ Geolocation gagal, fallback ke Jakarta");
|
||||
handleLocationError(true);
|
||||
initMapWithPos({ lat: -6.2, lng: 106.816666 });
|
||||
});
|
||||
} else {
|
||||
console.warn("⚠️ Browser tidak support geolocation, fallback ke Jakarta");
|
||||
handleLocationError(false);
|
||||
initMapWithPos({ lat: -6.2, lng: 106.816666 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initMapWithPos(pos) {
|
||||
// console.log("🗺️ initMapWithPos() dengan posisi:", pos);
|
||||
|
||||
// Base layers
|
||||
streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
{ attribution: '© OpenStreetMap contributors' });
|
||||
|
||||
satelliteLayer = L.tileLayer(
|
||||
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
|
||||
{ attribution: 'Tiles © Esri' });
|
||||
|
||||
labelsLayer = L.tileLayer(
|
||||
'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}',
|
||||
{ attribution: 'Labels © Esri' });
|
||||
|
||||
// Gabungkan satelit + jalan → Hybrid
|
||||
hybridLayer = L.layerGroup([satelliteLayer, labelsLayer]);
|
||||
|
||||
// Init map
|
||||
map = L.map('map', {
|
||||
center: [pos.lat, pos.lng],
|
||||
zoom: 17,
|
||||
layers: [hybridLayer],
|
||||
fullscreenControl: true,
|
||||
fullscreenControlOptions: { position: 'topleft' }
|
||||
});
|
||||
// console.log("✅ Map berhasil dibuat");
|
||||
|
||||
// Layer switcher
|
||||
var baseLayers = {
|
||||
"Jalan (OSM)": streetLayer,
|
||||
"Hybrid (Satelit + Jalan)": hybridLayer
|
||||
};
|
||||
L.control.layers(baseLayers).addTo(map);
|
||||
|
||||
// Marker awal
|
||||
updateMarker(pos.lat, pos.lng);
|
||||
|
||||
// Klik peta → pindah marker
|
||||
map.on('click', function(e) {
|
||||
var latitude = e.latlng.lat.toFixed(6);
|
||||
var longitude = e.latlng.lng.toFixed(6);
|
||||
// console.log("🖱️ Klik map:", latitude, longitude);
|
||||
updateMarker(latitude, longitude);
|
||||
updateFormInputs(latitude, longitude);
|
||||
});
|
||||
|
||||
// Tombol "Lokasi Saya"
|
||||
L.control.locateMe = function(opts) {
|
||||
var control = L.control({position: 'topleft'});
|
||||
control.onAdd = function(map) {
|
||||
var btn = L.DomUtil.create('button', 'leaflet-bar leaflet-control');
|
||||
btn.setAttribute("type", "button");
|
||||
btn.innerHTML = '📍';
|
||||
btn.title = "Lokasi Saya";
|
||||
btn.style.backgroundColor = 'white';
|
||||
btn.style.width = '34px';
|
||||
btn.style.height = '34px';
|
||||
|
||||
btn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// console.log("📍 Tombol Lokasi Saya diklik");
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
var lat = position.coords.latitude;
|
||||
var lng = position.coords.longitude;
|
||||
// console.log("✅ Lokasi saya:", lat, lng);
|
||||
updateMarker(lat, lng);
|
||||
updateFormInputs(lat, lng);
|
||||
map.setView([lat, lng], 17);
|
||||
}, function() {
|
||||
console.error("❌ Tidak bisa ambil lokasi saya");
|
||||
alert("Tidak bisa mengambil lokasi Anda");
|
||||
}, { enableHighAccuracy: true });
|
||||
} else {
|
||||
console.error("❌ Browser tidak support geolocation");
|
||||
alert("Geolocation tidak didukung di browser ini");
|
||||
}
|
||||
};
|
||||
return btn;
|
||||
};
|
||||
return control;
|
||||
};
|
||||
L.control.locateMe().addTo(map);
|
||||
}
|
||||
|
||||
function updateMarker(latitude, longitude) {
|
||||
// console.log("📍 updateMarker ke:", latitude, longitude);
|
||||
if (marker) {
|
||||
marker.setLatLng([latitude, longitude])
|
||||
.bindPopup("Lokasi terpilih")
|
||||
.openPopup();
|
||||
} else {
|
||||
marker = L.marker([latitude, longitude]).addTo(map)
|
||||
.bindPopup("Lokasi terpilih")
|
||||
.openPopup();
|
||||
}
|
||||
map.setView([latitude, longitude]);
|
||||
}
|
||||
|
||||
function updateFormInputs(latitude, longitude) {
|
||||
// console.log("📝 updateFormInputs:", latitude, longitude);
|
||||
document.getElementById('latitude').value = latitude;
|
||||
document.getElementById('longitude').value = longitude;
|
||||
document.getElementById('latlong').value = `${latitude}, ${longitude}`;
|
||||
}
|
||||
|
||||
function handleLocationError(browserHasGeolocation) {
|
||||
console.error(browserHasGeolocation ?
|
||||
'❌ Error: Geolocation service failed.' :
|
||||
'❌ Error: Browser tidak support geolocation.');
|
||||
}
|
||||
|
||||
// Sinkronisasi input form ⇄ peta
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// console.log("📦 DOMContentLoaded");
|
||||
initMap();
|
||||
const latlongInput = document.getElementById('latlong');
|
||||
const latitudeInput = document.querySelector('input[data-maps="latitude"]') || document.getElementById('latitude');
|
||||
const longitudeInput = document.querySelector('input[data-maps="longitude"]') || document.getElementById('longitude');
|
||||
|
||||
// Set nilai latlong awal kalau ada
|
||||
if (latitudeInput.value && longitudeInput.value) {
|
||||
latlongInput.value = `${latitudeInput.value}, ${longitudeInput.value}`;
|
||||
// console.log("🔄 Sinkron awal dari input:", latlongInput.value);
|
||||
}
|
||||
|
||||
// Input manual latlong
|
||||
latlongInput.addEventListener('input', function() {
|
||||
// console.log("⌨️ Input manual latlong:", latlongInput.value);
|
||||
const latlongValue = latlongInput.value.split(',');
|
||||
|
||||
const latLongRegex = /^(-?\d+(\.\d+)?),\s*(-?\d+(\.\d+)?)$/;
|
||||
if (latLongRegex.test(latlongInput.value.trim())) {
|
||||
if (latlongValue.length === 2) {
|
||||
const lat = parseFloat(latlongValue[0].trim());
|
||||
const long = parseFloat(latlongValue[1].trim());
|
||||
// console.log("✅ Format valid → update map:", lat, long);
|
||||
latitudeInput.value = lat;
|
||||
longitudeInput.value = long;
|
||||
updateMarker(lat, long);
|
||||
map.setView([lat, long], 17);
|
||||
}
|
||||
} else {
|
||||
console.warn("⚠️ Format salah, reset input");
|
||||
setTimeout(function() {
|
||||
latlongInput.value = '';
|
||||
latlongInput.placeholder = 'Isi dengan format yang sesuai';
|
||||
latitudeInput.value = '';
|
||||
longitudeInput.value = '';
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// Sinkronisasi ketika latitude / longitude berubah
|
||||
latitudeInput.addEventListener('input', function() {
|
||||
// console.log("🔄 Latitude diubah:", latitudeInput.value);
|
||||
latlongInput.value = `${latitudeInput.value}, ${longitudeInput.value}`;
|
||||
});
|
||||
longitudeInput.addEventListener('input', function() {
|
||||
// console.log("🔄 Longitude diubah:", longitudeInput.value);
|
||||
latlongInput.value = `${latitudeInput.value}, ${longitudeInput.value}`;
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user