IMPROVEMENT: map geocodding

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "author": "Tony Air <tony@twma.pro>",
   "license": "MIT",
   "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",

src/js/_components/_ui.map.api.js

@@ -39,7 +39,25 @@ const MapAPI = (($) => {
       ui.map = Drv.init($el, config);
 
       $el.on(Events.MAPLOADED, (e) => {
-        Drv.addGeoJson(config);
+        if (config['geojson']) {
+          console.log(`${NAME}: setting up geocode data`);
+          Drv.addGeoJson(config);
+        } else if (config['address']) {
+          console.log(config['address']);
+          console.log(`${NAME}: setting up address marker`);
+          Drv.geocode(config['address'], (result) => {
+            console.log(result);
+          });
+        } else if (config['lat'] && config['lng']) {
+          console.log(`${NAME}: setting up single lat/lng marker`);
+
+          if (!config['icon']) {
+            config['icon'] = '<i class="fas fa-map-marker-alt"></i>';
+          }
+
+          Drv.addMarker([config['lng'], config['lat']], config);
+        }
+
         console.log(`${NAME}: Map is loaded`);
       });
 

src/js/_components/drivers/_map.google.js

@@ -17,6 +17,7 @@ const GoogleMapsDriver = (($) => {
 
       ui.$el = $el;
       ui.config = config;
+      ui.markers = [];
 
       W[`init${ui.getName()}`] = () => {
         ui.googleApiLoaded();
@@ -27,6 +28,7 @@ const GoogleMapsDriver = (($) => {
 
     googleApiLoaded() {
       const ui = this;
+
       const $el = ui.$el;
       const config = ui.config;
       const $mapDiv = $el.find('.mapAPI-map');
@@ -67,6 +69,7 @@ const GoogleMapsDriver = (($) => {
           '</div>',
       });
 
+      ui.geocoder = new google.maps.Geocoder();
 
 
       $el.trigger(Events.MAPLOADED);
@@ -74,6 +77,7 @@ const GoogleMapsDriver = (($) => {
 
     addMarker(crds, config) {
       const ui = this;
+
       const pos = {
         lat: crds[1],
         lng: crds[0],
@@ -92,6 +96,8 @@ const GoogleMapsDriver = (($) => {
         },
       });
 
+      ui.markers.push(marker);
+
 
       return marker;
     }
@@ -134,6 +140,46 @@ const GoogleMapsDriver = (($) => {
       ui.$el.trigger(Events.MAPPOPUPCLOSE);
     }
 
+    geocode(addr, callback) {
+      const ui = this;
+
+      ui.geocoder.geocode({
+        'address': addr
+      }, (results, status) => {
+        if (status === 'OK') {
+          //results[0].geometry.location;
+
+          if (typeof callback === 'function') {
+            callback(results);
+          }
+
+          return results;
+        } else {
+          console.error(`${ui.getName()}: Geocode was not successful for the following reason: ${status}`);
+        }
+      });
+    }
+
+    reverseGeocode(latLng, callback) {
+      const ui = this;
+
+      ui.geocoder.geocode({
+        'location': latlng
+      }, (results, status) => {
+        if (status === 'OK') {
+          //results[0].formatted_address;
+
+          if (typeof callback === 'function') {
+            callback(results);
+          }
+
+          return results;
+        } else {
+          console.error(`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`);
+        }
+      });
+    }
+
     addGeoJson(config) {
       const ui = this;
 
@@ -181,9 +227,17 @@ const GoogleMapsDriver = (($) => {
     restoreBounds() {
       const ui = this;
 
-      ui.map.fitBounds(ui.default_bounds, {
-        padding: 30,
-      }); //panToBounds
+      if (ui.default_bounds) {
+        ui.map.fitBounds(ui.default_bounds, {
+          padding: 30,
+        }); //panToBounds
+      } else {
+        if (ui.markers[0]) {
+          ui.map.setCenter(ui.markers[0].getPosition());
+        }
+
+        ui.restoreZoom();
+      }
     }
 
     restoreZoom() {

src/scss/_animations.scss

@@ -0,0 +1,18 @@
+// pulse
+.pulse {
+    animation: pulse 0.8s linear infinite;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(0.8);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}

src/scss/_components/_ui.elemental.scss

@@ -35,7 +35,7 @@ h1.page-header {
         }
     }
 
-    // Sidebar elements
+    // Sidebar-like elements
     &.secondary {
         padding: ($grid-gutter-element-height / 2) 0;
     }
@@ -43,6 +43,11 @@ h1.page-header {
 
 .sidebar {
     padding: ($grid-gutter-element-height / 2) 0;
+
+    // Sidebar elements
+    .element {
+        padding: ($grid-gutter-element-height / 2) 0;
+    }
 }
 
 // remove container paddings for the slideshow

src/scss/_components/_ui.main.scss

@@ -1,6 +1,7 @@
 /*
  * some basic styles
  */
+@import "_animations";
 
 // don't let images be wider than the parent layer
 div, a, span, button, i {
@@ -312,25 +313,6 @@ button, input, optgroup, select, textarea,
     }
 }
 
-// pulse
-.pulse {
-    animation: pulse 0.8s linear infinite;
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(0.8);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
 .row, .row-xs {
     > [class^="col-"] > .card {
         height: 100%;

src/scss/_components/_ui.map.scss

@@ -7,20 +7,42 @@
     margin-bottom: 1rem;
 }
 
-.mapboxgl-popup {
-    font-size: .8rem;
-    z-index: 4;
-    line-height: 20px;
-}
+.mapboxgl {
+    &-popup {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        pointer-events: none;
+        font-size: .8rem;
+        z-index: 4;
+        line-height: 20px;
+    }
 
-.mapboxgl-popup-content {
-    min-width: 240px;
-    min-height: 5rem;
-    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
+    &-popup-anchor-bottom,
+    &-popup-anchor-bottom-left,
+    &-popup-anchor-bottom-right {
+        flex-direction: column-reverse;
+    }
 
-    .mapboxgl-popup-close-button {
+    &-popup-content {
+        position: relative;
+        pointer-events: auto;
+        padding: 10px 10px 15px;
+        border-radius: 3px;
+        background: $white;
+        min-width: 240px;
+        min-height: 5rem;
+        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
+    }
+
+    &-popup-close-button {
+        position: absolute;
+        right: 0;
+        top: 0;
         font-size: 2rem;
         padding: .5rem;
+        border-top-right-radius: 3px;
 
         &:hover,
         &:focus {
@@ -28,20 +50,33 @@
             color: $white;
         }
     }
-}
 
-.mapboxgl-marker {
-    width: 30px;
-    height: 30px;
-    font-size: 30px;
-    cursor: pointer;
-    text-align: center;
-    color: $primary;
+    &-popup-tip {
+        width: 0;
+        height: 0;
+        border: 10px solid transparent;
+        z-index: 1;
+    }
 
-    .marker-icon,
-    .fas,
-    .fab,
-    .far {
-        animation: pulse 0.8s linear infinite;
+    &-popup-anchor-bottom &-popup-tip {
+        align-self: center;
+        border-bottom: none;
+        border-top-color: #fff;
+    }
+
+    &-marker {
+        width: 30px;
+        height: 30px;
+        font-size: 30px;
+        cursor: pointer;
+        text-align: center;
+        color: $primary;
+
+        .marker-icon,
+        .fas,
+        .fab,
+        .far {
+            animation: pulse 0.8s linear infinite;
+        }
     }
 }

src/scss/_variables.scss

@@ -35,6 +35,8 @@ $navbar-light-toggler-icon-bg: none !default;
 // IE > 9
 $enable-flex: true !default;
 
+$enable-responsive-font-sizes: true !default;
+
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";