Merge pull request #294 from anshori/main

Add openlayers map ui
zuramai · Jun 28, 2024 · e900df1 · e900df1
2 parents e16b828 + 60bc001
commit e900df1
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 0 deletions.
diff --git a/src/assets/static/js/pages/ui-map-openlayers.js b/src/assets/static/js/pages/ui-map-openlayers.js
@@ -0,0 +1,76 @@
+// init map
+var map = new ol.Map({
+	target: 'map',
+	layers: [
+		new ol.layer.Tile({
+			source: new ol.source.OSM()
+		})
+	],
+	view: new ol.View({
+		center: ol.proj.fromLonLat([110.3803253, -7.7945047]),
+		zoom: 12
+	})
+});
+
+// add vector layer
+var vectorLayer = new ol.layer.Vector({
+	source: new ol.source.Vector({
+		features: [
+			new ol.Feature({
+				geometry: new ol.geom.Point(ol.proj.fromLonLat([110.3647631, -7.8013849])),
+				name: 'Yogyakarta, Indonesia'
+			})
+		]
+	})
+});
+
+// set style for vector layer
+vectorLayer.setStyle(new ol.style.Style({
+	image: new ol.style.Icon({
+		anchor: [0.5, 46],
+    anchorXUnits: 'fraction',
+    anchorYUnits: 'pixels',
+		src: 'https://openlayers.org/en/latest/examples/data/icon.png'
+	})
+}));
+
+map.addLayer(vectorLayer);
+
+// popup
+const element = document.getElementById('popup');
+
+const popup = new ol.Overlay({
+  element: element,
+  positioning: 'bottom-center',
+  stopEvent: false,
+});
+map.addOverlay(popup);
+
+let popover;
+function disposePopover() {
+  if (popover) {
+    popover.dispose();
+    popover = undefined;
+  }
+}
+
+// display popup on click
+map.on('click', function (evt) {
+  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+    return feature;
+  });
+  disposePopover();
+  if (!feature) {
+    return;
+  }
+  popup.setPosition(evt.coordinate);
+  popover = new bootstrap.Popover(element, {
+    placement: 'top',
+    html: true,
+    content: feature.get('name'),
+  });
+  popover.show();
+});
+
+// scale line
+map.addControl(new ol.control.ScaleLine());
diff --git a/src/sidebar-items.json b/src/sidebar-items.json
@@ -326,6 +326,10 @@
 			{
 				"name": "Leaflet Map",
 				"url": "ui-map-leaflet.html"
+			},
+			{
+				"name": "OpenLayers Map",
+				"url": "ui-map-openlayers.html"
 			}
     ]
   },

diff --git a/src/ui-map-openlayers.html b/src/ui-map-openlayers.html
@@ -0,0 +1,51 @@
+{% set title = 'OpenLayers Map' %}
+{% set filename = 'ui-map-openlayers.html' %}
+
+{% extends 'src/layouts/master.html' %}
+{% block content %}
+<div class="page-heading">
+	<div class="page-title">
+		<div class="row">
+			<div class="col-12 col-md-6 order-md-1 order-last">
+				<h3>OpenLayers Map</h3>
+				<p class="text-subtitle text-muted">A high-performance, feature-packed library for all your mapping needs.</p>
+			</div>
+			<div class="col-12 col-md-6 order-md-2 order-first">
+				<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
+					<ol class="breadcrumb">
+						<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
+						<li class="breadcrumb-item active" aria-current="page">OpenLayers Map</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+	</div>
+	<section class="section">
+		<div class="row">
+			<div class="col-12">
+				<div class="card">
+					<div class="card-header">
+						<h5 class="card-title">Our Location</h5>
+					</div>
+					<div class="card-body">
+						<div id="map" class="map"><div id="popup"></div></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</div>
+{% endblock %}
+{% block styles %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
+<style>
+	.map {
+		height: 500px;
+		width: 100%;
+	}
+</style>
+{% endblock %}
+{% block js %}
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
+<script src="assets/static/js/pages/ui-map-openlayers.js"></script>
+{% endblock %}