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>dan yang terakhir buat file dengan nama marker.php, simpan di dalam projek yang sudah anda buat kemudian salin kode dibawah ini
<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://4.bp.blogspot.com/-XjraOOVhBpI/VuZqnqPVlrI/AAAAAAAABPQ/u6-6K7CpPhUlY9_DCO01sdqBTM-ho2BCQ/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>
<?phpdisini saya menggunakan Array sebagai penampung datanya, anda bisa menggantinya dengan data dari database jika data yang akan di tampilkan dari database
// 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);
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
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