Panduan Lengkap Belajar HTML, CSS, dan JavaScript dengan Replit untuk Membuat WebGIS Sederhana Menggunakan MapTiler
Mahardika Yurico
Posted on September 4, 2024
Pendahuluan
Memulai perjalanan belajar pemrograman webGIS bisa menjadi tantangan, terutama jika kita baru mengenal dunia HTML, CSS, dan JavaScript. Untungnya, dengan alat seperti Replit, kita dapat mulai belajar dengan cara yang sederhana dan langsung. Artikel ini akan membimbing melalui langkah-langkah dasar untuk membuat aplikasi WebGIS sederhana menggunakan MapTiler. Dengan tutorial ini, kita akan belajar bagaimana membuat peta interaktif yang dapat diakses dari mana saja, cukup dengan menggunakan browser kita.
Langkah 1. Membuat Akun dan Proyek di Replit
1. Mendaftar ke Replit:
- Buka Relplit
- Klik tombol "Sign Up" di pojok kanan atas.
- Pilih metode pendaftaran yang diinginkan (Google, GitHub, atau email).
- Setelah berhasil mendaftar, kita akan diarahkan ke dashboard Replit.
2. Membuat Proyek Baru:
- Di dashboard Replit, klik tombol "Create Repl".
- Di bagian Template, pilih "HTML, CSS, JS".
- Beri nama proyek kita, misalnya "WebGIS-Sederhana".
- Klik "Create Repl" untuk membuat proyek. Setelah proyek dibuat, kita akan melihat tiga file utama: index.html, style.css, dan script.js. File-file ini akan digunakan untuk membangun halaman web kita.
Langkah 2: Menyiapkan Struktur HTML
1. Memahami Struktur Dasar HTML:
- Buka file index.html di Replit.
- index.html adalah file yang menentukan struktur dan isi dasar dari halaman web kita.
2. Menambahkan Elemen untuk Peta:
- Gantilah isi index.html dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGIS Sederhana</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>
<h1>WebGIS Sederhana Menggunakan MapTiler</h1>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>
Penjelasan:
-
<h1>: Menampilkan judul halaman. -
<div id="map">: Tempat di mana peta akan ditampilkan. - Maplibre GL: Digunakan untuk menampilkan peta dari MapTiler.
Langkah 3: Menambahkan Gaya dengan CSS
1. Menambahkan CSS untuk Tampilan Peta:
- Buka file style.css.
- Gantilah isi file style.css dengan kode berikut:
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
#map {
width: 100%;
height: 500px;
margin-top: 20px;
}
h1 {
text-align: center;
color: #333;
}
Penjelasan:
- body, html: Mengatur margin dan padding agar peta bisa menggunakan seluruh layar.
- #map: Mengatur ukuran peta agar lebar penuh dan tinggi 500px.
- h1: Mengatur tampilan judul di tengah halaman.
Note: untuk bagian style ini bisa diatur sesuai dengan design dan kebutuhan sendiri dengan melihat style code disini W3 Schools
Langkah 4: Mengintegrasikan MapTiler dengan JavaScript
1. Mendapatkan API Key dari MapTiler
- Buka MapTiler.
- Klik "Sign Up" di pojok kanan atas.
- Isi formulir pendaftaran dengan email atau daftar menggunakan akun Google.
- Setelah mendaftar, kita akan dibawa ke dashboard MapTiler.
2. Mendapatkan API Key:
- Di dashboard MapTiler, klik pada tab "API keys".
- Anda akan melihat API key default yang diberikan oleh MapTiler.
- Jika ingin membuat API key baru, klik tombol "Create a new key".
- Beri nama untuk API key baru, misalnya "WebGIS-Sederhana", dan klik "Create".
- Salin API key yang baru kita buat. API key ini akan digunakan untuk mengakses peta di proyek kita.
3. Membuat Peta Interaktif:
- Buka file script.js.
- Tambahkan kode berikut ke dalam script.js:
const map = new maplibregl.Map({
container: 'map', // ID dari elemen div tempat peta akan dirender
style: 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_MAPTILER_API_KEY', // URL ke gaya peta dari MapTiler dan bagian API KEY masukan API KEY anda
center: [106.8272, -6.1751], // Koordinat pusat peta (Jakarta)
zoom: 10 // Level zoom peta
});
Penjelasan:
- container: Mengacu pada elemen dengan id map di index.html.
- style: URL ke gaya peta dari MapTiler. Gantilah YOUR_MAPTILER_API_KEY dengan API key Anda.
- center: Koordinat geografis pusat peta (Jakarta).
- zoom: Level zoom awal dari peta.
- Jika ingin menambahkan marker pada peta, tambahkan kode berikut di bawah inisialisasi peta.
- Marker akan ditampilkan pada koordinat yang ditentukan.
4. Menambahkan Marker pada Peta (Opsional):
const marker = new maplibregl.Marker()
.setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
.addTo(map);
Langkah 5: Menjalankan dan Menguji Proyek
1. Menjalankan Proyek:
- Setelah kita selesai menulis kode, klik tombol "Run" di Replit. Replit akan membuka halaman web yang berisi peta yang sudah kita buat. Mengamati Hasilnya:
- Peta interaktif dari MapTiler akan ditampilkan di halaman web.
- kita bisa memperbesar, memperkecil, dan menggeser peta untuk melihat berbagai bagian.
Berikut Adalah Hasil Replit yang sudah kita buat:
Kita telah menyelesaikan proyek WebGIS sederhana ini dan bisa dilihat hasilnya di tautan berikut ini Source WebGIS Sederhana.
Proyek ini menunjukkan bagaimana menggunakan HTML, CSS, JavaScript, dan API MapTiler untuk membangun aplikasi WebGIS sederhana. Anda bisa mencoba sendiri atau menjadikan ini sebagai dasar untuk proyek yang lebih kompleks.
Dengan mengikuti langkah-langkah ini, kita telah berhasil membuat aplikasi WebGIS sederhana menggunakan Replit dan MapTiler. Panduan ini dirancang untuk pemula agar bisa memahami dasar-dasar pengembangan web dengan HTML, CSS, dan JavaScript sambil belajar membuat peta interaktif.
Semangat dan Terima kasih, semoga bermanfaat !
Posted on September 4, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.