Cara Share Lokasi Di Opanlayers
Kalau tadi saya share cara share lokasi di google maps kali ini saya akan share tutorial cara share lokasi di openlayers, selain google maps openlayers juga menyediakan share koordinat.
bedanya kalau google memerlukan plugin lagi, sedangkan openlayers sudah satu paket di dalam folder, untuk dapat menggunakan openlayers saya sudah share dalam tutorial sebelumnya yaitu Cara menampilkan peta dengan library openlayers, bagi anda yang belum mendownload library nya saya sarankan untuk membaca artikel tersebut.
jika anda sudah mendownload plugin dari openlayers, sekarang buat projek dengan nama terserah anda lalu salin folder openlayers-2.12 ke dalam projek yang sudah anda buat, setelah itu buat file dengan nama index.php kemudian salin kode berikut
<!DOCTYPE html>selelah itu buka projek yang sudah anda buat, jika tidak terjadi error maka anda akan mendapatkan tampilan dengan peta indonesia, dan ketika button share lokasi diklik maka anda akan mendapatkan pesan persetujuan di pojok kanan atas, jika anda pilih izinkan maka openlayer akan mengakses lokasi anda
<html>
<head>
<title>SHARE LOKASI DI OPENLAYERS</title>
<script type="text/javascript" src="openlayers-2.12/openlayers.js"></script>
<script type="text/javascript">
window.onload = function() {
// set layer
var osm = new OpenLayers.Layer.OSM('OSM');
var map = new OpenLayers.Map({
// div element
'div': 'maps',
// set center
'center': new OpenLayers.LonLat(13125273.0316, -237257.9905),
// set zoom
'zoom': 4,
// set layers
'layers': [osm]
});
var marker = new OpenLayers.Layer.Markers('marker');
map.addLayer(marker);
// add event ketika button di klik
document.getElementsByTagName('button')[0].addEventListener('click', function() {
navigator.geolocation.getCurrentPosition(function(response) {
var pos = new OpenLayers.LonLat(response.coords.longitude, response.coords.latitude).transform(
new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()
);
var size = new OpenLayers.Size(32, 32);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('https://4.bp.blogspot.com/-XjraOOVhBpI/VuZqnqPVlrI/AAAAAAAABPQ/u6-6K7CpPhUlY9_DCO01sdqBTM-ho2BCQ/s320/merah.png', size, offset);
marker.addMarker(new OpenLayers.Marker(pos, icon));
map.setCenter(pos, 16);
});
});
}
</script>
</head>
<body>
<div id="maps" style="width: 600px; height: 400px; background-color: #EEE"></div>
<button>SHARE LOKASI</button>
</body>
</html>
Ok sampai disini dulu turorial kali ini, selamat mencoba dan semoga bisa bermanfaat
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.
Postingan Lebih Baru
Postingan Lebih Baru
Postingan Lama
Postingan Lama
Komentar