Cara Share Lokasi Di Opanlayers - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Cara Share Lokasi Di Opanlayers, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Openlayers, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Share Lokasi Di Opanlayers
link : Cara Share Lokasi Di Opanlayers

Baca juga


Cara Share Lokasi Di Opanlayers

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>
<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>
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
Ok sampai disini dulu turorial kali ini, selamat mencoba dan semoga bisa bermanfaat


Demikianlah Artikel Cara Share Lokasi Di Opanlayers

Sekianlah artikel Cara Share Lokasi Di Opanlayers kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Share Lokasi Di Opanlayers dengan alamat link https://dev-create.blogspot.com/2019/07/cara-share-lokasi-di-opanlayers.html