Menampilkan Marker Dengan Openlayers

Kali ini saya akan share tutorial cara menampilkan marker dengan Openlayers.
marker sendiri berfungsi untuk mengetahui lokasi suatu alamat atau posisi seseorang dalam peta, agar bisa memudahkan untuk di cari.
ok kita langsung ke pembahasan pertama anda harus download terlebih dahulu library dari Openlayers, saya sarankan untuk membaca artikel Menampilkan Peta Dengan Plugin Openlayers terlebih dahulu, karena dalam tutoral tersebut saya sudah jelaskan cara mendownload dan cara menggunakan library dari openlayers, ok langsung saja ke inti pembahasanya.
pertama buatlah projek dengan nama terserah anda lalu buat file dengan nama index.php kemudian salin kode berikut

<!DOCTYPE html>
<html>
<head>
<title>MENAMPILKAN MARKER DENGAN 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');

  // set icon marker
  var icon = new OpenLayers.StyleMap({
   'externalGraphic': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7dX0JG5sYd-NyQSr7d8zOXcSUL8ofM9QVMxw_9azph7YJI_unVLExLao3qAoulIf57FATbCroMq2rFZBYZ11HYbHUR2E5YLZ9-Fp8TAmNFbOo6_YwUj3bDV6lCROEtpFKrsZHhDluvA/s320/merah.png',
   'graphicOpacity': 1.0,
   'graphicWith': 16,
   'graphicHeight': 32,
   'graphicYOffset': -32
  });

  var map = new OpenLayers.Map({
   // div element
   'div': 'map',

   // set center
   'center': new OpenLayers.LonLat(13125273.0316, -237257.9905),

   // set zoom
   'zoom': 5,

   // set layers
   'layers': [osm]
  });

  // set vector marker
  var vector_marker = new OpenLayers.Layer.Vector('Marker', {
   'styleMap': icon,
   'strategies': [new OpenLayers.Strategy.Fixed()],
   'protocol': new OpenLayers.Protocol.HTTP({
    'url': 'marker.php',
    'params': {},
    'format': new OpenLayers.Format.GeoJSON()
   })
  });

  // add to layer
  map.addLayer(vector_marker);
 }
</script>
</head>
<body>
<div id="map" style="width: 1200px; height: 600px;"></div>
</body>
</html>

dan yang terakhir buat file dengan nama marker.php, simpan di dalam projek yang sudah anda buat kemudian salin kode dibawah ini

<?php
 // data marker
 $markers = array(
  array(
   'title'=>'Marker 1',
   'lat'=>'-7.644871999999999',
   'lng'=>'112.90329700000007'
  ),
  array(
   'title'=>'Marker 2',
   'lat'=>'-6.188597',
   'lng'=>'106.58851700000002'
  ),
  array(
   'title'=>'Marker 3',
   'lat'=>'-7.981894',
   'lng'=>'112.62650299999996'
  ),
  array(
   'title'=>'Marker 4',
   'lat'=>'-6.202251',
   'lng'=>'107.001587'
  ),
 );

 // set response
 $response = array(
  'type'=>'FeatureCollection',
  'features'=>array()
 );

 // loop marker
 foreach ($markers as $key=>$val) {
  $title = $val['title'];
  $lat = $val['lat'];
  $lng = $val['lng'];

  // set properties
  $properties = array(
   'title'=>$title
  );

  // push data to features
  array_push($response['features'], array(
   'type'=>'Feature',
   'geometry'=>array(
    'type'=>'Point',
    'coordinates'=>array($lng, $lat)
   ),
   'properties'=>$properties
  ));
 }

 // set response JSON
 header('Content-Type: application/json');
 echo json_encode($response);

disini saya menggunakan Array sebagai penampung datanya, anda bisa menggantinya dengan data dari database jika data yang akan di tampilkan dari database
sekarang coba buka projek yang sudah anda buat dengan browser, dan lihat hasilnya, jika tidak terjasi error maka anda akan mendapatkan tampilan peta dengan marker yang sudah anda tentukan Latitude dan Longitude nya
Ok, sampai disini dulu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat

Berbagi Via

Jangan lupa tinggalkan komentarnya ya :)

2 comments:

UnknownJuly 7, 2019 at 1:36 AM
kalo versi yang dari databasenya gmn ya ?
ReplyDelete
Replies
foosiNovember 3, 2019 at 5:22 AM
boleh tunjuk cara nak menampilkan marker dari database mysql?
ReplyDelete
Replies

Add comment