From 6c3f82715dfee72db6849515a0d5de72c37e0634 Mon Sep 17 00:00:00 2001 From: anshori Date: Wed, 29 May 2024 10:11:35 +0700 Subject: [PATCH 1/4] add leaflet map ui --- src/assets/static/js/pages/ui-map-leaflet.js | 41 +++++++++++++++ src/sidebar-items.json | 6 ++- src/ui-map-leaflet.html | 53 ++++++++++++++++++++ 3 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/assets/static/js/pages/ui-map-leaflet.js create mode 100644 src/ui-map-leaflet.html diff --git a/src/assets/static/js/pages/ui-map-leaflet.js b/src/assets/static/js/pages/ui-map-leaflet.js new file mode 100644 index 000000000..857f6126e --- /dev/null +++ b/src/assets/static/js/pages/ui-map-leaflet.js @@ -0,0 +1,41 @@ +// init map +var map = L.map('map', { + center: [-7.7945047, 110.3803253], + zoom: 12 +}); + +// set map tiles source +var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: 'Map data © OpenStreetMap contributors', + maxZoom: 18 +}); + +var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { + attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' +}); + +// add tiles to map +osm.addTo(map); + +// add marker +var marker = L.marker([-7.8013849, 110.3647631]); +marker.addTo(map) + .bindPopup('Yogyakarta, Indonesia') + .openPopup(); + +// scale bar +L.control.scale({ + imperial: false +}).addTo(map); + +// add layer control +var baseMaps = { + "OSM": osm, + "Esri World Imagery": Esri_WorldImagery +}; + +var overlayMaps = { + "Marker": marker +}; + +L.control.layers(baseMaps, overlayMaps).addTo(map); diff --git a/src/sidebar-items.json b/src/sidebar-items.json index bfd238889..fa13fe5b6 100644 --- a/src/sidebar-items.json +++ b/src/sidebar-items.json @@ -322,7 +322,11 @@ { "name": "JS Vector Map", "url": "ui-map-jsvectormap.html" - } + }, + { + "name": "Leaflet Map", + "url": "ui-map-leaflet.html" + } ] }, { diff --git a/src/ui-map-leaflet.html b/src/ui-map-leaflet.html new file mode 100644 index 000000000..6f2da3a72 --- /dev/null +++ b/src/ui-map-leaflet.html @@ -0,0 +1,53 @@ +{% set title = 'Leaflet Map' %} +{% set filename = 'ui-map-leaflet.html' %} + +{% extends 'src/layouts/master.html' %} +{% block content %} +
+
+
+
+

Leaflet Map

+

an open-source JavaScript library for mobile-friendly interactive maps.

+
+
+ +
+
+
+
+
+
+
+
+
Our Location
+
+
+
+
+
+
+
+
+
+{% endblock %} +{% block styles %} + + +{% endblock %} +{% block js %} + + +{% endblock %} \ No newline at end of file From 2b67d1be378acc5ea825fc7edfbe44dc6224ff94 Mon Sep 17 00:00:00 2001 From: anshori Date: Wed, 29 May 2024 20:21:40 +0700 Subject: [PATCH 2/4] add openlayers map ui --- .../static/js/pages/ui-map-openlayers.js | 76 +++++++++++++++++++ src/sidebar-items.json | 4 + src/ui-map-openlayers.html | 51 +++++++++++++ 3 files changed, 131 insertions(+) create mode 100644 src/assets/static/js/pages/ui-map-openlayers.js create mode 100644 src/ui-map-openlayers.html diff --git a/src/assets/static/js/pages/ui-map-openlayers.js b/src/assets/static/js/pages/ui-map-openlayers.js new file mode 100644 index 000000000..39cbeb8ad --- /dev/null +++ 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()); \ No newline at end of file diff --git a/src/sidebar-items.json b/src/sidebar-items.json index fa13fe5b6..f3c7649a4 100644 --- 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 new file mode 100644 index 000000000..b3a2c3349 --- /dev/null +++ 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 %} +
+
+
+
+

