PENGGUNAAN LEAFLET JS DENGAN IONIC 7 ANGULAR

Whats Up My Bro…..

Kali ini kita akan membuat sebuah aplikasi mobile dan web yang menggunakan peta dengan beberapa fungsi GPS geolocation. Dengan penjelasan step by step saya harap tulisan ini dapat bermanfaat bagi anda yang membacanya.

Beberapa langkah point yang akan menjadi pembahasan dalam pengerjaan adalah sebagai berikut:

1. Bangun aplikasi dari 0 dengan menggunakan IONIC CLI
   Anda akan belajar bagaimana cara menggunakan Ionic CLI untuk membuat aplikasi Ionic/Angular Capacitor.
2. Menambahkan peta ke aplikasi menggunakan plugin LEAFLET JS ke IONIC
   Anda akan belajar bagaimana menerapkan integrasi peta dengan Ionic/Agular Capacitor dan Leaflet JS.
3. Menambahkan pilihan layar dasar peta yang berbeda-beda.
   Anda akan belajar bagaimana cara interaktif dasar API Leaflet JS seperti TileLayer, LayerGroup dan metode peta.
4. Integrasi API Geolokasi untuk menggunakan GPS perangkat dan menemukan lokasi pengguna saat ini.
   Anda akan mempelajari cara menggunakan Geolocation API untuk menemukan lokasi perangkat dan menangani kesalahan terkait.

MARI KITA COBA!!

1. Bangun Aplikasi Dari Dasar Dengan Menggunakan IONIC CLI.

Jika Anda belum pernah menginstal Ionic CLI sebelumnya, silakan kunjungi https://ionicframework.com/docs/intro/cli dan ikuti petunjuk untuk menginstal CLI.

Selanjutnya, buat aplikasi menggunakan CLI dengan menjalankan ionic start ionic-leaflet-map. CLI akan meminta Anda untuk memilih beberapa opsi.

Saya akan menggunakan Angular dan proyek starter blank. Ionic CLI menanyakan apakah Anda menyukai integrasi Capacitor. Pada IONIC 6 secara default proyek aplikasi yang kita buat sudah menggunakan Capacitor.

Anda akhirnya akan melihat beberapa log yang menunjukkan bahwa penyiapan telah selesai.

Kemudian cd ke folder proyek yang baru saja kita buat dan jalankan ionic serve -lab.

Jalankan membuka aplikasi di browser. Secara default port 8100 dan 8200

2. Tambahkan Peta Menggunakan Leaflet

Leaflet adalah library JavaScript opensource untuk peta interaktif cocok pada platform seluler dan desktop. Menawarkan banyak fitur keren untuk interaksi dengan peta. Menggunakan fitur yang kita butuhkan untuk menunjukkan peta, dan kita hanya akan menyentuh permukaannya. Jadi relatif mudah.

Kita menggunakan package Angular Leaflet untuk integrasi yang lebih mudah. Kita akan menggunakan @asymmetrik/ngx-leaflet kedalam project. Package ini bukan bagian resmi dari Angular, tetapi dapat diandalkan, dan saya telah menggunakannya di banyak aplikasi.

Jalankan npm i leaflet @asymmetrik/ngx-leaflet untuk menginstal keduanya leaflet dan ngx-leaflet.

Kita menyukai TypeScript jadi mari tambahkan pengetikan yang sesuai untuk Leaflet.

Jalankan npm i @types/leaflet -D untuk menginstal pengetikan sebagai dev dependency.

Oke, kita selesai dengan instalasi. Mari tambahkan peta ke aplikasi!

Kemudian menambahkan peta ke HomePage(home.page.ts) Component.

Tambahkan LeafletModule ke imports array di HomePageModule(home.module.ts)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LeafletModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Tambahkan peta options dan OnMapReady

options mendefinisikan hal-hal seperti pusat peta, maxZoom, baseLayer dan banyak lagi.

onMapReady akan dipanggil ketika peta selebaran sudah siap dan menerima instance peta. Kita akan membutuhkan instance ini untuk berinteraksi dengan peta nanti.

import { Component } from '@angular/core';
import { Map as LMap, TileLayer } from 'leaflet';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public map: LMap;
  public center = [-6.1890970, 106.8371366];
  public options = {
    zoom: 16,
    maxZoom: 18,
    zoomControl: false,
    preferCanvas: true,
    attributionControl: true,
    center: this.center,
    layers: [
      new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png')
    ],
  };

  constructor() {}

  public async onMapReady(lMap: LMap) {
    this.map = lMap;
    setTimeout(() => lMap.invalidateSize(true), 0);
  }

}

Tambahkan div peta di home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Leaflet Map
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="leaflet" leaflet
       [leafletOptions]="options"
       (leafletMapReady)="onMapReady($event)">
  </div>
</ion-content>

Tambahkan CSS file ke daftar CSS global.
Buka file angular.json di root proyek dan perbarui baris 34 dari

“styles”: [“src/theme/variables.scss”, “src/global.scss”], ke

"styles": ["src/theme/variables.scss", "src/global.scss", "./node_modules/leaflet/dist/leaflet.css"],

