Tunjukkan pada saya: Leaflet – peta gratis
Leaflet adalah perpustakaan yang digunakan oleh jutaan situs web untuk menampilkan peta. Ini gratis dan ditambahkan dengan dua baris di <head>:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>Maka yang kamu butuhkan hanyalah sebuah kotak untuk peta dan beberapa baris JavaScript:
<div id="mapa" style="height: 400px; border-radius: 12px;"></div>
<script>
// Coordinates for the map's center and zoom level (bigger number = closer)
const mapa = L.map('mapa').setView([49.19, 16.61], 13);
// Map tiles from OpenStreetMap (free)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
}).addTo(mapa);
// A pin with a popup
L.marker([49.19, 16.61])
.addTo(mapa)
.bindPopup('<strong>We are here!</strong>');
</script>Tiga langkah: buat peta, tambahkan lapisan dasar, letakkan pin. kamu dapat menambahkan pin sebanyak yang kamu suka – cukup ulangi L.marker.
Perpustakaan adalah kode yang ditulis orang lain dan kamu pinjam, jadi kamu tidak perlu menulis semuanya sendiri. Leaflet menangani gerakan menggeser, memperbesar, dan sentuhan seluler untuk kamu. kamu cukup memberi tahu peta apa yang harus ditampilkan.
Lebih banyak pin dari daftar
Jika kamu memiliki beberapa tempat, simpanlah dalam sebuah array dan ulangi – seperti halnya cuaca:
const mista = [
{ nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
{ nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
{ nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];
for (const misto of mista) {
L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}Giliran kamu 💪
Peta dengan lokasi sekolah di halaman “Kontak”. Bonus: pin kedua untuk gym atau lapangan yang digunakan untuk kelas PE.
Peta “Tempatku”: tempat tinggal kamu (kira-kira – satu kota saja sudah cukup!), taman bermain favorit kamu, tempat kamu pergi berlibur.
Ini adalah pelajaran utama kamu: peta semua perjalanan kamu dengan pin dari daftar. Setiap popup dapat ditautkan ke artikel perjalanan.
Peta “Tempat Kami Bermain”: lapangan kandang + lapangan lawan. Mengunjungi orang tua akan menyukainya.
Privasi: jangan pernah mencantumkan alamat rumah persis kamu di situs web. Sebuah pin di alun-alun utama kota kamu sudah lebih dari cukup.
Periksa: Situs web kamu memiliki peta yang dapat digeser dan diperbesar dengan setidaknya dua pin dengan popup.
Apa yang bisa diambil dari pelajaran ini
- Perpustakaan (seperti Leaflet) memberi kamu kekuatan super yang siap pakai.
- Peta = peta + lapisan dasar + pin.
- Daftar tempat dalam array + loop = peta dengan ukuran berapa pun.
© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten