Panduan Awal AngularJS - Aplikasi Leaflet

Hai, bintang-bintang pemrograman masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia AngularJS dan Leaflet. Jangan khawatir jika istilah ini terdengar seperti bahasa asing saat ini - pada akhir panduan ini, Anda akan bisa berbicara "peta web" dalam waktu singkat!

AngularJS - Leaflet Application

Apa Itu AngularJS dan Leaflet?

Sebelum kita masuk ke kode, mari kitaura apa teknologi ini adalah:

AngularJS

AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita bangun aplikasi web dinamis. Pahami ini seperti seorang asisten super cerdas yang mengatur kode Anda dan membuat situs web Anda interaktif.

Leaflet

Leaflet adalah pustaka JavaScript open-source untuk peta interaktif yang ramah mobile. Itu seperti Google Maps, tapi Anda yang menjadi bos dan menentukan bagaimana peta Anda terlihat dan bekerja!

Sekarang kita sudah selesai dengannya pengenalan, mari kita mulai membangun aplikasi peta sendiri!

Menyiapkan Proyek

Pertama-tama, kita perlu menyiapkan proyek kita. Jangan khawatir, itu lebih mudah daripada mengassembly furniture IKEA!

Langkah 1: Buat Berkas HTML

Buat berkas baru yang dinamai index.html dan salin kode berikut:

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>Aplikasi Peta Saya</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
</style>
</head>
<body ng-controller="MapController">
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>

Berkas HTML ini seperti kerangka aplikasi kita. Itu termasuk semua pustaka yang diperlukan (AngularJS dan Leaflet) dan mengatur div tempat peta kita akan berada.

Langkah 2: Buat Berkas JavaScript

Sekarang, mari kita buat berkas app.js. Ini tempat dimana magik terjadi!

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Popup yang indah CSS3.<br> Dapat diatur dengan mudah.')
.openPopup();
});

mari kitaura ini:

Kita membuat modul AngularJS baru yang dinamai 'leafletApp'.
Kita tentukan controller yang dinamai 'MapController'.
Dalam controller, kita inisialisasi peta Leaflet, menentukan pandangan awal ke London ( Anda dapat mengubah ini ke koordinat apa pun yang Anda suka), dan menambahkan layer bingkai dari OpenStreetMap.
Akhirnya, kita menambahkan marker ke peta kita dengan popup.

Mengerti Kode

Sekarang kita memiliki peta dasar yang berjalan, mari kita masuk lebih dalam ke bagian kode kita.

Berkas HTML

<html ng-app="leafletApp">

Baris ini memberitahu AngularJS bahwa ini adalah elemen root aplikasi kita. Semua elemen di dalam ini akan dikelola oleh AngularJS.

<body ng-controller="MapController">

Baris ini menghubungkan MapController kita dengan body HTML kita. Ini berarti semua logika yang kita tentukan dalam MapController akan tersedia dalam body.

<div id="map"></div>

Ini adalah tempat peta kita akan dirender. Leaflet akan menggunakan div ini untuk membuat peta.

Berkas JavaScript

var app = angular.module('leafletApp', []);

Baris ini membuat modul AngularJS baru. Pahami modul sebagai wadah untuk berbagai bagian aplikasi Anda.

app.controller('MapController', function($scope) {
// Logika controller di sini
});

Ini adalah tempat kita menentukan MapController. $scope adalah objek khusus yang bertindak sebagai jembatan antara controller dan pandangan (HTML kita).

var map = L.map('map').setView([51.505, -0.09], 13);

Baris ini inisialisasi peta Leaflet kita. 'map' adalah id div kita, [51.505, -0.09] adalah koordinat untuk pusat peta kita (latitude dan longitude), dan 13 adalah tingkat zum.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

Ini menambahkan layer bingkai ke peta kita. Layer bingkai adalah gambar peta aktual. Di sini kita menggunakan bingkai OpenStreetMap.

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Popup yang indah CSS3.<br> Dapat diatur dengan mudah.')
.openPopup();

Ini menambahkan marker ke peta kita di koordinat yang ditentukan, mengikat popup ke marker itu, dan membuka popup.

Menambahkan Interaktivitas

Sekarang kita memiliki peta dasar, mari kita buatnya lebih interaktif! Kita akan menambahkan fitur yang memungkinkan pengguna mengklik peta untuk menambah marker baru.

Perbarui berkas app.js Anda seperti ini:

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

$scope.markers = [];

map.on('click', function(e) {
var marker = L.marker(e.latlng).addTo(map);
$scope.markers.push(marker);
$scope.$apply();
});

$scope.removeMarkers = function() {
$scope.markers.forEach(function(marker) {
map.removeLayer(marker);
});
$scope.markers = [];
};
});

Sekarang, perbarui index.html Anda untuk termasuk tombol penghapusan marker:

<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">Hapus Semua Marker</button>
<script src="app.js"></script>
</body>

mari kitaura apa yang kita tambahkan:

Kita membuat array $scope.markers untuk melacak semua marker kita.
Kita menambahkan event listener ke peta kita yang membuat marker baru saat pengguna mengklik peta.
Kita membuat fungsi removeMarkers yang menghapus semua marker dari peta dan membersihkan array marker kita.
Kita menambahkan tombol ke HTML kita yang memanggil fungsi removeMarkers saat diklik.

Kesimpulan

Selamat! Anda telah berhasil membuat aplikasi peta interaktif pertama Anda menggunakan AngularJS dan Leaflet. Anda telah belajar bagaimana mengatur peta dasar, menambahkan marker, dan bahkan mengimplementasikan interaksi pengguna.

Ingat, ini hanya awal. Dunia peta web luas dan menarik, dengan kemungkinan tak terbatas untuk penyesuaian dan penambahan fitur. Terus jelajah, terus kode, dan terutama, bersenang-senang!

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan:

Metode	Deskripsi
`L.map()`	Membuat peta di elemen HTML yang ditentukan
`setView()`	Mengatur pandangan peta ke pusat dan tingkat zum
`L.tileLayer()`	Menambahkan layer bingkai ke peta
`L.marker()`	Menambahkan marker ke peta
`bindPopup()`	Mengikat popup ke marker
`openPopup()`	Membuka popup untuk marker
`on()`	Menambahkan event listener ke peta
`addTo()`	Menambahkan objek ke peta
`removeLayer()`	Menghapus layer dari peta

Selamat berpeta, cartographer masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Pemasa

Tutorial Seterusnya:

AngularJS - Aplikasi Last.fm