Merge pull request #190 from jcachuryb/master

Map Pop up attempt center

parkstay/frontend/searchavail2/src/components/parkfinder.vue

@@ -1136,8 +1136,7 @@ export default {
     .mapPopup {
         position: absolute;
         background-color: white;
-        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
-        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
         padding: 15px;
         border-radius: 10px;
         border: 1px solid #cccccc;

parkstay/frontend/searchavail2/src/components/searchCarousel/SearchCarousel.vue

@@ -580,54 +580,6 @@ export default {
         left: 50%;
     }
 
-    .mapPopup {
-        position: absolute;
-        background-color: white;
-        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
-        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
-        padding: 15px;
-        border-radius: 10px;
-        border: 1px solid #cccccc;
-        bottom: 32px;
-        left: -140px;
-        width: 280px;
-    }
-
-    .mapPopup:after,
-    .mapPopup:before {
-        top: 100%;
-        border: solid transparent;
-        content: " ";
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-    }
-
-    .mapPopup:after {
-        border-top-color: white;
-        border-width: 10px;
-        left: 138px;
-        margin-left: -10px;
-    }
-
-    .mapPopup:before {
-        border-top-color: #cccccc;
-        border-width: 11px;
-        left: 138px;
-        margin-left: -11px;
-    }
-
-    .mapPopupClose {
-        text-decoration: none;
-        position: absolute;
-        top: 2px;
-        right: 8px;
-    }
-
-    .mapPopupClose:after {
-        content: "✖";
-    }
 
     .searchTitle {
         font-size: 150%;

parkstay/frontend/searchavail2/src/utils/map_init_mount.js

@@ -311,9 +311,13 @@ export default function (vm) {
     vm.popupContent = document.getElementById('mapPopupContent');
     vm.popup = new ol.Overlay({
         element: document.getElementById('mapPopup'),
-        autoPan: true,
-        autoPanAnimation: {
-            duration: 250,
+        offset: [0, 0],
+        positioning: 'center-center',
+        autoPan: {
+            margin: 8,
+            animation: {
+                duration: 1000,
+            },
         },
     });
 
@@ -398,10 +402,14 @@ export default function (vm) {
             async function (feature, layer) {
                 vm.popup.setPosition(undefined); // resets popup
                 vm.selectedFeature = feature;
+                var zoom_level = $('#zoom_level').val();
 
                 const coord = feature.getGeometry().getCoordinates();
                 const view = vm.olmap.getView();
-                let resolution = view.getResolution();
+                let resolution = vm.resolutions[10];
+                if (zoom_level > 0) {
+                    resolution = vm.resolutions[zoom_level];
+                }
                 // really want to make vue.js render this, except reactivity dies
                 // when you pass control of the popup element to OpenLayers :(
                 $('#mapPopupName')[0].innerHTML = feature.get('name');
@@ -495,16 +503,20 @@ export default function (vm) {
                             feature.getId()
                     );
                 }
-                // makes sure the 
-                setTimeout(()=> {
+                setTimeout(() => {
+                    view.animate(
+                        {
+                            center: coord,
+                            resolution: resolution,
+                            duration: 1000,
+                        }
+                    );
+                    return true;
+                }, 300);
+                setTimeout(() => {
                     vm.popup.setPosition(coord);
-                    view.animate({
-                        center: coord,
-                        resolution: resolution,
-                        duration: 1000,
-                    });
                     return true;
-                }, 300)
+                }, 1300);
             },
             {
                 layerFilter: function (layer) {