Mapbox Maps dan Geolokasi - Bagian 3

MAPBOXPETA 3DPETA INDONESIAMAPBOX MAPSMAPBOX MAPS GLGEOLOKASI

Berikut ini adalah seri tulisan tentang Mengenal Mapbox Maps,

  1. Mengenal Mapbox Maps - Bagian 1.

  2. Mapbox Maps dengan Mapbox GL JS V2 - Bagian 2.

  3. Geolokasi Dan Mapbox GL JS - Bagian 3 (tulisan ini).

Geolokasi dan Mapbox GL JS

Mencari koordinat lokasi dengan memakai JavaScript sangatlah mudah

//geolocation
if (!navigator.geolocation) {
    console.log('Geolocation is not supported by your browser');
} else {
    console.log('Locating…');
    navigator.geolocation.getCurrentPosition(success, error);
}

Atur peta untuk lokasi yang baru dengan metode jumpTo()

function success(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(longitude, latitude);
    map.jumpTo({ 
        center: [longitude, latitude], 
        zoom: 17 
    });
}

function error() {
    console.log('Unable to retrieve your location');
}

Demo aplikasi bisa dicoba pada device yang mendukung lokasi secara presisi seperti pada smartphone.

mapbox-geo.netlify.app

demo-mapbox-geo

Untuk menambahkan marker pada posisi lokasi sangatlah mudah

const marker = new mapboxgl.Marker().setLngLat(longLatLike).addTo(map);

kemudian untuk menambahkan info seperti popup pada marker juga sangat mudah, ubah kode diatas menjadi

const popup = new mapboxgl.Popup({ offset: 25 })
                          .setText('Halo there, you are here now 😊');
const el = document.createElement('div');
el.id = 'marker';
const marker = new mapboxgl.Marker()
                           .setLngLat(longLatLike)
                           .setPopup(popup)
                           .addTo(map);

image-20210209181553843

Karena pada dasarnya popup hanyalah HTML dan CSS maka dengan mudah bisa di styling sesuai keinginan.

Jika dinginkan closeButton popup hilang maka dengan mudah atur saja option pada Popup()

const popup = new mapboxgl.Popup({ offset: 25, closeButton: false, closeOnClick: false })
                          .setText('Halo there, you are here now 😊');

Komentar