Merge pull request #51 from cwhelchel/dev

cwhelchel · web-flow · commit 95a609394bb3 · 2024-11-22T22:14:38.000-05:00
Add zoom to position button
diff --git a/controls/BugReportControl.js b/controls/BugReportControl.js
@@ -9,17 +9,13 @@ export class BugReportControl extends Control {
     constructor(opt_options) {
         const options = opt_options || {};
 
-        //const button = document.createElement('button');
-        
-        const link = document.createElement('a');
-        link.innerHTML = '⚠️';
-        link.title = 'Report error on Github';
-        link.href = "https://github.com/cwhelchel/potamap.ol/issues";
-        link.target = "_blank";
+        const btn = document.createElement('button');
+        btn.innerHTML = '<a title="Report error on Github" href="https://github.com/cwhelchel/potamap.ol/issues" target="_blank">⚠️</a>'
+        btn.className = 'btn';
 
         const element = document.createElement('div');
         element.className = 'bug-rpt-control ol-unselectable ol-control';
-        element.appendChild(link);
+        element.appendChild(btn);
 
         super({
             element: element,
diff --git a/controls/InfoControl.js b/controls/InfoControl.js
diff --git a/controls/TileLayerControl.js b/controls/TileLayerControl.js
diff --git a/controls/ZoomToPosControl.js b/controls/ZoomToPosControl.js
@@ -0,0 +1,37 @@
+"use strict";
+
+import { Control } from 'ol/control.js';
+import Geolocation from 'ol/Geolocation.js';
+
+export class ZoomToPosControl extends Control {
+    /**
+     * @param {Object} [opt_options] Control options.
+     */
+    constructor(opt_options) {
+        const options = opt_options || {};
+
+        const btn = document.createElement('button');
+        btn.innerHTML = '🎯'
+        btn.className = 'btn';
+        btn.title = 'Zoom to your position';
+
+        const element = document.createElement('div');
+        element.className = 'zoom-pos-control ol-unselectable ol-control';
+        element.appendChild(btn);
+
+        super({
+            element: element,
+            target: options.target,
+        });
+
+        this.callback = opt_options;
+
+        btn.addEventListener('click', this.handleButtonClick.bind(this), false);
+    }
+
+    handleButtonClick() {
+
+        if (this.callback)
+            this.callback();
+    }
+}
diff --git a/getGeolocationLayer.js b/getGeolocationLayer.js
@@ -6,13 +6,16 @@ import Feature from 'ol/Feature';
 import Point from 'ol/geom/Point';
 import Geolocation from 'ol/Geolocation.js';
 
+export var currentPosition;
+
 /*
   Gets a layer to be added to the map with the browsers geolocation data.
   The layer will display a position point and an accuracy "ring".
 
   projection should be from the maps view, ala: view.getProjection()
 */
 export function getGeolocationLayer(projection) {
+    //currentPosition = [-152.404, 61.3707];
 
     const geolocation = new Geolocation({
         // enableHighAccuracy must be set to true to have the heading value.
@@ -48,6 +51,7 @@ export function getGeolocationLayer(projection) {
 
     geolocation.on('change:position', function () {
         const coordinates = geolocation.getPosition();
+        currentPosition = coordinates;
         positionFeature.setGeometry(coordinates ? new Point(coordinates) : null);
     });
 
diff --git a/index.css b/index.css
@@ -43,13 +43,39 @@
 }
 
 /* 
-    on click popup
+    feature/shape onClick popover
 */
 
-.shapeProps {
+.popover-body {
+    --bs-popover-body-padding-x: 0.75rem;
+    --bs-popover-body-padding-y: 0.50rem;
+}
+
+.shape-popover {
     font-size: 0.75em;
 }
 
+.shape-popover .shape-name {
+    text-align: center;
+    font-size: 1.09em;
+    margin-bottom: 3px;
+}
+
+.shape-popover .shape-props {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.shape-popover .shape-prop {
+    margin: 0px 5px;
+    padding: 0px 5px;
+    border: 1px;
+    border-style: dotted;
+    border-radius: 5px;
+    color: rgba(var(--bs-secondary-rgb), 0.75);
+}
+
 .hoverTitle {
     margin-left: 30px;
     text-overflow: ellipsis;
@@ -104,49 +130,93 @@
 
 .info-control {
     left: .5em;
+    min-width: 24px;
     font-size: 1.0em;
+    background-color: var(--ol-background-color);
 }
 
 .bug-rpt-control {
     left: .5em;
     font-size: 1.0em;
+    min-width: 24px;
     background-color: var(--ol-background-color);
 }
 
 .toggle-layer-control {
     left: .5em;
     font-size: 1.0em;
-    background-color: var(--ol-background-color);;
+    min-width: 24px;
+    background-color: var(--ol-background-color);
+}
+
+.zoom-pos-control {
+    left: .5em;
+    font-size: 1.0em;
+    min-width: 24px;
+    background-color: var(--ol-background-color);
 }
 
+
 @media only screen and (max-width: 600px) {
+
     /* 
     PHONE SCREENS 
     */
     .info-control {
-        top: 100px;
+        /* top: 100px; */
+        top: auto;
+        bottom: 25px;
+        left: 5px;
     }
+
     .bug-rpt-control {
-        top: 145px;
+        /* top: 145px; */
+        top: auto;
+        left: auto;
+        right: 5px;
+        bottom: 25px;
     }
+
     .toggle-layer-control {
-        top: 175px;
+        top: 100px;
+    }
+
+    .zoom-pos-control {
+        top: 145px;
+    }
+
+    .footer span {
+        text-wrap: nowrap;
+    }
+
+    .footer-text-r {
+        text-align: left;
     }
 }
 
 
 @media only screen and (min-width: 600px) {
+
     /* 
     MEDIUM SCREENS 
     */
     .info-control {
-        top: 100px;
+        top: auto;
+        bottom: 45px;
+        left: 45px;
     }
+
     .bug-rpt-control {
-        top: 145px;
+        top: auto;
+        bottom: 45px;
     }
+
     .toggle-layer-control {
-        top: 175px;
+        top: 75px;
+    }
+
+    .zoom-pos-control {
+        top: 110px;
     }
 }
 
@@ -156,13 +226,22 @@
     */
 
     .info-control {
-        top: 75px;
+        top: auto;
+        bottom: 10px;
+        left: 45px;
     }
+
     .bug-rpt-control {
-        top: 110px;
+        top: auto;
+        bottom: 10px;
     }
+
     .toggle-layer-control {
-        top: 145px;
+        top: 75px;
+    }
+
+    .zoom-pos-control {
+        top: 110px;
     }
 }
 
diff --git a/main.js b/main.js
@@ -15,10 +15,11 @@ import LayerSwitcher from 'ol-layerswitcher';
 import { defaultStyle, initLayers } from './BoundaryLayers.js'
 import StaticData from './StaticData.js'
 import { getParkLocation, getParkLastActx } from './PotaApi.js'
-import { getGeolocationLayer } from './getGeolocationLayer.js';
-import { InfoControl } from './InfoControl.js'
-import { BugReportControl } from './BugReportControl.js';
-import { TileLayerControl } from './TileLayerControl.js';
+import { currentPosition, getGeolocationLayer } from './getGeolocationLayer.js';
+import { InfoControl } from './controls/InfoControl.js'
+import { BugReportControl } from './controls/BugReportControl.js';
+import { TileLayerControl } from './controls/TileLayerControl.js';
+import { ZoomToPosControl } from './controls/ZoomToPosControl.js';
 
 const selectStyle = new Style({
     fill: new Fill({
@@ -80,18 +81,17 @@ const map = new Map({
     title: 'Map',
     type: 'base',
     view: view,
-    controls: defaultControls().extend([new InfoControl(), new BugReportControl(), new TileLayerControl(handleLayerSwitchCallback)])
+    controls: defaultControls().extend([new InfoControl(), new BugReportControl(), new TileLayerControl(handleLayerSwitchCallback), new ZoomToPosControl(zoomToPosition)])
 });
 
-
 // add layer and source for GPS position
 const geolocLayer = getGeolocationLayer(view.getProjection());
 
 map.addLayer(geolocLayer);
 
 // add our layer switcher component
 var layerSwitcher = new LayerSwitcher({
-    startActive: true,
+    startActive: false,
     activationMode: 'click',
     groupSelectStyle: 'children',
     reverse: false // this logic is backwards-af
@@ -147,16 +147,23 @@ map.on('click', function (evt) {
         let name = f.get('NAME'); // should ALWAYS be there 
         let title = f.get('TITLE'); // will be there for pota parks
         let res = "";
+        let shapeTitle = '';
 
         // from a shapefile. use its properties as they provide way more info
         if (title === undefined) {
             let p = f.getProperties();
             for (var property in p) {
                 if (typeof (p[property]) == "string") {
-                    res += `${property} : ${p[property]} <br/>`;
+                    if (property ==="NAME") {
+                        shapeTitle = `<div class="shape-name">${p["NAME"]}</div>`;
+                        continue;
+                    }
+                    res += `<div class="shape-prop">${property} : ${p[property]}</div>`;
                 }
             }
-            res = `<span class="shapeProps">${res}</span>`
+
+            let propsDiv = `<div class="shape-props">${res}</div>`
+            res = `<div class="shape-popover">${shapeTitle}${propsDiv}</div>`
         }
         else {
             // from POTA park markers. get and display POTA specific info
@@ -206,6 +213,15 @@ function showLocLayerGroup(inVal) {
     }
 }
 
+$(document).ready( function() {
+    if (localStorage.getItem('locSelectVal') !== undefined) { 
+        const x = localStorage.getItem('locSelectVal');
+        console.log(x);
+        $('#locSelect').val(x);
+        showLocLayerGroup(x);
+    }
+} );
+
 $('#parkBtn').click(function () {
     const input = $('#parkTxt').val();
     let loc = getParkLocation(input);
@@ -223,6 +239,7 @@ $('#parkTxt').keypress(function (event) {
 });
 
 $('#locSelect').on("change", function () {
+    localStorage.setItem('locSelectVal', this.value);
     showLocLayerGroup(this.value);
 });
 
@@ -235,6 +252,15 @@ function zoomToLocation(locId) {
     map.getView().animate({ zoom: zoom, center: fromLonLat([lon, lat]) });
 }
 
+function zoomToPosition() {
+    const coordinates = currentPosition;
+    if (coordinates !== undefined && coordinates !== null) {
+        let zoom = 10;
+        let c = fromLonLat(coordinates);
+        map.getView().animate({ zoom: zoom, center: c});
+    } 
+}
+
 function scrollToLayGroupInPanel(locId) {
     var container = $("div.panel");
     var element = $("label:contains('" + locId + "')");
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "serve": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   },
   "dependencies": {
     "ol": "latest",
