Geolokasi Dan Mapbox GL JS - 3

Berikut ini adalah seri tulisan tentang Mengenal Mapbox Maps,

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 😊");	  
 
			

Mau Komen?