dan tambahkan CSS div peta ke home.page.scss. File yang diperbarui terlihat seperti ini.

.leaflet {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
}

Mulai ulang server dengan perintah ionic serve -labs untuk memastikan CSS baru dimuat dengan benar. Anda akan melihat layar seperti ini.

Selamat!!

Kita sudah berhasil mengintegrasikan peta kedalam aplikasi mobile yang kita bangun dengan ionic.

3. Tambahkan fitur untuk mengganti layar dasar peta.

Kita telah menambahkan satu peta dasar di peta yang sudah ditentukan didalam varible options. Saya ingin mengubahnya dan menggunakan peta dasar Bersepeda dan Transportasi dengan menggunakan tombol untuk beralih di antara keduanya.

Mari kita tambahkan tombol FAB dari Ionic untuk melakukan peralihan lapisan. Silakan tambahkan tombol FAB dengan daftar opsi di dalam file . Kode yang diperbarui terlihat seperti ini.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Leaflet Map
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="layers-outline"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="bottom">
      <ion-fab-button color="danger">
        <ion-icon name="bicycle"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="car"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
  <div class="leaflet" leaflet
       [leafletOptions]="options"
       (leafletMapReady)="onMapReady($event)">
  </div>
</ion-content>

Layar yang diperbarui akan memiliki tombol FAB di kanan atas dengan dua opsi (bersepeda & transportasi) untuk dipilih.

Kita perlu menambahkan code untuk benar-benar mengganti peta dasar saat kita mengklik tombol pilihan kita. Jangan khawatir. Ada saya! 😀

Saya akan menunjukkan kepada Anda kode yang diperbarui, dan kita akan membahas perubahan satu per satu.

Ini adalah home.page.ts file baru.

import { Component } from '@angular/core';
import { LayerGroup, Map as LMap, TileLayer } from 'leaflet';
import { BaseLayer } from './BaseLayer.enum';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public map: LMap;
  public center = [-6.1890970, 106.8371366];
 
  public options = {
    zoom: 16,
    maxZoom: 18,
    zoomControl: false,
    preferCanvas: true,
    attributionControl: true,
    center: this.center,
  };

  public baseMapUrls = {
    [BaseLayer.cycling]: 'http://c.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
    [BaseLayer.transport]: 'http://c.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
  };

  public selectedBaseLayer = BaseLayer.cycling;

  public baseLayer = BaseLayer;

  private baseMapLayerGroup = new LayerGroup();

  constructor() {}

  public async onMapReady(lMap: LMap) {
    this.map = lMap;
    this.map.addLayer(this.baseMapLayerGroup);
    this.switchBaseLayer(this.selectedBaseLayer);
    setTimeout(() => lMap.invalidateSize(true), 0);
  }

  public switchBaseLayer(baseLayerName: string) {
    this.baseMapLayerGroup.clearLayers();
    const baseMapTileLayer = new TileLayer(this.baseMapUrls[baseLayerName]);
    this.baseMapLayerGroup.addLayer(baseMapTileLayer);
    this.selectedBaseLayer = BaseLayer[baseLayerName];
  }
  
}

Saya menghapus layers array dari map options, dan sebagai gantinya, saya telah menambahkan baseMapUrls, sebuah objek. Indeks/Kuncinya adalah nama peta, dan nilai adalah URL untuk ubin peta. Untuk kunci, saya menggunakan TypeScript Enum untuk memudahkan saat menggunakan kembali string yang sama. Enum ada di file baru bernama BaseLayer.enum.ts, dan ini kodenya:

export enum BaseLayer {
  cycling = 'cycling',
  transport = 'transport',
}

Penjelasan CODE

Selanjutnya, kita memiliki selectedBaseLayer properti untuk melacak yang mana pengguna memilih lapisan dasar. Saya telah menginisialisasi dengan peta dasar bersepeda menggunakan Enum yang sama.

Selanjutnya, kita memiliki baseLayerproperti yang menunjuk ke BaseLayerenum. Ini untuk membuat enum tersedia untuk template HTML peta kami dan menggunakannya di sana.

Selanjutnya, kita memiliki private baseMapLayerGroup = new LayerGroup();. LayerGroup adalah cara Leaflet untuk mengelompokkan beberapa lapisan dan memisahkannya dari lapisan lainnya di peta. Penggunaannya di sini membuatnya lebih mudah untuk mengelola lapisan dasar. Nanti kita akan menggunakan lebih banyak LayerGroups untuk menambahkan placemark dan hasil pencarian GPS lokasi.

Selanjutnya, kita memiliki metode switchBaseLayer. Dibutuhkan nama lapisan dasar dan dapat mengganti lapisan dasar. Diawal akan membersihkan semua lapisan dalam grup lapisan dan kemudian menambahkan lapisan baru dengan menemukan konfigurasi dari objek baseMapUrls. Perhatikan bahwa layer yang kita tambahkan bertipe TileLayer. Jenis lapisan khusus di dunia Leaflet ini dapat menampilkan ubin yang digunakan untuk peta dasar.

