Sebelum nya kita sering menggunakan google map api untuk menampilkan peta di website atau di aplikasi karena saat itu masih gratis tanpa key access..
namun sudah sejak tahun sekian Google mengubah kebijakannya sehingga untuk menampilkan map secara public harus menggunakan API key.. masih dikasih gratis sih untuk 1000 API request per key kalo gak salah..
Atau kalau mau sederhana, kita bisa menggunakan fitur embed saja.. namun terkadang kita membutuhkan kustomisasi.. minimal untuk menyesuaikan style dengan website/app theme kita..
ada beberapa map API gratis (open source) yang bisa digunakan seperti Leaflet dll.. namun kali ini saya mencoba menggunakan Openlayers..
Openlayers merupakan lower level API, memang kita akan lebih banyak menulis codes nya, namun bisa lebih leluasa untuk melakukan kustomisasi.. kita bisa gunakan nodejs atau dengan platform biasa.. dan saya disini ini hanya menggunakan platform pada umumnya saja.. Dan yang mau saya share adalah sebatas untuk menambah map marker sederhana pada peta..
Pertama kita gunakan library scripts yang dibutuhkan seperti ini:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Map marker menggunakan Openlayers</title>
<!-- Pointer events polyfill untuk old browsers, lihat https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<!-- Hanya dibutuhkan untuk browser seperti Internet Explorer dan Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
<!-- Style Bootstrap 4.6 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- css style bawaan dari openlayers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css"/>
</head>
<body>
<div id="map" style="width:100%;height:100%;position:fixed;top:0;left:0"><div id="popup"></div></div>
<!-- Script jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Script Bootstrap 4.6 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Script dari openlayers -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>Untuk membuat titik koordinat dengan map marker yang sesuai dengan keinginan:
var Icon = ol.style.Icon,
Style = ol.style.Style;
// Untuk menentukan koordinat marker nya
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([106.817208,-6.239169])
),
text: '<b>@reggarantai</b><br>---<br>Tendean Square<br><small>Jakarta Selatan</small>'
});
// Memilih & menampilkan marker yang diinginkan
// anchor adalah posisi marker terhadap koordinat
// disini anchorXUnits & anchorYUnits menggunakan satuan pixel
var iconStyle = new Style({
image: new Icon({
anchor: [40, 40],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
//src: 'https:///contoh.com/uri/misal-gambar.png',
src: 'assets/images/marker.png',
}),
});
// Memasang marker terhadap koordinat
iconFeature.setStyle(iconStyle);Kemudian kita buat layer berserta source nya.. utk layer kita gunakan vector dan source nya berupa features..
// Membuat source untuk vector layer
var vectorSource = new ol.source.Vector({
features: [iconFeature],
});
// Membuat vector layer untuk dipasang pada peta
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
});Untuk peta dasar nya, disini menggunakan peta dasar dari map Esri:
// Membuat peta dasar dari Esri Map
var baseMap = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions:
'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
url:
'https://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
})
});Setelah itu kita buat map nya.. Set koordinat tengah nya kemudian tambahkan layers (peta dasar & point) yang telah kita buat sebelumnya..
// Membuat peta
// target adalah id attribute dari html elemen
// view adalah container untuk peta
// center merupakan posisi tengah dari peta
var map = new ol.Map({
target: 'map',
layers: [
baseMap,
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([106.817208,-6.236569]),
zoom: 15
})
});Selanjutnya marker/icon/symbol tersebut bisa kita kasih keterangan tambahan dalam sebuah popup ketika di klik..
// Untuk membuat popup info saat popup di klik
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -45],
});
map.addOverlay(popup);
// display popup on click
map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
$(element).popover({
placement: 'top',
html: true,
content: feature.get('text'),
});
$(element).popover('show');
} else {
$(element).popover('dispose');
}
});Atau kita juga bisa jadikan marker/icon/symbol nya sebagai tautan agar ketika di klik, maka akan ke url yang dikehendaki..
// Untuk menjadikan marker sebagai tautan
map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
//window.open("https://contoh.com/uri/link-ke-sesuatu/");
window.open("https://regga.id/coding/membuat-peta-dengan-custom-map-marker-menggunakan-openlayers/");
}
});Script dengan map marker sebagai tautan seperti ini yang saya pasang di reggarantai.com/contact
Ya ini hanya dasar saja yang paling sederhana, bisa dikembangkan lagi untuk kebutuhan lainnya.. Untuk melihat script utuhnya bisa cek di github.com/reggarantai/map-marker-menggunakan-openlayers
Semoga ada manfaatnya ya..
Wassalaamu’alaikum..
