From 11c76f75d6926d3189425b5223b61bbd04fe9871 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Wed, 18 Dec 2019 00:05:46 +0700 Subject: [PATCH] IMPROVEMENT: map geocodding --- package.json | 2 +- src/js/_components/_ui.map.api.js | 20 +++++- src/js/_components/drivers/_map.google.js | 60 ++++++++++++++++- src/scss/_animations.scss | 18 +++++ src/scss/_components/_ui.elemental.scss | 7 +- src/scss/_components/_ui.main.scss | 20 +----- src/scss/_components/_ui.map.scss | 81 ++++++++++++++++------- src/scss/_variables.scss | 2 + 8 files changed, 162 insertions(+), 48 deletions(-) create mode 100755 src/scss/_animations.scss diff --git a/package.json b/package.json index b8dfff4..e630111 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate", - "version": "1.3.5", + "version": "1.3.7", "author": "Tony Air ", "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.", diff --git a/src/js/_components/_ui.map.api.js b/src/js/_components/_ui.map.api.js index 80e37aa..52abb06 100755 --- a/src/js/_components/_ui.map.api.js +++ b/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'] = ''; + } + + Drv.addMarker([config['lng'], config['lat']], config); + } + console.log(`${NAME}: Map is loaded`); }); diff --git a/src/js/_components/drivers/_map.google.js b/src/js/_components/drivers/_map.google.js index 3731659..5322ed9 100755 --- a/src/js/_components/drivers/_map.google.js +++ b/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 = (($) => { '', }); + 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() { diff --git a/src/scss/_animations.scss b/src/scss/_animations.scss new file mode 100755 index 0000000..037b9c6 --- /dev/null +++ b/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); + } +} diff --git a/src/scss/_components/_ui.elemental.scss b/src/scss/_components/_ui.elemental.scss index b17472c..8910dca 100755 --- a/src/scss/_components/_ui.elemental.scss +++ b/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 diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss index 868d0a7..9469647 100755 --- a/src/scss/_components/_ui.main.scss +++ b/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%; diff --git a/src/scss/_components/_ui.map.scss b/src/scss/_components/_ui.map.scss index e04b7aa..b032168 100755 --- a/src/scss/_components/_ui.map.scss +++ b/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; + } } } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 7f930c3..6357cc8 100755 --- a/src/scss/_variables.scss +++ b/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";