Panduan Awal AngularJS - Aplikasi Leaflet

Halo, para bintang coding 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 dalam "web map" dengan lancar!

AngularJS - Leaflet Application

Apa Itu AngularJS dan Leaflet?

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

AngularJS

AngularJS adalah kerangka kerja JavaScript yang kuat yang membantu kita bangun aplikasi web dinamis. Pihakkan bahwa 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 menjadi bos dan menentukan bagaimana peta Anda terlihat dan bekerja!

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

Menyiapkan Proyek

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

Langkah 1: Buat Berkas HTML

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

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>My Awesome Map App</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 tulang punggung aplikasi kita. Ini termasuk semua pustaka yang diperlukan (AngularJS dan Leaflet) dan menyiapkan div tempat peta kita akan berada.

Langkah 2: Buat Berkas JavaScript

Sekarang, mari kita buat berkas app.js. Ini adalah 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('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
});

mari kitauraikan ini:

Kita membuat sebuah modul AngularJS yang disebut 'leafletApp'.
Kita menentukan sebuah controller yang disebut 'MapController'.
Dalam controller, kita inisialisasi sebuah peta Leaflet, menentukan pandangannya ke London ( Anda dapat mengubah ini ke koordinat mana saja Anda suka), dan menambahkan layer batu bata dari OpenStreetMap.
Akhirnya, kita menambahkan sebuah marker ke peta kita dengan sebuah popup.

Mengerti Kode

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

Berkas HTML

<html ng-app="leafletApp">

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

<body ng-controller="MapController">

Baris ini menghubungkan controller MapController 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 sebuah modul AngularJS baru. Pihakkan bahwa modul adalah wadah untuk bagian-bagian berbeda aplikasi Anda.

app.controller('MapController', function($scope) {
// Controller logic here
});

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 pusat peta kita (lintang dan bujur), dan 13 adalah level zum.

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

Ini menambahkan layer batu bata ke peta kita. Layer batu bata adalah gambar peta yang sebenarnya. Di sini kita menggunakan bata OpenStreetMap.

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();

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

Menambah Interaktif

Sekarang kita memiliki peta dasar kita, 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 menambahkan 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 kitauraikan 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 mengosongkan array marker kita.
Kita menambahkan tombol ke HTML kita yang memanggil fungsi removeMarkers saat diklik.

Kesimpulan

Selamat! Anda baru saja membangun 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 sangat luas dan menarik, dengan kemungkinan tak terbatas untuk penyesuaian dan penambahan fitur. Terus jelajahi, terus coding, dan yang paling penting, 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 pandang peta dengan pusat dan level zum
`L.tileLayer()`	Menambahkan layer batu bata 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 berpetualang, para kartografer masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Timer

Tutorial Selanjutnya:

AngularJS - Aplikasi Last.fm