Merge pull request #142 from vsimakhin/feature/openlayers-markers

Feature/openlayers markers
vsimakhin · Apr 29, 2023 · fba535c · fba535c
2 parents 38f5c7a + d80220b
commit fba535c
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## [Unreleased]
+
+- New: A popup with airport infromation once you click on the marker on the `Map` page.
+- Update: The Openlayers library upgraded to the version 7.3.0
+
 ## [2.21.2]
 
 - Fix: added escape function for special html chars when checking for a long remarks field

diff --git a/cmd/web/static/js/ol.js b/cmd/web/static/js/ol.js
diff --git a/cmd/web/static/js/ol.js.map b/cmd/web/static/js/ol.js.map
diff --git a/cmd/web/templates/map-js.partials.gohtml b/cmd/web/templates/map-js.partials.gohtml
@@ -7,10 +7,32 @@ wlbMap = function () {
     var start = moment().startOf('year');
     var end = moment().endOf('year');
 
+    // popup overlay
+    const container = document.getElementById('popup');
+    const content = document.getElementById('popup-content');
+    const closer = document.getElementById('popup-closer');
+
+    const overlay = new ol.Overlay({
+        element: container,
+        autoPan: {
+            animation: {
+            duration: 250,
+            },
+        },
+    });
+
+    function closerOnClick() {
+        overlay.setPosition(undefined);
+        closer.blur();
+        return false;
+    }
+
+    closer.onclick = closerOnClick;
+
+    // loadMap
     async function loadMap(parameters) {
         document.getElementById("map").innerText = "";
         document.getElementById("some_stats").innerText = "Routes: 0\nAirports: 0";
-        document.getElementById("airport_info").innerHTML = "";
 
         var data = await wlbCommon.getJSON("{{index .API "MapData"}}"+parameters);
 
@@ -25,6 +47,7 @@ wlbMap = function () {
                     source: new ol.source.OSM()
                 })
             ],
+            overlays: [overlay],
             view: new ol.View({
                 center: ol.proj.fromLonLat([14.2588996887, 50.3246994019]),
                 zoom: 5
@@ -88,7 +111,7 @@ wlbMap = function () {
                             offsetY: -12,
                             scale: 1.3,
                             fill: new ol.style.Fill({
-                                color: '#black',
+                                color: '#333',
                             })
                         })
                     })
@@ -101,7 +124,8 @@ wlbMap = function () {
                     civil_name: markers[x]["civil_name"],
                     country: markers[x]["country"],
                     city: markers[x]["city"],
-                    elevation: markers[x]["elevation"]
+                    elevation: markers[x]["elevation"],
+                    coordinates: `${markers[x]["point"][1]}, ${markers[x]["point"][0]}`
                 });
 
                 featureMarker.setStyle(iconStyle);
@@ -135,22 +159,25 @@ wlbMap = function () {
 
             // cliked somewhere on the map
             if (!feature) {
-                document.getElementById("airport_info").innerHTML = "";
+                closerOnClick();
                 return;
             }
 
             // clicked but not on the marker
             if (feature.get("name") === undefined) {
-                document.getElementById("airport_info").innerHTML = "";
+                closerOnClick();
                 return;
             }
 
             // show airport/marker info
-            airport_info = `Airport: ${feature.get("name")}<br>`
-            airport_info += `Name: ${feature.get("civil_name")}<br>`
-            airport_info += `Country: ${feature.get("country")}<br>`;
-            airport_info += `Elevation: ${feature.get("elevation")}<br>`;
-            document.getElementById("airport_info").innerHTML = airport_info;
+            const coordinates = feature.getGeometry().getCoordinates();
+            content.innerHTML =
+                '<strong>Airport:</strong> ' + feature.get('name') + '<br>' +
+                '<strong>Name:</strong> ' + feature.get('civil_name') + '<br>' +
+                '<strong>Country:</strong> ' + feature.get('country') + '<br>' +
+                '<strong>Elevation:</strong> ' + feature.get('elevation') + '<br>' +
+                '<strong>Lat/Lon:</strong> ' + feature.get('coordinates') + '<br>';
+            overlay.setPosition(coordinates);
         });
 
         map.on('pointermove', function (e) {

diff --git a/cmd/web/templates/map.page.gohtml b/cmd/web/templates/map.page.gohtml
@@ -9,6 +9,47 @@
         height: 800px;
         width: 100%;
     }
+    .ol-popup {
+        position: absolute;
+        background-color: white;
+        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+        padding: 15px;
+        border-radius: 10px;
+        border: 1px solid #cccccc;
+        bottom: 12px;
+        left: -50px;
+        min-width: 300px;
+    }
+    .ol-popup:after, .ol-popup:before {
+        top: 100%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+    .ol-popup:after {
+        border-top-color: white;
+        border-width: 10px;
+        left: 48px;
+        margin-left: -10px;
+    }
+    .ol-popup:before {
+        border-top-color: #cccccc;
+        border-width: 11px;
+        left: 48px;
+        margin-left: -11px;
+    }
+    .ol-popup-closer {
+        text-decoration: none;
+        position: absolute;
+        top: 2px;
+        right: 8px;
+    }
+    .ol-popup-closer:after {
+        content: "✖";
+    }
 </style>
 {{ end }}
 
@@ -57,15 +98,15 @@
             <div id="some_stats"></div>
         </div>
         <hr>
-        <div class="row">
-            <div id="airport_info"></div>
-        </div>
     </div>
     <div class="col-md-10">
         <div id="map" class="ol-map"></div>
     </div>
 </div>
-
+<div id="popup" class="ol-popup">
+    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+    <div id="popup-content"></div>
+</div>
 {{ end }}
 
 {{ define "js" }}