Halo para seniman yang budiman! Pada kesempatan kali ini, kita akan menjelajahi bagaimana menggunakan OpenStreetMap dan paket Leaflet untuk memetakan koordinat latitude dan longitude, sangat penting untuk memahami pasar dan cakupan layanan secara sederhana.
Berikut adalah sample code yang saya gunakan:
<!-- Dalam tag Header -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
<!-- Dalam tag Body -->
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script>
// Initialize the map
var map = L.map('map').setView([-6.920318649418644, 107.61809413366902], 5); // Center map to Jakarta
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Example data: Array of coordinates
var locations = [
{ lat: -6.942559, lng: 107.715587 },
{ lat: -6.942531, lng: 107.715535 },
{ lat: -6.942269, lng: 107.715338 },
{ lat: -6.941815, lng: 107.714255 },
{ lat: -6.940438, lng: 107.714361 },
{ lat: -6.940303, lng: 107.715331 },
{ lat: -6.940284, lng: 107.715199 },
{ lat: -6.939681, lng: 107.715334 },
{ lat: -6.939629, lng: 107.716141 },
{ lat: -6.939463, lng: 107.716229 },
{ lat: -6.939395, lng: 107.714015 },
{ lat: -6.933295, lng: 107.657877 },
{ lat: -6.933247, lng: 107.657894 },
// Add more coordinates here
];
// Create a marker cluster group
var markers = L.markerClusterGroup();
// Add markers to the cluster group
locations.forEach(function(location) {
var marker = L.marker([location.lat, location.lng]);
markers.addLayer(marker);
});
// Add the marker cluster group to the map
map.addLayer(markers);
</script>
atau bisa akses di codepen.id
Hasil dari execute data dengan sample data ribuan:
Untuk menambahkan marker lebih dari satu anda bisa membuat koordinate nya di bagi lagi misalnya anda ingin membedakan costumer rumahan, toko dan perusahaan ini mungkin di lakukan dengan mudah. cukup menyiapkan icon berformat gambar seperti .png, .svg dan lain sebagainya.
Tambahkan kode di bawah ini untuk menambahkan icon dan koordinate terpisah.
// Tulis sebanyak yang kamu mau untuk pemetaan koordinate
// Ganti variabel saja
var locations = [
{ lat: -6.942559, lng: 107.715587 },
{ lat: -6.942531, lng: 107.715535 },
{ lat: -6.942269, lng: 107.715338 },
// Add more coordinates here
];
var locations_1 = [
{ lat: -6.942559, lng: 107.715587, nama:"nama_location_1" },
{ lat: -6.942531, lng: 107.715535, nama:"nama_location_2" },
{ lat: -6.942269, lng: 107.715338, nama:"nama_location_3" },
// Add more coordinates here
];
var markers = L.markerClusterGroup();
var markers_1 = L.markerClusterGroup();
var icon_box = L.icon({
iconUrl: '../assets/icon/box.svg', // Ganti dengan URL ikon Anda
iconSize: [18, 18], // Ukuran ikon
iconAnchor: [12, 18], // Titik anchor (bagian bawah ikon)
popupAnchor: [1, -34], // Titik anchor popup
shadowSize: [18, 18] // Ukuran bayangan
});
locations.forEach(function(location) {
var marker = L.marker([location.lat, location.lng]);
markers.addLayer(marker);
});
locations_1.forEach(function(location) {
var marker_odp = L.marker([locations_1.lat, locations_1.lng], { icon: icon_box }).bindPopup('<b>' + locations_1.name + '</b>');
markers_1.addLayer(marker_1);
});
map.addLayer(markers);
Akan jadi sepeti gambar di bawah ini, dan icon bisa di click jika di data di tambahkan nama.
Kita akhiri dulu pembahasan pada bagian ini. Nantikan topik manarik lainnya. Sampai jumpa di artikel berikutnya, dan terima kasih sudah membaca!