OpenLayers Map

+

A high-performance, feature-packed library for all your mapping needs.

+
+
+ +
+
+
+
+
+
+
+
+
Our Location
+
+
+
+
+
+
+
+
+
+{% endblock %} +{% block styles %} + + +{% endblock %} +{% block js %} + + +{% endblock %} \ No newline at end of file From c8aec3b8c2c3fcff146b919dee74c798d532533c Mon Sep 17 00:00:00 2001 From: anshori Date: Sun, 2 Jun 2024 16:21:47 +0700 Subject: [PATCH 3/4] Revert "add openlayers map ui" This reverts commit 2b67d1be378acc5ea825fc7edfbe44dc6224ff94. --- .../static/js/pages/ui-map-openlayers.js | 76 ------------------- src/sidebar-items.json | 4 - src/ui-map-openlayers.html | 51 ------------- 3 files changed, 131 deletions(-) delete mode 100644 src/assets/static/js/pages/ui-map-openlayers.js delete mode 100644 src/ui-map-openlayers.html diff --git a/src/assets/static/js/pages/ui-map-openlayers.js b/src/assets/static/js/pages/ui-map-openlayers.js deleted file mode 100644 index 39cbeb8ad..000000000 --- a/src/assets/static/js/pages/ui-map-openlayers.js +++ /dev/null @@ -1,76 +0,0 @@ -// 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()); \ No newline at end of file diff --git a/src/sidebar-items.json b/src/sidebar-items.json index f3c7649a4..fa13fe5b6 100644 --- a/src/sidebar-items.json +++ b/src/sidebar-items.json @@ -326,10 +326,6 @@ { "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 deleted file mode 100644 index b3a2c3349..000000000 --- a/src/ui-map-openlayers.html +++ /dev/null @@ -1,51 +0,0 @@ -{% set title = 'OpenLayers Map' %} -{% set filename = 'ui-map-openlayers.html' %} - -{% extends 'src/layouts/master.html' %} -{% block content %} -
-
-
-
-

OpenLayers Map

-

A high-performance, feature-packed library for all your mapping needs.

-
-
- -
-
-
-
-
-
-
-
-
Our Location
-
-
-
-
-
-
-
-
-
-{% endblock %} -{% block styles %} - - -{% endblock %} -{% block js %} - - -{% endblock %} \ No newline at end of file From 60bc001e8bcfcce50260c35f4d8ba1ac536c26d7 Mon Sep 17 00:00:00 2001 From: anshori Date: Sun, 2 Jun 2024 16:36:14 +0700 Subject: [PATCH 4/4] add openlayers map ui --- .../static/js/pages/ui-map-openlayers.js | 76 +++++++++++++++++++ src/sidebar-items.json | 4 + src/ui-map-openlayers.html | 51 +++++++++++++ 3 files changed, 131 insertions(+) create mode 100644 src/assets/static/js/pages/ui-map-openlayers.js create mode 100644 src/ui-map-openlayers.html diff --git a/src/assets/static/js/pages/ui-map-openlayers.js b/src/assets/static/js/pages/ui-map-openlayers.js new file mode 100644 index 000000000..39cbeb8ad --- /dev/null +++ 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()); \ No newline at end of file diff --git a/src/sidebar-items.json b/src/sidebar-items.json index fa13fe5b6..f3c7649a4 100644 --- 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 new file mode 100644 index 000000000..b3a2c3349 --- /dev/null +++ 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 %} +
+
+
+
+

OpenLayers Map

+

A high-performance, feature-packed library for all your mapping needs.

+
+
+ +
+
+
+
+
+
+
+
+
Our Location
+
+
+
+
+
+
+
+
+
+{% endblock %} +{% block styles %} + + +{% endblock %} +{% block js %} + + +{% endblock %} \ No newline at end of file