Dan berikut adalah perubahan yang Anda butuhkan dalam HTML. Pada dasarnya menambahkan clickfungsi ke tombol. Juga, centang selectedBaseLayer untuk menyorot warna tombol yang mewakili lapisan dasar yang dipilih dengan mengubahnya menjadi merah (danger). Perhatikan saya menggunakan nilai BaseLayerenum yang sama untuk memaksimalkan penggunaan kembali dan tidak mengulanginya sendiri.

4. Gunakan GPS Perangkat dan temukan lokasi perangkat saat ini.

Kita akan menggunakan Geolocation API untuk menemukan lokasi perangkat. Ini adalah API web standar. Untuk alasan privasi, pengguna akan diminta untuk memberikan akses ke titik lokasi. Jadi pengguna dapat memberikan akses atau menolak, dan kita perlu menangani potensi kesalahan dalam proses ini.

Pertama, mari tambahkan metode untuk membaca lokasi perangkat.

public async locate() {
    this.locationLayerGroup.clearLayers();
    if (!navigator.geolocation) {
      console.error('Geolocation is not supported by your browser');
      return;
    }
    await this.presentLoading();
    navigator.geolocation.getCurrentPosition(
      (position) => this.onLocationSuccess(position),
      (error) => this.onLocateError(error),
      {enableHighAccuracy: true}
    );
  }

Seperti yang mungkin Anda perhatikan, saya telah menambahkan LayerGroup yang lain untuk lokasi GPS ke peta yang disebut locationLayerGroup.

Selanjutnya, saya memeriksa apakah navigator.geolocation itu didukung. Perhatikan, Jika tidak didukung, saya mencatat kesalahan dan menggunakan return pernyataan untuk keluar dari fungsi. Ini adalah alternatif yang lebih baik dibandingkan dengan melakukan if/else dan membuat code lebih mudah dibaca.

Jika didukung, saya menunjukkan pesan pemuatan. Kemudian, saya memanggil getCurrentPosition, yang mengembalikan lokasi perangkat saat ini (metode lain jika Anda suka watching lokasi, yang bagus untuk melacak sesuai kebutuhan penggunaan).

getCurrentPosition membutuhkan tiga parameter. Pertama, fungsi panggilan balik sukses, yang dipanggil saat lokasi berhasil diambil. Yang kedua adalah error callback yang akan dipanggil jika terjadi error. Seperti akses lokasi ditolak atau kesalahan batas waktu jika satelit GPS tidak tersedia. Dan ketiga, PositionOptions, yang saya gunakan untuk mengaktifkan HighAccuracy lokasi. Mengaktifkan opsi ini akan menyebabkan pembacaan lokasi lebih lama tetapi akan membuatnya lebih akurat.

Berikut adalah kode untuk panggilan balik sukses

private onLocationSuccess(position: GeolocationPosition) {
    const [lat, lng] = [
      position.coords.latitude,
      position.coords.longitude,
    ];
    this.hideLoading();
    this.map.setView([lat, lng], 18);
    const marco = marker([lat, lng], {icon: this.customMarkerIcon}).bindPopup( `Hai...!!`, { autoClose: true, closeButton: false, });
    this.locationLayerGroup.addLayer(marco);
    const locationCircle = circle([lat, lng], 10);
    this.locationLayerGroup.addLayer(locationCircle);
  }

Di sini saya membaca beberapa properti dari GeolocationPosition yang saya terima. Saya menggunakan garis lintang dan garis bujur untuk membuat larik Leaflet Lat Lng yang dapat memusatkan peta. Untuk itu saya menggunakan metode peta setView, melewati tingkat Lat Lng dan zoom (18).

Saya gunakan Marker untuk menampilkan penanda di peta untuk lokasi perangkat. Saya telah mengekstrak fungsi ini karena saya ingin menunjukkan tooltip pada marker, yang menunjukkan akurasi. Dan karena ini adalah tooltip Leaflet dan seluruh pembuatan DOM ditangani oleh Leaflet, ada sedikit kerumitan seputar cara menangani fungsi event sentuh.

Dan terakhir, saya menggunakan fungsi Leaflet circle untuk menggambar lingkaran di peta, yang menunjukkan akurasi secara visual kepada pengguna. Lingkaran ini berpusat pada lokasi perangkat.

langsung saja kita lihat inilah hasilnya

Source Code lengkapnya ada di https://github.com/ekalaya/ionic-leaflet-map.git

KESIMPULAN

Kita telah berhasil menerapkan peta leaflet dengan fitur GPS Geolokasi di aplikasi Ionic 6 Angular Capacitor. Hasil aplikasi yang telah kita buat cukup sederhana, namun dapat sangat berguna sebagai dasar dari pembuatan aplikasi peta yang memanfaatkan koordinat penanda lokasi perangkat. Geolocation yang sudah kita terapkan juga dapat berfungsi tanpa koneksi internet ataupun gsm, dengan syarat spesifikasi mobile harus sudah memiliki minimal dengan type A-GPS, Galileo atau Glonass.

Terima kasih atas waktunya. Jika anda menghadapi masalah atau saran, silakan tinggalkan komentar di bawah. Kunjungi juga tutorial mengenai ionicframework diblog ini.