UI.Maps API update: Google Maps and Mapbox support including fontawesome pins

dist/css/main.css

@@ -16215,5 +16215,656 @@ body {
   }
 }
 
+.mapboxgl-map {
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    overflow: hidden;
+    position: relative;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    text-align: left;
+}
+
+.mapboxgl-map:-webkit-full-screen {
+    width: 100%;
+    height: 100%;
+}
+
+.mapboxgl-canary {
+    background-color: salmon;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive,
+.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass {
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+    cursor: pointer;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass:active {
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+    touch-action: pan-x pan-y;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+    touch-action: pinch-zoom;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+    touch-action: none;
+}
+
+.mapboxgl-ctrl-top-left,
+.mapboxgl-ctrl-top-right,
+.mapboxgl-ctrl-bottom-left,
+.mapboxgl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
+.mapboxgl-ctrl-top-left     { top: 0; left: 0; }
+.mapboxgl-ctrl-top-right    { top: 0; right: 0; }
+.mapboxgl-ctrl-bottom-left  { bottom: 0; left: 0; }
+.mapboxgl-ctrl-bottom-right { right: 0; bottom: 0; }
+
+.mapboxgl-ctrl {
+    clear: both;
+    pointer-events: auto;
+
+    /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */
+    transform: translate(0, 0);
+}
+.mapboxgl-ctrl-top-left .mapboxgl-ctrl     { margin: 10px 0 0 10px; float: left; }
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl    { margin: 10px 10px 0 0; float: right; }
+.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl  { margin: 0 0 10px 10px; float: left; }
+.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 10px 10px 0; float: right; }
+
+.mapboxgl-ctrl-group {
+    border-radius: 4px;
+    background: #fff;
+}
+
+.mapboxgl-ctrl-group:not(:empty) {
+    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+.mapboxgl-ctrl-group > button {
+    width: 30px;
+    height: 30px;
+    display: block;
+    padding: 0;
+    outline: none;
+    border: 0;
+    box-sizing: border-box;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.mapboxgl-ctrl-group > button + button {
+    border-top: 1px solid #ddd;
+}
+
+/* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
+.mapboxgl-ctrl > button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+.mapboxgl-ctrl-group > button:focus {
+    box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
+}
+
+.mapboxgl-ctrl > button:not(:disabled):hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.mapboxgl-ctrl-group > button:focus:focus-visible {
+    box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
+}
+
+.mapboxgl-ctrl-group > button:focus:not(:focus-visible) {
+    box-shadow: none;
+}
+
+.mapboxgl-ctrl-group > button:focus:first-child {
+    border-radius: 4px 4px 0 0;
+}
+
+.mapboxgl-ctrl-group > button:focus:last-child {
+    border-radius: 0 0 4px 4px;
+}
+
+.mapboxgl-ctrl-group > button:focus:only-child {
+    border-radius: inherit;
+}
+
+.mapboxgl-ctrl-icon,
+.mapboxgl-ctrl-icon > .mapboxgl-ctrl-compass-arrow {
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.mapboxgl-ctrl-icon {
+    padding: 5px;
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-icon-disabled {
+    opacity: 0.25;
+    border-color: #373737;
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23333333;' d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23333333;' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z'/%3E %3C/svg%3E");
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate:disabled::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M14.434,7.688c0.213,0.407 0.371,0.848 0.466,1.312l0.1,0c0,0 1,0 1,1c0,1 -1,1 -1,1l-0.1,0c-0.4,1.96 -1.94,3.5 -3.9,3.9l0,0.1c0,0 0,1 -1,1c-1,0 -1,-1 -1,-1l0,-0.1c-0.477,-0.097 -0.93,-0.262 -1.347,-0.484c0.383,-0.377 0.767,-0.753 1.151,-1.129c0.374,0.138 0.777,0.213 1.196,0.213c1.92,0 3.5,-1.58 3.5,-3.5c0,-0.403 -0.07,-0.791 -0.197,-1.153c0.379,-0.384 0.756,-0.77 1.131,-1.159Zm-9.334,1.312c0.4,-1.961 1.94,-3.5 3.9,-3.9l0,-0.1c0,0 0,-1 1,-1c1,0 1,1 1,1l0,0.1c0.477,0.097 0.93,0.262 1.347,0.484c-0.383,0.377 -0.767,0.753 -1.151,1.129c-0.374,-0.138 -0.777,-0.213 -1.196,-0.213c-1.92,0 -3.5,1.58 -3.5,3.5c0,0.403 0.07,0.791 0.197,1.153c-0.379,0.384 -0.756,0.77 -1.131,1.159c-0.213,-0.407 -0.371,-0.848 -0.466,-1.312l-0.1,0c-0.005,0 -1,-0.003 -1,-1c0,-0.997 0.995,-1 1,-1l0.1,0Z'/%3E %3Cpath d='M14,5l1,1l-9,9l-1,-1l9,-9Z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M 10,4 C 9,4 9,5 9,5 L 9,5.1 C 7.0357113,5.5006048 5.5006048,7.0357113 5.1,9 L 5,9 c 0,0 -1,0 -1,1 0,1 1,1 1,1 l 0.1,0 c 0.4006048,1.964289 1.9357113,3.499395 3.9,3.9 L 9,15 c 0,0 0,1 1,1 1,0 1,-1 1,-1 l 0,-0.1 c 1.964289,-0.400605 3.499395,-1.935711 3.9,-3.9 l 0.1,0 c 0,0 1,0 1,-1 C 16,9 15,9 15,9 L 14.9,9 C 14.499395,7.0357113 12.964289,5.5006048 11,5.1 L 11,5 c 0,0 0,-1 -1,-1 z m 0,2.5 c 1.932997,0 3.5,1.5670034 3.5,3.5 0,1.932997 -1.567003,3.5 -3.5,3.5 C 8.0670034,13.5 6.5,11.932997 6.5,10 6.5,8.0670034 8.0670034,6.5 10,6.5 Z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M 10,4 C 9,4 9,5 9,5 L 9,5.1 C 7.0357113,5.5006048 5.5006048,7.0357113 5.1,9 L 5,9 c 0,0 -1,0 -1,1 0,1 1,1 1,1 l 0.1,0 c 0.4006048,1.964289 1.9357113,3.499395 3.9,3.9 L 9,15 c 0,0 0,1 1,1 1,0 1,-1 1,-1 l 0,-0.1 c 1.964289,-0.400605 3.499395,-1.935711 3.9,-3.9 l 0.1,0 c 0,0 1,0 1,-1 C 16,9 15,9 15,9 L 14.9,9 C 14.499395,7.0357113 12.964289,5.5006048 11,5.1 L 11,5 c 0,0 0,-1 -1,-1 z m 0,2.5 c 1.932997,0 3.5,1.5670034 3.5,3.5 0,1.932997 -1.567003,3.5 -3.5,3.5 C 8.0670034,13.5 6.5,11.932997 6.5,10 6.5,8.0670034 8.0670034,6.5 10,6.5 Z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting::before {
+    -webkit-animation: mapboxgl-spin 2s infinite linear;
+    -moz-animation: mapboxgl-spin 2s infinite linear;
+    -o-animation: mapboxgl-spin 2s infinite linear;
+    -ms-animation: mapboxgl-spin 2s infinite linear;
+    animation: mapboxgl-spin 2s infinite linear;
+}
+
+@-webkit-keyframes mapboxgl-spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@-moz-keyframes mapboxgl-spin {
+    0% { -moz-transform: rotate(0deg); }
+    100% { -moz-transform: rotate(360deg); }
+}
+
+@-o-keyframes mapboxgl-spin {
+    0% { -o-transform: rotate(0deg); }
+    100% { -o-transform: rotate(360deg); }
+}
+
+@-ms-keyframes mapboxgl-spin {
+    0% { -ms-transform: rotate(0deg); }
+    100% { -ms-transform: rotate(360deg); }
+}
+
+@keyframes mapboxgl-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M 5 4 C 4.5 4 4 4.5 4 5 L 4 6 L 4 9 L 4.5 9 L 5.7773438 7.296875 C 6.7771319 8.0602131 7.835765 8.9565728 8.890625 10 C 7.8257121 11.0633 6.7761791 11.951675 5.78125 12.707031 L 4.5 11 L 4 11 L 4 15 C 4 15.5 4.5 16 5 16 L 9 16 L 9 15.5 L 7.2734375 14.205078 C 8.0428931 13.187886 8.9395441 12.133481 9.9609375 11.068359 C 11.042371 12.14699 11.942093 13.2112 12.707031 14.21875 L 11 15.5 L 11 16 L 14 16 L 15 16 C 15.5 16 16 15.5 16 15 L 16 14 L 16 11 L 15.5 11 L 14.205078 12.726562 C 13.177985 11.949617 12.112718 11.043577 11.037109 10.009766 C 12.151856 8.981061 13.224345 8.0798624 14.228516 7.3046875 L 15.5 9 L 16 9 L 16 5 C 16 4.5 15.5 4 15 4 L 11 4 L 11 4.5 L 12.703125 5.7773438 C 11.932647 6.7864834 11.026693 7.8554712 9.9707031 8.9199219 C 8.9584739 7.8204943 8.0698767 6.7627188 7.3046875 5.7714844 L 9 4.5 L 9 4 L 6 4 L 5 4 z '/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-shrink {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23000000;' d='M 4.2421875 3.4921875 A 0.750075 0.750075 0 0 0 3.71875 4.78125 L 5.9648438 7.0273438 L 4 8.5 L 4 9 L 8 9 C 8.500001 8.9999988 9 8.4999992 9 8 L 9 4 L 8.5 4 L 7.0175781 5.9550781 L 4.78125 3.71875 A 0.750075 0.750075 0 0 0 4.2421875 3.4921875 z M 15.734375 3.4921875 A 0.750075 0.750075 0 0 0 15.21875 3.71875 L 12.984375 5.953125 L 11.5 4 L 11 4 L 11 8 C 11 8.4999992 11.499999 8.9999988 12 9 L 16 9 L 16 8.5 L 14.035156 7.0273438 L 16.28125 4.78125 A 0.750075 0.750075 0 0 0 15.734375 3.4921875 z M 4 11 L 4 11.5 L 5.9648438 12.972656 L 3.71875 15.21875 A 0.75130096 0.75130096 0 1 0 4.78125 16.28125 L 7.0273438 14.035156 L 8.5 16 L 9 16 L 9 12 C 9 11.500001 8.500001 11.000001 8 11 L 4 11 z M 12 11 C 11.499999 11.000001 11 11.500001 11 12 L 11 16 L 11.5 16 L 12.972656 14.035156 L 15.21875 16.28125 A 0.75130096 0.75130096 0 1 0 16.28125 15.21875 L 14.035156 12.972656 L 16 11.5 L 16 11 L 12 11 z '/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
+    width: 20px;
+    height: 20px;
+    margin: 5px;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpolygon fill='%23333333' points='6,9 10,1 14,9'/%3E %3Cpolygon fill='%23CCCCCC' points='6,11 10,19 14,11 '/%3E %3C/svg%3E");
+    background-repeat: no-repeat;
+    display: inline-block;
+}
+
+a.mapboxgl-ctrl-logo {
+    width: 85px;
+    height: 21px;
+    margin: 0 0 -3px -3px;
+    display: block;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 84.49 21' style='enable-background:new 0 0 84.49 21;' xml:space='preserve'%3E%3Cg%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M83.25,14.26c0,0.12-0.09,0.21-0.21,0.21h-1.61c-0.13,0-0.24-0.06-0.3-0.17l-1.44-2.39l-1.44,2.39 c-0.06,0.11-0.18,0.17-0.3,0.17h-1.61c-0.04,0-0.08-0.01-0.12-0.03c-0.09-0.06-0.13-0.19-0.06-0.28l0,0l2.43-3.68L76.2,6.84 c-0.02-0.03-0.03-0.07-0.03-0.12c0-0.12,0.09-0.21,0.21-0.21h1.61c0.13,0,0.24,0.06,0.3,0.17l1.41,2.36l1.4-2.35 c0.06-0.11,0.18-0.17,0.3-0.17H83c0.04,0,0.08,0.01,0.12,0.03c0.09,0.06,0.13,0.19,0.06,0.28l0,0l-2.37,3.63l2.43,3.67 C83.24,14.18,83.25,14.22,83.25,14.26z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M66.24,9.59c-0.39-1.88-1.96-3.28-3.84-3.28c-1.03,0-2.03,0.42-2.73,1.18V3.51c0-0.13-0.1-0.23-0.23-0.23h-1.4 c-0.13,0-0.23,0.11-0.23,0.23v10.72c0,0.13,0.1,0.23,0.23,0.23h1.4c0.13,0,0.23-0.11,0.23-0.23V13.5c0.71,0.75,1.7,1.18,2.73,1.18 c1.88,0,3.45-1.41,3.84-3.29C66.37,10.79,66.37,10.18,66.24,9.59L66.24,9.59z M62.08,13c-1.32,0-2.39-1.11-2.41-2.48v-0.06 c0.02-1.38,1.09-2.48,2.41-2.48s2.42,1.12,2.42,2.51S63.41,13,62.08,13z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M71.67,6.32c-1.98-0.01-3.72,1.35-4.16,3.29c-0.13,0.59-0.13,1.19,0,1.77c0.44,1.94,2.17,3.32,4.17,3.3 c2.35,0,4.26-1.87,4.26-4.19S74.04,6.32,71.67,6.32z M71.65,13.01c-1.33,0-2.42-1.12-2.42-2.51s1.08-2.52,2.42-2.52 c1.33,0,2.42,1.12,2.42,2.51S72.99,13,71.65,13.01L71.65,13.01z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M62.08,7.98c-1.32,0-2.39,1.11-2.41,2.48v0.06C59.68,11.9,60.75,13,62.08,13s2.42-1.12,2.42-2.51 S63.41,7.98,62.08,7.98z M62.08,11.76c-0.63,0-1.14-0.56-1.17-1.25v-0.04c0.01-0.69,0.54-1.25,1.17-1.25 c0.63,0,1.17,0.57,1.17,1.27C63.24,11.2,62.73,11.76,62.08,11.76z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M71.65,7.98c-1.33,0-2.42,1.12-2.42,2.51S70.32,13,71.65,13s2.42-1.12,2.42-2.51S72.99,7.98,71.65,7.98z M71.65,11.76c-0.64,0-1.17-0.57-1.17-1.27c0-0.7,0.53-1.26,1.17-1.26s1.17,0.57,1.17,1.27C72.82,11.21,72.29,11.76,71.65,11.76z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M45.74,6.53h-1.4c-0.13,0-0.23,0.11-0.23,0.23v0.73c-0.71-0.75-1.7-1.18-2.73-1.18 c-2.17,0-3.94,1.87-3.94,4.19s1.77,4.19,3.94,4.19c1.04,0,2.03-0.43,2.73-1.19v0.73c0,0.13,0.1,0.23,0.23,0.23h1.4 c0.13,0,0.23-0.11,0.23-0.23V6.74c0-0.12-0.09-0.22-0.22-0.22C45.75,6.53,45.75,6.53,45.74,6.53z M44.12,10.53 C44.11,11.9,43.03,13,41.71,13s-2.42-1.12-2.42-2.51s1.08-2.52,2.4-2.52c1.33,0,2.39,1.11,2.41,2.48L44.12,10.53z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M41.71,7.98c-1.33,0-2.42,1.12-2.42,2.51S40.37,13,41.71,13s2.39-1.11,2.41-2.48v-0.06 C44.1,9.09,43.03,7.98,41.71,7.98z M40.55,10.49c0-0.7,0.52-1.27,1.17-1.27c0.64,0,1.14,0.56,1.17,1.25v0.04 c-0.01,0.68-0.53,1.24-1.17,1.24C41.08,11.75,40.55,11.19,40.55,10.49z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M52.41,6.32c-1.03,0-2.03,0.42-2.73,1.18V6.75c0-0.13-0.1-0.23-0.23-0.23h-1.4c-0.13,0-0.23,0.11-0.23,0.23 v10.72c0,0.13,0.1,0.23,0.23,0.23h1.4c0.13,0,0.23-0.1,0.23-0.23V13.5c0.71,0.75,1.7,1.18,2.74,1.18c2.17,0,3.94-1.87,3.94-4.19 S54.58,6.32,52.41,6.32z M52.08,13.01c-1.32,0-2.39-1.11-2.42-2.48v-0.07c0.02-1.38,1.09-2.49,2.4-2.49c1.32,0,2.41,1.12,2.41,2.51 S53.4,13,52.08,13.01L52.08,13.01z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M52.08,7.98c-1.32,0-2.39,1.11-2.42,2.48v0.06c0.03,1.38,1.1,2.48,2.42,2.48s2.41-1.12,2.41-2.51 S53.4,7.98,52.08,7.98z M52.08,11.76c-0.63,0-1.14-0.56-1.17-1.25v-0.04c0.01-0.69,0.54-1.25,1.17-1.25c0.63,0,1.17,0.58,1.17,1.27 S52.72,11.76,52.08,11.76z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M36.08,14.24c0,0.13-0.1,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68c0-0.98-0.74-1.71-1.62-1.71 c-0.8,0-1.46,0.7-1.59,1.62l0.01,4.66c0,0.13-0.11,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68 c0-0.98-0.74-1.71-1.62-1.71c-0.85,0-1.54,0.79-1.6,1.8v4.48c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V6.74 c0.01-0.13,0.1-0.22,0.23-0.22h1.4c0.13,0,0.22,0.11,0.23,0.22V7.4c0.5-0.68,1.3-1.09,2.16-1.1h0.03c1.09,0,2.09,0.6,2.6,1.55 c0.45-0.95,1.4-1.55,2.44-1.56c1.62,0,2.93,1.25,2.9,2.78L36.08,14.24z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M84.34,13.59l-0.07-0.13l-1.96-2.99l1.94-2.95c0.44-0.67,0.26-1.56-0.41-2.02c-0.02,0-0.03,0-0.04-0.01 c-0.23-0.15-0.5-0.22-0.78-0.22h-1.61c-0.56,0-1.08,0.29-1.37,0.78L79.72,6.6l-0.34-0.56C79.09,5.56,78.57,5.27,78,5.27h-1.6 c-0.6,0-1.13,0.37-1.35,0.92c-2.19-1.66-5.28-1.47-7.26,0.45c-0.35,0.34-0.65,0.72-0.89,1.14c-0.9-1.62-2.58-2.72-4.5-2.72 c-0.5,0-1.01,0.07-1.48,0.23V3.51c0-0.82-0.66-1.48-1.47-1.48h-1.4c-0.81,0-1.47,0.66-1.47,1.47v3.75 c-0.95-1.36-2.5-2.18-4.17-2.19c-0.74,0-1.46,0.16-2.12,0.47c-0.24-0.17-0.54-0.26-0.84-0.26h-1.4c-0.45,0-0.87,0.21-1.15,0.56 c-0.02-0.03-0.04-0.05-0.07-0.08c-0.28-0.3-0.68-0.47-1.09-0.47h-1.39c-0.3,0-0.6,0.09-0.84,0.26c-0.67-0.3-1.39-0.46-2.12-0.46 c-1.83,0-3.43,1-4.37,2.5c-0.2-0.46-0.48-0.89-0.83-1.25c-0.8-0.81-1.89-1.25-3.02-1.25h-0.01c-0.89,0.01-1.75,0.33-2.46,0.88 c-0.74-0.57-1.64-0.88-2.57-0.88H28.1c-0.29,0-0.58,0.03-0.86,0.11c-0.28,0.06-0.56,0.16-0.82,0.28c-0.21-0.12-0.45-0.18-0.7-0.18 h-1.4c-0.82,0-1.47,0.66-1.47,1.47v7.5c0,0.82,0.66,1.47,1.47,1.47h1.4c0.82,0,1.48-0.66,1.48-1.48l0,0V9.79 c0.03-0.36,0.23-0.59,0.36-0.59c0.18,0,0.38,0.18,0.38,0.47v4.57c0,0.82,0.66,1.47,1.47,1.47h1.41c0.82,0,1.47-0.66,1.47-1.47 l-0.01-4.57c0.06-0.32,0.25-0.47,0.35-0.47c0.18,0,0.38,0.18,0.38,0.47v4.57c0,0.82,0.66,1.47,1.47,1.47h1.41 c0.82,0,1.47-0.66,1.47-1.47v-0.38c0.96,1.29,2.46,2.06,4.06,2.06c0.74,0,1.46-0.16,2.12-0.47c0.24,0.17,0.54,0.26,0.84,0.26h1.39 c0.3,0,0.6-0.09,0.84-0.26v2.01c0,0.82,0.66,1.47,1.47,1.47h1.4c0.82,0,1.47-0.66,1.47-1.47v-1.77c0.48,0.15,0.99,0.23,1.49,0.22 c1.7,0,3.22-0.87,4.17-2.2v0.52c0,0.82,0.66,1.47,1.47,1.47h1.4c0.3,0,0.6-0.09,0.84-0.26c0.66,0.31,1.39,0.47,2.12,0.47 c1.92,0,3.6-1.1,4.49-2.73c1.54,2.65,4.95,3.53,7.58,1.98c0.18-0.11,0.36-0.22,0.53-0.36c0.22,0.55,0.76,0.91,1.35,0.9H78 c0.56,0,1.08-0.29,1.37-0.78l0.37-0.61l0.37,0.61c0.29,0.48,0.81,0.78,1.38,0.78h1.6c0.81,0,1.46-0.66,1.45-1.46 C84.49,14.02,84.44,13.8,84.34,13.59L84.34,13.59z M35.86,14.47h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68 c0-0.98-0.74-1.71-1.62-1.71c-0.8,0-1.46,0.7-1.59,1.62l0.01,4.66c0,0.13-0.1,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23 V9.68c0-0.98-0.74-1.71-1.62-1.71c-0.85,0-1.54,0.79-1.6,1.8v4.48c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23 V6.74c0.01-0.13,0.11-0.22,0.23-0.22h1.4c0.13,0,0.22,0.11,0.23,0.22V7.4c0.5-0.68,1.3-1.09,2.16-1.1h0.03 c1.09,0,2.09,0.6,2.6,1.55c0.45-0.95,1.4-1.55,2.44-1.56c1.62,0,2.93,1.25,2.9,2.78l0.01,5.16C36.09,14.36,35.98,14.46,35.86,14.47 L35.86,14.47z M45.97,14.24c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V13.5c-0.7,0.76-1.69,1.18-2.72,1.18 c-2.17,0-3.94-1.87-3.94-4.19s1.77-4.19,3.94-4.19c1.03,0,2.02,0.43,2.73,1.18V6.74c0-0.13,0.1-0.23,0.23-0.23h1.4 c0.12-0.01,0.22,0.08,0.23,0.21c0,0.01,0,0.01,0,0.02v7.51h-0.01V14.24z M52.41,14.67c-1.03,0-2.02-0.43-2.73-1.18v3.97 c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.1-0.23-0.23V6.75c0-0.13,0.1-0.22,0.23-0.22h1.4c0.13,0,0.23,0.11,0.23,0.23v0.73 c0.71-0.76,1.7-1.18,2.73-1.18c2.17,0,3.94,1.86,3.94,4.18S54.58,14.67,52.41,14.67z M66.24,11.39c-0.39,1.87-1.96,3.29-3.84,3.29 c-1.03,0-2.02-0.43-2.73-1.18v0.73c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V3.51c0-0.13,0.1-0.23,0.23-0.23 h1.4c0.13,0,0.23,0.11,0.23,0.23v3.97c0.71-0.75,1.7-1.18,2.73-1.17c1.88,0,3.45,1.4,3.84,3.28C66.37,10.19,66.37,10.8,66.24,11.39 L66.24,11.39L66.24,11.39z M71.67,14.68c-2,0.01-3.73-1.35-4.17-3.3c-0.13-0.59-0.13-1.19,0-1.77c0.44-1.94,2.17-3.31,4.17-3.3 c2.36,0,4.26,1.87,4.26,4.19S74.03,14.68,71.67,14.68L71.67,14.68z M83.04,14.47h-1.61c-0.13,0-0.24-0.06-0.3-0.17l-1.44-2.39 l-1.44,2.39c-0.06,0.11-0.18,0.17-0.3,0.17h-1.61c-0.04,0-0.08-0.01-0.12-0.03c-0.09-0.06-0.13-0.19-0.06-0.28l0,0l2.43-3.68 L76.2,6.84c-0.02-0.03-0.03-0.07-0.03-0.12c0-0.12,0.09-0.21,0.21-0.21h1.61c0.13,0,0.24,0.06,0.3,0.17l1.41,2.36l1.41-2.36 c0.06-0.11,0.18-0.17,0.3-0.17h1.61c0.04,0,0.08,0.01,0.12,0.03c0.09,0.06,0.13,0.19,0.06,0.28l0,0l-2.38,3.64l2.43,3.67 c0.02,0.03,0.03,0.07,0.03,0.12C83.25,14.38,83.16,14.47,83.04,14.47L83.04,14.47L83.04,14.47z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M10.5,1.24c-5.11,0-9.25,4.15-9.25,9.25s4.15,9.25,9.25,9.25s9.25-4.15,9.25-9.25 C19.75,5.38,15.61,1.24,10.5,1.24z M14.89,12.77c-1.93,1.93-4.78,2.31-6.7,2.31c-0.7,0-1.41-0.05-2.1-0.16c0,0-1.02-5.64,2.14-8.81 c0.83-0.83,1.95-1.28,3.13-1.28c1.27,0,2.49,0.51,3.39,1.42C16.59,8.09,16.64,11,14.89,12.77z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M10.5-0.01C4.7-0.01,0,4.7,0,10.49s4.7,10.5,10.5,10.5S21,16.29,21,10.49C20.99,4.7,16.3-0.01,10.5-0.01z M10.5,19.74c-5.11,0-9.25-4.15-9.25-9.25s4.14-9.26,9.25-9.26s9.25,4.15,9.25,9.25C19.75,15.61,15.61,19.74,10.5,19.74z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M14.74,6.25C12.9,4.41,9.98,4.35,8.23,6.1c-3.16,3.17-2.14,8.81-2.14,8.81s5.64,1.02,8.81-2.14 C16.64,11,16.59,8.09,14.74,6.25z M12.47,10.34l-0.91,1.87l-0.9-1.87L8.8,9.43l1.86-0.9l0.9-1.87l0.91,1.87l1.86,0.9L12.47,10.34z'/%3E %3Cpolygon class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' points='14.33,9.43 12.47,10.34 11.56,12.21 10.66,10.34 8.8,9.43 10.66,8.53 11.56,6.66 12.47,8.53 '/%3E%3C/g%3E%3C/svg%3E");
+}
+
+a.mapboxgl-ctrl-logo.mapboxgl-compact {
+    width: 21px;
+    height: 21px;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 21 21' style='enable-background:new 0 0 21 21;' xml:space='preserve'%3E%3Cg transform='translate(0,0.01)'%3E%3Cpath d='m 10.5,1.24 c -5.11,0 -9.25,4.15 -9.25,9.25 0,5.1 4.15,9.25 9.25,9.25 5.1,0 9.25,-4.15 9.25,-9.25 0,-5.11 -4.14,-9.25 -9.25,-9.25 z m 4.39,11.53 c -1.93,1.93 -4.78,2.31 -6.7,2.31 -0.7,0 -1.41,-0.05 -2.1,-0.16 0,0 -1.02,-5.64 2.14,-8.81 0.83,-0.83 1.95,-1.28 3.13,-1.28 1.27,0 2.49,0.51 3.39,1.42 1.84,1.84 1.89,4.75 0.14,6.52 z' style='opacity:0.9;fill:%23ffffff;enable-background:new' class='st0'/%3E%3Cpath d='M 10.5,-0.01 C 4.7,-0.01 0,4.7 0,10.49 c 0,5.79 4.7,10.5 10.5,10.5 5.8,0 10.5,-4.7 10.5,-10.5 C 20.99,4.7 16.3,-0.01 10.5,-0.01 Z m 0,19.75 c -5.11,0 -9.25,-4.15 -9.25,-9.25 0,-5.1 4.14,-9.26 9.25,-9.26 5.11,0 9.25,4.15 9.25,9.25 0,5.13 -4.14,9.26 -9.25,9.26 z' style='opacity:0.35;enable-background:new' class='st1'/%3E%3Cpath d='M 14.74,6.25 C 12.9,4.41 9.98,4.35 8.23,6.1 5.07,9.27 6.09,14.91 6.09,14.91 c 0,0 5.64,1.02 8.81,-2.14 C 16.64,11 16.59,8.09 14.74,6.25 Z m -2.27,4.09 -0.91,1.87 -0.9,-1.87 -1.86,-0.91 1.86,-0.9 0.9,-1.87 0.91,1.87 1.86,0.9 z' style='opacity:0.35;enable-background:new' class='st1'/%3E%3Cpolygon points='11.56,12.21 10.66,10.34 8.8,9.43 10.66,8.53 11.56,6.66 12.47,8.53 14.33,9.43 12.47,10.34 ' style='opacity:0.9;fill:%23ffffff;enable-background:new' class='st0'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
+    padding: 0 5px;
+    background-color: rgba(255, 255, 255, 0.5);
+    margin: 0;
+}
+
+@media screen {
+    .mapboxgl-ctrl-attrib.mapboxgl-compact {
+        min-height: 20px;
+        padding: 0;
+        margin: 10px;
+        position: relative;
+        background-color: #fff;
+        border-radius: 3px 12px 12px 3px;
+    }
+
+    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
+        padding: 2px 24px 2px 4px;
+        visibility: visible;
+        margin-top: 6px;
+    }
+
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:hover,
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
+        padding: 2px 4px 2px 24px;
+        border-radius: 12px 3px 3px 12px;
+    }
+
+    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
+        display: none;
+    }
+
+    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover .mapboxgl-ctrl-attrib-inner {
+        display: block;
+    }
+
+    .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        content: '';
+        cursor: pointer;
+        position: absolute;
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23333333' fill-rule='evenodd' d='M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0 M9,7a1,1 0 1,0 2,0a1,1 0 1,0 -2,0 M9,10a1,1 0 1,1 2,0l0,3a1,1 0 1,1 -2,0'/%3E %3C/svg%3E");
+        background-color: rgba(255, 255, 255, 0.5);
+        width: 24px;
+        height: 24px;
+        box-sizing: border-box;
+        border-radius: 12px;
+    }
+
+    .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        bottom: 0;
+        right: 0;
+    }
+
+    .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        top: 0;
+        right: 0;
+    }
+
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        top: 0;
+        left: 0;
+    }
+
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        bottom: 0;
+        left: 0;
+    }
+}
+
+.mapboxgl-ctrl-attrib a {
+    color: rgba(0, 0, 0, 0.75);
+    text-decoration: none;
+}
+
+.mapboxgl-ctrl-attrib a:hover {
+    color: inherit;
+    text-decoration: underline;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.mapboxgl-ctrl-attrib .mapbox-improve-map {
+    font-weight: bold;
+    margin-left: 2px;
+}
+
+.mapboxgl-attrib-empty {
+    display: none;
+}
+
+.mapboxgl-ctrl-scale {
+    background-color: rgba(255, 255, 255, 0.75);
+    font-size: 10px;
+    border-width: medium 2px 2px;
+    border-style: none solid solid;
+    border-color: #333;
+    padding: 0 5px;
+    color: #333;
+    box-sizing: border-box;
+}
+
+.mapboxgl-popup {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: -webkit-flex;
+    display: flex;
+    will-change: transform;
+    pointer-events: none;
+}
+
+.mapboxgl-popup-anchor-top,
+.mapboxgl-popup-anchor-top-left,
+.mapboxgl-popup-anchor-top-right {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.mapboxgl-popup-anchor-bottom,
+.mapboxgl-popup-anchor-bottom-left,
+.mapboxgl-popup-anchor-bottom-right {
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.mapboxgl-popup-anchor-left {
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.mapboxgl-popup-anchor-right {
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.mapboxgl-popup-tip {
+    width: 0;
+    height: 0;
+    border: 10px solid transparent;
+    z-index: 1;
+}
+
+.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-top: none;
+    border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+    border-top: none;
+    border-left: none;
+    border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+    border-top: none;
+    border-right: none;
+    border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-bottom: none;
+    border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+    border-bottom: none;
+    border-left: none;
+    border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+    border-bottom: none;
+    border-right: none;
+    border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-left: none;
+    border-right-color: #fff;
+}
+
+.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-right: none;
+    border-left-color: #fff;
+}
+
+.mapboxgl-popup-close-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 0;
+    border-radius: 0 3px 0 0;
+    cursor: pointer;
+    background-color: transparent;
+}
+
+.mapboxgl-popup-close-button:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.mapboxgl-popup-content {
+    position: relative;
+    background: #fff;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    padding: 10px 10px 15px;
+    pointer-events: auto;
+}
+
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
+    border-top-left-radius: 0;
+}
+
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
+    border-top-right-radius: 0;
+}
+
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
+    border-bottom-left-radius: 0;
+}
+
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
+    border-bottom-right-radius: 0;
+}
+
+.mapboxgl-popup-track-pointer {
+    display: none;
+}
+
+.mapboxgl-popup-track-pointer * {
+    pointer-events: none;
+    user-select: none;
+}
+
+.mapboxgl-map:hover .mapboxgl-popup-track-pointer {
+    display: flex;
+}
+
+.mapboxgl-map:active .mapboxgl-popup-track-pointer {
+    display: none;
+}
+
+.mapboxgl-marker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: transform;
+}
+
+.mapboxgl-user-location-dot {
+    background-color: #1da1f2;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+}
+
+.mapboxgl-user-location-dot::before {
+    background-color: #1da1f2;
+    content: '';
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    position: absolute;
+    -webkit-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    -moz-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    -ms-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    animation: mapboxgl-user-location-dot-pulse 2s infinite;
+}
+
+.mapboxgl-user-location-dot::after {
+    border-radius: 50%;
+    border: 2px solid #fff;
+    content: '';
+    height: 19px;
+    left: -2px;
+    position: absolute;
+    top: -2px;
+    width: 19px;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
+}
+
+@-webkit-keyframes mapboxgl-user-location-dot-pulse {
+    0%   { -webkit-transform: scale(1); opacity: 1; }
+    70%  { -webkit-transform: scale(3); opacity: 0; }
+    100% { -webkit-transform: scale(1); opacity: 0; }
+}
+
+@-ms-keyframes mapboxgl-user-location-dot-pulse {
+    0%   { -ms-transform: scale(1); opacity: 1; }
+    70%  { -ms-transform: scale(3); opacity: 0; }
+    100% { -ms-transform: scale(1); opacity: 0; }
+}
+
+@keyframes mapboxgl-user-location-dot-pulse {
+    0%   { transform: scale(1); opacity: 1; }
+    70%  { transform: scale(3); opacity: 0; }
+    100% { transform: scale(1); opacity: 0; }
+}
+
+.mapboxgl-user-location-dot-stale {
+    background-color: #aaa;
+}
+
+.mapboxgl-user-location-dot-stale::after {
+    display: none;
+}
+
+.mapboxgl-crosshair,
+.mapboxgl-crosshair .mapboxgl-interactive,
+.mapboxgl-crosshair .mapboxgl-interactive:active {
+    cursor: crosshair;
+}
+
+.mapboxgl-boxzoom {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    background: #fff;
+    border: 2px dotted #202020;
+    opacity: 0.5;
+}
+
+@media print {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .mapbox-improve-map {
+        display: none;
+    }
+}
+/*
+ * bootstrap includes
+ * keep it at the end
+ */
+
+.mapAPI-map {
+  height: 30rem;
+  margin-bottom: 1rem;
+}
+
+.mapboxgl-popup {
+  font-size: .8rem;
+  z-index: 4;
+  line-height: 20px;
+}
+
+.mapboxgl-popup-content {
+  min-width: 240px;
+  min-height: 5rem;
+  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
+          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
+}
+
+.mapboxgl-popup-content .mapboxgl-popup-close-button {
+  font-size: 2rem;
+  padding: .5rem;
+}
+
+.mapboxgl-popup-content .mapboxgl-popup-close-button:hover,
+.mapboxgl-popup-content .mapboxgl-popup-close-button:focus {
+  background: #2196f3;
+  color: #fff;
+}
+
+.mapboxgl-marker {
+  width: 30px;
+  height: 30px;
+  font-size: 30px;
+  cursor: pointer;
+  text-align: center;
+  color: #2196f3;
+}
+
+.mapboxgl-marker .marker-icon,
+.mapboxgl-marker .fas,
+.mapboxgl-marker .fab,
+.mapboxgl-marker .far {
+  -webkit-animation: pulse 0.8s linear infinite;
+          animation: pulse 0.8s linear infinite;
+}
+
 
 /*# sourceMappingURL=main.css.map*/

dist/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link href="css/main.css" rel="stylesheet"></head><body><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="flyout-FlyoutUI"><i class="fas fa-times flyout-FlyoutUI__close"></i><h2 class="flyout-FlyoutUI__title"><i class="fas fa-asterisk"></i> Flyout Demo</h2><div class="flyout-FlyoutUI__content typography"><p>Lipsum .... .... ....</p></div></div><div class="wrapper"><header id="Header" class="bg-dark"><div class="container-fluid"><nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg dropdown-hover"><a class="navbar-brand" href="#">UI Kit</a> <button data-target="#NavbarResponsive" aria-controls="NavbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div id="NavbarResponsive" class="collapse navbar-collapse"><ul class="navbar-nav mr-auto nav-fill w-100"><li class="nav-item active"><a class="nav-link js-scrollTo" href="#PageTopAnchor">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Slider">Slider</a></li><li class="nav-item dropdown"><a id="NavbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a><div class="dropdown-menu bg-dark" aria-labelledby="NavbarDropdown"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a><div class="dropdown-divider"></div><a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a></div></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Content">Content</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#List">List</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a></li><li><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> <span class="sr-only">Search</span></button></form></li></ul></div></nav></div></header><main id="MainContent" class="page-content"><section id="Slider" class="element site__elements__sliderelement"><div class="element-container container-fluid"><div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"><div class="carousel-inner"><div class="carousel-item active"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #1</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #2</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #3</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div></div></div></div></section><section id="Lightbox" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Lightbox Demo</h2><div class="typography"><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="That's first link">Click me to start</a></p><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-gallery="demo">Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">You can use data-href attribute to specify link and attach lightbox to another element</p></div></div></div></section><section id="Content" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Content Header</h2><div class="typography"><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p><i class="fas fa-search"></i> Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2><i class="fas fa-search"></i> Header #2 <i class="fas fa-search"></i></h2><p><img src="https://placehold.it/200x200" alt="Test Image" class="image right">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h3>Header #3</h3><p><img src="https://placehold.it/200x200" alt="Test Image" class="image left"> Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2>Header #2</h2><h3 class="text-left">Header #3</h3><h4 class="text-center">Header #4</h4><h5 class="text-right">Header #5</h5><h6>Header #6</h6><p class="text-right"><img src="https://placehold.it/200x200" alt="Test Image" class="image center"> Content Text <a href="#">Link</a> ... Content Text <b>Bold</b> ... Content Text <i>Italic</i> ... Content Text <b><i>Bold-Italic</i></b> ... <s>Content Text</s> Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ...</p><ul><li>First</li><li>Second</li><li>Third</li></ul><p class="text-left">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><ol><li>First<ul><li>First</li><li>Second<ol><li>First</li><li>Second</li><li>Third</li></ol><ul><li>First</li><li>Second</li><li>Third</li></ul></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ul></li><li><p>{paragraph} Second</p><p>{paragraph} Second #2</p></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ol><h2 class="text-center">Table #1: Default</h2><table><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table><p class="text-justify">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2 class="text-center">Table #2: Border-less</h2><table class="table-none"><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table></div></div></div></section><section id="List" class="element dnadesign__elementallist__model__elementlist bg-dark"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div class="list-element__container row" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div></div></div></section><section id="AccordionList" class="element site__elements__accordion"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div id="AccordionExample" class="list-element__container row accordion" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading1" class="card-header"><button data-target="#Collapse1" aria-controls="Collapse1" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #1</h2></button></div><div id="Collapse1" aria-labelledby="Heading1" data-parent="#AccordionExample" class="collapse"><div class="card-body"><div class="typography"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading2"><button data-target="#Collapse2" aria-controls="Collapse2" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse2" class="collapse" aria-labelledby="Heading2" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading3"><button data-target="#Collapse3" aria-controls="Collapse3" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #3</h2></button></div><div id="Collapse3" class="collapse" aria-labelledby="Heading3" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading4" class="card-header"><button data-target="#Collapse4" aria-controls="Collapse4" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse4" class="collapse" aria-labelledby="Heading4" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div></div></div></section></main></div><footer id="Footer" class="footer site-footer"><div class="wrapper"><div class="container"><div class="row"><div class="col-sm-3">Col #1</div><div class="col-sm-3">Col #2</div><div class="col-sm-3">Col #3</div><div class="col-sm-3">Col #4</div></div></div></div><div class="footer"><div class="container"><div class="row"><div class="col-sm-8 d-flex"><div class="copyright">Copyright &copy; 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit</div><nav class="footer-nav"><ul class="list-inline d-flex"><li><a href="#">Sitemap</a></li><li><a href="#">Privacy Policy</a></li></ul></nav></div><div class="col-sm-4 text-right"><div class="credits footer__credits"><a href="https://github.com/a2nt" target="_blank" rel="nofollow"><span>Developed by</span> Tony Air</a></div></div></div></div></div></footer><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.0/css/all.css" media="all"><script src="js/app.js"></script></body></html>
+<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link href="css/main.css" rel="stylesheet"></head><body data-default-lng="0" data-default-lat="0"><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="flyout-FlyoutUI"><i class="fas fa-times flyout-FlyoutUI__close"></i><h2 class="flyout-FlyoutUI__title"><i class="fas fa-asterisk"></i> Flyout Demo</h2><div class="flyout-FlyoutUI__content typography"><p>Lipsum .... .... ....</p></div></div><div class="wrapper"><header id="Header" class="bg-dark"><div class="container-fluid"><nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg dropdown-hover"><a class="navbar-brand" href="#">UI Kit</a> <button data-target="#NavbarResponsive" aria-controls="NavbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div id="NavbarResponsive" class="collapse navbar-collapse"><ul class="navbar-nav mr-auto nav-fill w-100"><li class="nav-item active"><a class="nav-link js-scrollTo" href="#PageTopAnchor">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Slider">Slider</a></li><li class="nav-item dropdown"><a id="NavbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a><div class="dropdown-menu bg-dark" aria-labelledby="NavbarDropdown"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a><div class="dropdown-divider"></div><a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a></div></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Content">Content</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#List">List</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a></li><li><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> <span class="sr-only">Search</span></button></form></li></ul></div></nav></div></header><main id="MainContent" class="page-content"><section id="Slider" class="element site__elements__sliderelement"><div class="element-container container-fluid"><div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"><div class="carousel-inner"><div class="carousel-item active"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #1</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #2</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #3</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div></div></div></div></section><section id="Lightbox" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Lightbox Demo</h2><div class="typography"><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="That's first link">Click me to start</a></p><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-gallery="demo">Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">You can use data-href attribute to specify link and attach lightbox to another element</p></div></div></div></section><section id="Content" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Content Header</h2><div class="typography"><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p><i class="fas fa-search"></i> Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2><i class="fas fa-search"></i> Header #2 <i class="fas fa-search"></i></h2><p><img src="https://placehold.it/200x200" alt="Test Image" class="image right">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h3>Header #3</h3><p><img src="https://placehold.it/200x200" alt="Test Image" class="image left"> Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2>Header #2</h2><h3 class="text-left">Header #3</h3><h4 class="text-center">Header #4</h4><h5 class="text-right">Header #5</h5><h6>Header #6</h6><p class="text-right"><img src="https://placehold.it/200x200" alt="Test Image" class="image center"> Content Text <a href="#">Link</a> ... Content Text <b>Bold</b> ... Content Text <i>Italic</i> ... Content Text <b><i>Bold-Italic</i></b> ... <s>Content Text</s> Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ... Content Text Bla-bla-bla ...</p><ul><li>First</li><li>Second</li><li>Third</li></ul><p class="text-left">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><ol><li>First<ul><li>First</li><li>Second<ol><li>First</li><li>Second</li><li>Third</li></ol><ul><li>First</li><li>Second</li><li>Third</li></ul></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ul></li><li><p>{paragraph} Second</p><p>{paragraph} Second #2</p></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ol><h2 class="text-center">Table #1: Default</h2><table><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table><p class="text-justify">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2 class="text-center">Table #2: Border-less</h2><table class="table-none"><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table></div></div></div></section><section id="List" class="element dnadesign__elementallist__model__elementlist bg-dark"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div class="list-element__container row" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"></div></div></div></div></div></div></section><section id="AccordionList" class="element site__elements__accordion"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div id="AccordionExample" class="list-element__container row accordion" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading1" class="card-header"><button data-target="#Collapse1" aria-controls="Collapse1" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #1</h2></button></div><div id="Collapse1" aria-labelledby="Heading1" data-parent="#AccordionExample" class="collapse"><div class="card-body"><div class="typography"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading2"><button data-target="#Collapse2" aria-controls="Collapse2" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse2" class="collapse" aria-labelledby="Heading2" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading3"><button data-target="#Collapse3" aria-controls="Collapse3" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #3</h2></button></div><div id="Collapse3" class="collapse" aria-labelledby="Heading3" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading4" class="card-header"><button data-target="#Collapse4" aria-controls="Collapse4" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse4" class="collapse" aria-labelledby="Heading4" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div></div></div></section><section id="MapElement" class="element site__elements__mapelement"><div class="element-container container"><h2 class="content-element__title">Find Location</h2><div class="mapAPI-map-container" data-map-zoom="12" data-key="" data-map-style="mapbox://styles/mapbox/streets-v9" data-geojson="{&quot;type&quot;:&quot;MarkerCollection&quot;,&quot;features&quot;:[{&quot;id&quot;:4,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin4\&quot; data-id=\&quot;4\&quot; class=\&quot;location\&quot;&gt;\n    &lt;div class=\&quot;fn\&quot;&gt;Office #1&lt;\/div&gt;\n    &lt;div class=\&quot;addr\&quot;&gt;17 Lakeside Drive&lt;\/div&gt;\n    \n    \n    \n        &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n    \n    \n    \n    &lt;div class=\&quot;dir-link\&quot;&gt;\n        &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-74.4276612,40.8827743]}},{&quot;id&quot;:3,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin3\&quot; data-id=\&quot;3\&quot; class=\&quot;location\&quot;&gt;\n    &lt;div class=\&quot;fn\&quot;&gt;Office #2&lt;\/div&gt;\n    &lt;div class=\&quot;addr\&quot;&gt;Flower Hill Cemetery&lt;\/div&gt;\n    \n    \n    \n        &lt;div class=\&quot;d-none\&quot;&gt; N&lt;\/div&gt;\n    \n    \n    \n    &lt;div class=\&quot;dir-link\&quot;&gt;\n        &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-74.0249253,40.7884708]}},{&quot;id&quot;:2,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin2\&quot; data-id=\&quot;2\&quot; class=\&quot;location\&quot;&gt;\n    &lt;div class=\&quot;fn\&quot;&gt;Office #3&lt;\/div&gt;\n    &lt;div class=\&quot;addr\&quot;&gt;555 Phoenix Road&lt;\/div&gt;\n    \n    \n    \n        &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n    \n    \n    \n    &lt;div class=\&quot;dir-link\&quot;&gt;\n        &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-78.2475576,40.8527479]}},{&quot;id&quot;:1,&quot;type&quot;:&quot;Feature&quot;,&quot;icon&quot;:&quot;&lt;i class=\&quot;fas fa-map-marker-alt\&quot;&gt;&lt;\/i&gt;&quot;,&quot;properties&quot;:{&quot;content&quot;:&quot;&lt;div id=\&quot;MapPin1\&quot; data-id=\&quot;1\&quot; class=\&quot;location\&quot;&gt;\n    &lt;div class=\&quot;fn\&quot;&gt;Office #4&lt;\/div&gt;\n    &lt;div class=\&quot;addr\&quot;&gt;15 East Hadley Road&lt;\/div&gt;\n    \n    \n    \n        &lt;div class=\&quot;d-none\&quot;&gt; U&lt;\/div&gt;\n    \n    \n    \n    &lt;div class=\&quot;dir-link\&quot;&gt;\n        &lt;a href=\&quot;https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\&quot; target=\&quot;_blank\&quot;&gt;Get Directions &amp;raquo;&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&quot;},&quot;geometry&quot;:{&quot;type&quot;:&quot;Point&quot;,&quot;coordinates&quot;:[-72.5552186,42.3297023]}}]}" data-fly-to-marker="true" data-fly-to-bounds="false"><div class="mapAPI-map"></div></div><div class="locations"><div class="row"><div class="col-sm-3"><div id="MapPin4" data-id="4" class="location"><div class="fn">Office #1</div><div class="addr">17 Lakeside Drive</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8827743,-74.4276612" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin3" data-id="3" class="location"><div class="fn">Office #2</div><div class="addr">Flower Hill Cemetery</div><div class="d-none">N</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.7884708,-74.0249253" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin2" data-id="2" class="location"><div class="fn">Office #3</div><div class="addr">555 Phoenix Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8527479,-78.2475576" target="_blank">Get Directions &raquo;</a></div></div></div><div class="col-sm-3"><div id="MapPin1" data-id="1" class="location"><div class="fn">Office #4</div><div class="addr">15 East Hadley Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/42.3297023,-72.5552186" target="_blank">Get Directions &raquo;</a></div></div></div></div></div></div></section></main></div><footer id="Footer" class="footer site-footer"><div class="wrapper"><div class="container"><div class="row"><div class="col-sm-3">Col #1</div><div class="col-sm-3">Col #2</div><div class="col-sm-3">Col #3</div><div class="col-sm-3">Col #4</div></div></div></div><div class="footer"><div class="container"><div class="row"><div class="col-sm-8 d-flex"><div class="copyright">Copyright &copy; 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit</div><nav class="footer-nav"><ul class="list-inline d-flex"><li><a href="#">Sitemap</a></li><li><a href="#">Privacy Policy</a></li></ul></nav></div><div class="col-sm-4 text-right"><div class="credits footer__credits"><a href="https://github.com/a2nt" target="_blank" rel="nofollow"><span>Developed by</span> Tony Air</a></div></div></div></div></div></footer><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.0/css/all.css" media="all"><script src="js/app.js"></script></body></html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "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.",
@@ -124,7 +124,8 @@
       "block-no-empty": null,
       "color-no-invalid-hex": true,
       "comment-empty-line-before": [
-        "always", {
+        "always",
+        {
           "ignore": [
             "stylelint-commands",
             "after-comment"
@@ -133,7 +134,8 @@
       ],
       "declaration-colon-space-after": "always",
       "indentation": [
-        4, {
+        4,
+        {
           "except": [
             "value"
           ]
@@ -141,7 +143,8 @@
       ],
       "max-empty-lines": 2,
       "rule-empty-line-before": [
-        "always", {
+        "always",
+        {
           "except": [
             "first-nested"
           ],

src/index.html

@@ -4,7 +4,7 @@
 		<title>Webpack Bootstrap 4 UI Demo</title>
 		<%= require('html-loader!./html/Head.html') %>
 	</head>
-	<body>
+	<body data-default-lng="0" data-default-lat="0">
 		<%= require('html-loader!./html/First.html') %>
 		<%= require('html-loader!./html/_components/Flyout.html') %>
 		<div class="wrapper">

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

@@ -2,233 +2,63 @@
 
 import $ from 'jquery';
 import Events from '../_events';
-import mapBoxGL from 'mapbox-gl';
-//import "./mapStorage";
 
 import '../../scss/_components/_ui.map.scss';
 
-const W = window;
+import CONSTS from 'js/_consts';
 
 const MapAPI = (($) => {
-  const STORAGE = W.localStorage;
 
   // Constants
   const NAME = 'jsMapAPI';
   const DATA_KEY = NAME;
   const $BODY = $('body');
-  let Map;
+
-  let currentStyle;
+  const MAP_DRIVER = CONSTS['MAP_DRIVER'];
+  const W = window;
 
   class MapAPI {
     // Constructor
     constructor(el) {
-      this._el = el;
+      const ui = this;
-      const $el = $(this._el);
+      const Drv = new MAP_DRIVER();
+
+      ui.$el = $(el);
+
+      const $el = ui.$el;
       const config = $el.data();
 
-      const center = [
+      config['center'] = [
         (config['lng'] ? config['lng'] : $BODY.data('default-lng')),
         (config['lat'] ? config['lat'] : $BODY.data('default-lat')),
       ];
-      const popup = new mapBoxGL.Popup({
+
-        closeOnClick: false,
+      config['font-family'] = $BODY.css('font-family');
-        className: 'popup',
+
+      console.log(`${NAME}: initializing ${Drv.getName()}...`);
+      ui.map = Drv.init($el, config);
+
+      $el.on(Events.MAPLOADED, (e) => {
+        Drv.addGeoJson(config);
+        console.log(`${NAME}: Map is loaded`);
       });
 
-
+      $el.data(DATA_KEY, ui);
-      currentStyle = this.getStyle();
-      mapBoxGL.accessToken = $el.data('key');
-      Map = new mapBoxGL.Map({
-        'container': $el.find('.mapAPI-map')[0],
-        center,
-        //hash: true,
-        'style': currentStyle,
-        'localIdeographFontFamily': $BODY.css('font-family'),
-        'zoom': (config['mapZoom'] ? config['mapZoom'] : 10),
-        'attributionControl': false,
-        'antialias': true,
-        /*'pitch': 45,
-          'bearing': -17.6*/
-
-        /*transformRequest: (url, resourceType)=> {
-                              if(resourceType === 'Source' && url.startsWith('http://myHost')) {
-                                return {
-                                  url: url.replace('http', 'https'),
-                                  headers: { 'my-custom-header': true},
-                                  credentials: 'include'  // Include cookies for cross-origin requests
-                                }
-                              }
-                            }*/
-      })
-        .addControl(new mapBoxGL.AttributionControl({
-          compact: true,
-        }))
-        .addControl(new mapBoxGL.NavigationControl(), 'top-right')
-        .addControl(new mapBoxGL.GeolocateControl({
-          positionOptions: {
-            enableHighAccuracy: true,
-          },
-          trackUserLocation: true,
-        }), 'bottom-right')
-        .addControl(new mapBoxGL.ScaleControl({
-          maxWidth: 80,
-          unit: 'metric',
-        }), 'top-left')
-        .addControl(new mapboxgl.FullscreenControl());
-
-      $el.data('Map', Map);
-      $el.data('Popup', popup);
-
-      // event.target
-      Map.on('load', (e) => {
-        // Insert the layer beneath any symbol layer.
-        if (config['3d']) {
-          const layers = Map.getStyle().layers;
-          let labelLayerId;
-          for (let i = 0; i < layers.length; i++) {
-            if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
-              labelLayerId = layers[i].id;
-              break;
-            }
-          }
-
-          Map.addLayer({
-            'id': '3d-buildings',
-            'source': 'composite',
-            'source-layer': 'building',
-            'filter': ['==', 'extrude', 'true'],
-            'type': 'fill-extrusion',
-            'minzoom': 15,
-            'paint': {
-              'fill-extrusion-color': '#aaa',
-
-              // use an 'interpolate' expression to add a smooth transition effect to the
-              // buildings as the user zooms in
-              'fill-extrusion-height': [
-                "interpolate", ["linear"],
-                ["zoom"],
-                15, 0,
-                15.05, ["get", "height"],
-              ],
-              'fill-extrusion-base': [
-                "interpolate", ["linear"],
-                ["zoom"],
-                15, 0,
-                15.05, ["get", "min_height"],
-              ],
-              'fill-extrusion-opacity': .6,
-            },
-          }, labelLayerId);
-        }
-
-        const firstMarker = config['geojson'].features[0].geometry.coordinates;
-        //Map.setCenter(firstMarker);
-        const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker);
-
-        // add markers to map
-        config['geojson'].features.forEach((marker) => {
-          const id = marker.id;
-          const crds = marker.geometry.coordinates;
-          const content = marker.properties.content;
-
-          // create a DOM el for the marker
-          const $el = $(`<div id="Marker${ id }" data-id="${ id }" class="marker">${ marker.icon }</div>`);
-
-          $el.on('click', () => {
-            popup.setLngLat(crds)
-              .setHTML(content)
-              .addTo(Map);
-
-            if (config['flyToMarker']) {
-              Map.flyTo({
-                center: crds,
-                zoom: 17,
-              });
-            }
-
-            $el.trigger(Events.MAPMARKERCLICK);
-          });
-
-          // add marker to map
-          new mapBoxGL.Marker($el[0])
-            .setLngLat(crds)
-            .addTo(Map);
-          bounds.extend(crds);
-        });
-
-        Map.fitBounds(bounds, {
-          padding: 30,
-        });
-
-        popup.on('close', (e) => {
-          if (config['flyToBounds']) {
-            Map.fitBounds(bounds, {
-              padding: 30,
-            });
-          }
-          $el.trigger(Events.MAPPOPUPCLOSE);
-        });
-
-        $el.trigger(Events.MAPLOADED);
-        $(W).trigger(Events.MAPLOADED);
-        console.log('Map is loaded');
-      });
-
-      /*Map.on('render',function(event){
-              console.log('map moved');
-              console.log(event);
-            });
-
-            // event: MapDataEvent
-            Map.on('dataloading',() => {
-              console.log('Loading map data');
-              //console.log(event);
-            });
-
-            // event: MapDataEvent
-            Map.on('data',(event) => {
-              console.log('Map data updated');
-              //console.log(event);
-            });*/
-
-      // check time every 60 mins and change to night style
-      const api = this;
-      setInterval(() => {
-        const newStyle = api.getStyle();
-        if (newStyle !== currentStyle) {
-          Map.setStyle(api.getStyle());
-        }
-      }, 36000);
-
-
       $el.addClass(`${NAME}-active`);
     }
 
     // Public methods
     getMap() {
-      return Map;
+      return ui.map;
-    }
-
-    getStyle() {
-      const $el = $(this._el);
-      return $el.data('map-style');
-      return 'mapbox://styles/mapbox/streets-v9';
-      const hour = new Date().getHours();
-      if (hour < 6 || hour > 18) {
-        // night
-        //return 'mapbox://styles/mapbox/streets-v7';
-        return 'mapbox://styles/tony-air/cjeacwih92iu42rpd8tcmuyb2';
-      }
-      // day
-      return 'mapbox://styles/mapbox/streets-v9';
     }
 
     dispose() {
-      const $el = $(this._el);
+      const ui = this;
 
-      $el.removeClass(`${NAME}-active`);
+      ui.$el = null;
-      $.removeData(this._el, DATA_KEY);
+      $.removeData(ui.$el[0], DATA_KEY);
-      this._el = null;
+
+      ui.$el.removeClass(`${NAME}-active`);
     }
 
     static _jQueryInterface() {

src/js/_components/drivers/_map.google.font-icons.js

@@ -0,0 +1,197 @@
+const Obj = {
+  init: () => {
+    class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
+      constructor(options) {
+        super();
+        const ui = this;
+
+        ui.setMap(options.map);
+        ui.position = options.position;
+        ui.html =
+          (options.html ?
+            options.html :
+            '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
+          );
+        ui.divClass = options.divClass;
+        ui.align = options.align;
+        ui.isDebugMode = options.debug;
+        ui.onClick = options.onClick;
+        ui.onMouseOver = options.onMouseOver;
+
+        ui.isBoolean = arg => {
+          if (typeof arg === 'boolean') {
+            return true;
+          } else {
+            return false;
+          }
+        };
+
+        ui.isNotUndefined = arg => {
+          if (typeof arg !== 'undefined') {
+            return true;
+          } else {
+            return false;
+          }
+        };
+
+        ui.hasContent = arg => {
+          if (arg.length > 0) {
+            return true;
+          } else {
+            return false;
+          }
+        };
+
+        ui.isString = arg => {
+          if (typeof arg === 'string') {
+            return true;
+          } else {
+            return false;
+          }
+        };
+
+        ui.isFunction = arg => {
+          if (typeof arg === 'function') {
+            return true;
+          } else {
+            return false;
+          }
+        };
+      }
+      onAdd() {
+        const ui = this;
+
+        // Create div element.
+        ui.div = document.createElement('div');
+        ui.div.style.position = 'absolute';
+
+        // Validate and set custom div class
+        if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
+          ui.div.className = ui.divClass;
+
+        // Validate and set custom HTML
+        if (
+          ui.isNotUndefined(ui.html) &&
+          ui.hasContent(ui.html) &&
+          ui.isString(ui.html)
+        )
+          ui.div.innerHTML = ui.html;
+
+        // If debug mode is enabled custom content will be replaced with debug content
+        if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
+          ui.div.className = 'debug-mode';
+          ui.div.innerHTML =
+            '<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
+            '<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>';
+          ui.div.setAttribute(
+            'style',
+            'position: absolute;' +
+            'border: 5px dashed red;' +
+            'height: 150px;' +
+            'width: 150px;' +
+            'display: flex;' +
+            'justify-content: center;' +
+            'align-items: center;'
+          );
+        }
+
+        // Add element to clickable layer
+        ui.getPanes().overlayMouseTarget.appendChild(ui.div);
+
+        // Add listeners to the element.
+        google.maps.event.addDomListener(ui.div, 'click', event => {
+          google.maps.event.trigger(ui, 'click');
+          if (ui.isFunction(ui.onClick)) ui.onClick();
+          event.stopPropagation();
+        });
+
+        google.maps.event.addDomListener(ui.div, 'mouseover', event => {
+          google.maps.event.trigger(ui, 'mouseover');
+          if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
+          event.stopPropagation();
+        });
+      }
+
+      draw() {
+        const ui = this;
+
+        // Calculate position of div
+        var positionInPixels = ui.getProjection().fromLatLngToDivPixel(
+          new google.maps.LatLng(ui.position)
+        );
+
+        // Align HTML overlay relative to original position
+        var divOffset = {
+          y: undefined,
+          x: undefined
+        };
+
+        switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
+          case 'left top':
+            divOffset.y = ui.div.offsetHeight;
+            divOffset.x = ui.div.offsetWidth;
+            break;
+          case 'left center':
+            divOffset.y = ui.div.offsetHeight / 2;
+            divOffset.x = ui.div.offsetWidth;
+            break;
+          case 'left bottom':
+            divOffset.y = 0;
+            divOffset.x = ui.div.offsetWidth;
+            break;
+          case 'center top':
+            divOffset.y = ui.div.offsetHeight;
+            divOffset.x = ui.div.offsetWidth / 2;
+            break;
+          case 'center center':
+            divOffset.y = ui.div.offsetHeight / 2;
+            divOffset.x = ui.div.offsetWidth / 2;
+            break;
+          case 'center bottom':
+            divOffset.y = 0;
+            divOffset.x = ui.div.offsetWidth / 2;
+            break;
+          case 'right top':
+            divOffset.y = ui.div.offsetHeight;
+            divOffset.x = 0;
+            break;
+          case 'right center':
+            divOffset.y = ui.div.offsetHeight / 2;
+            divOffset.x = 0;
+            break;
+          case 'right bottom':
+            divOffset.y = 0;
+            divOffset.x = 0;
+            break;
+          default:
+            divOffset.y = ui.div.offsetHeight / 2;
+            divOffset.x = ui.div.offsetWidth / 2;
+        }
+
+        // Set position
+        ui.div.style.top = positionInPixels.y - divOffset.y + 'px';
+        ui.div.style.left = positionInPixels.x - divOffset.x + 'px';
+      }
+
+      getPosition() {
+        const ui = this;
+        return ui.position;
+      }
+
+      getDiv() {
+        const ui = this;
+        return ui.div;
+      }
+
+      setPosition(position, align) {
+        const ui = this;
+        ui.position = position;
+        ui.align = align;
+        ui.draw();
+      }
+    }
+    return GoogleMapsHtmlOverlay;
+  }
+}
+
+export default Obj;

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

@@ -0,0 +1,153 @@
+'use strict';
+
+import $ from 'jquery';
+import Events from '../../_events';
+import MarkerUI from './_map.google.marker';
+
+const GoogleMapsDriver = (($) => {
+  class GoogleMapsDriver {
+
+    getName() {
+      return 'GoogleMapsDriver';
+    }
+
+    init($el, config = []) {
+      const ui = this;
+      const W = window;
+
+      ui.$el = $el;
+      ui.config = config;
+
+      W[`init${ui.getName()}`] = () => {
+        ui.googleApiLoaded();
+      };
+
+      $('body').append(`<script async defer src="https://maps.googleapis.com/maps/api/js?key=${config['key']}&callback=init${ui.getName()}"></script>`);
+    }
+
+    googleApiLoaded() {
+      const ui = this;
+      const $el = ui.$el;
+      const config = ui.config;
+      const $mapDiv = $el.find('.mapAPI-map');
+
+      console.log(`${ui.getName()}: API is loaded`);
+
+      // init fontawesome icons
+      ui.MarkerUI = MarkerUI.init($);
+
+      ui.map = new google.maps.Map($mapDiv[0], {
+        'zoom': (config['mapZoom'] ? config['mapZoom'] : 10),
+        'center': (config['center'] ? {
+          lat: config['center'][1],
+          lng: config['center'][0]
+        } : {
+          lat: 0,
+          lng: 0
+        }),
+        'fullscreenControl': true,
+        'styles': (config['style'] ? config['style'] : null),
+      });
+      $mapDiv.addClass('mapboxgl-map');
+
+
+      ui.popup = new ui.MarkerUI({
+        'map': ui.map,
+        'align': ['center', 'top'],
+        'divClass': 'mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none',
+        'html': '<div class="mapboxgl-popup-tip"></div><div class="mapboxgl-popup-content">' +
+          '<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' +
+          '<div class="html"></div>' +
+          '</div>',
+      });
+
+
+
+      $el.trigger(Events.MAPLOADED);
+    }
+
+    addMarker(crds, config) {
+      const ui = this;
+      const pos = {
+        lat: crds[1],
+        lng: crds[0]
+      };
+
+
+      const marker = new ui.MarkerUI({
+        'position': pos,
+        'map': ui.map,
+        'html': `<div class="mapboxgl-marker"><div id="Marker${ config['id'] }" data-id="${ config['id'] }" class="marker">${ config['icon'] }</div></div>`,
+        'onClick': (e) => {
+          const $popup = $(ui.popup.getDiv());
+          $popup.css({
+            'opacity': '0'
+          });
+          $popup.removeClass('d-none');
+
+          ui.popup.setPosition(pos, ['center', 'top']);
+          $popup.find('.mapboxgl-popup-content .html').html(config['content']);
+
+          $popup.find('.mapboxgl-popup-close-button').on('click', (e) => {
+            e.preventDefault();
+            $popup.addClass('d-none');
+          });
+
+          $popup.css({
+            'margin-left': '1rem',
+            'opacity': '1'
+          });
+        }
+      });
+
+
+      return marker;
+    }
+
+    addGeoJson(config) {
+      const ui = this;
+
+      const firstMarker = config['geojson'].features[0].geometry.coordinates;
+      //Map.setCenter(firstMarker);
+      const bounds = new google.maps.LatLngBounds();
+
+      // add markers to map
+      config['geojson'].features.forEach((marker) => {
+        const id = marker.id;
+        const crds = marker.geometry.coordinates;
+        const content = marker.properties.content;
+
+        ui.addMarker(crds, {
+          'id': id,
+          'content': content,
+          'icon': marker.icon,
+          'flyToMarker': config['flyToMarker']
+        });
+
+        bounds.extend({
+          lat: crds[1],
+          lng: crds[0]
+        });
+      });
+
+      ui.map.fitBounds(bounds, {
+        padding: 30,
+      });
+
+    }
+
+    getMap() {
+      const ui = this;
+      return ui.map;
+    }
+
+    getPopup() {
+      const ui = this;
+      return ui.popup;
+    }
+  }
+
+  return GoogleMapsDriver;
+})($);
+
+export default GoogleMapsDriver;

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

@@ -0,0 +1,197 @@
+const Obj = {
+  init: () => {
+    class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
+      constructor(options) {
+        super();
+        const ui = this;
+
+        ui.setMap(options.map);
+        ui.position = options.position;
+        ui.html =
+          (options.html ?
+            options.html :
+            '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
+          );
+        ui.divClass = options.divClass;
+        ui.align = options.align;
+        ui.isDebugMode = options.debug;
+        ui.onClick = options.onClick;
+        ui.onMouseOver = options.onMouseOver;
+
+        ui.isBoolean = arg => {
+          if (typeof arg === 'boolean') {
+            return true;
+          } else {
+            return false;
+          }
+        };
+
+        ui.isNotUndefined = arg => {
+          if (typeof arg !== 'undefined') {
+            return true;
+          } else {
+            return false;
+          }
+        };
+
+        ui.hasContent = arg => {
+          if (arg.length > 0) {
+            return true;
+          } else {
+            return false;
+          }
+        };
+
+        ui.isString = arg => {
+          if (typeof arg === 'string') {
+            return true;
+          } else {
+            return false;
+          }
+        };
+
+        ui.isFunction = arg => {
+          if (typeof arg === 'function') {
+            return true;
+          } else {
+            return false;
+          }
+        };
+      }
+      onAdd() {
+        const ui = this;
+
+        // Create div element.
+        ui.div = document.createElement('div');
+        ui.div.style.position = 'absolute';
+
+        // Validate and set custom div class
+        if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
+          ui.div.className = ui.divClass;
+
+        // Validate and set custom HTML
+        if (
+          ui.isNotUndefined(ui.html) &&
+          ui.hasContent(ui.html) &&
+          ui.isString(ui.html)
+        )
+          ui.div.innerHTML = ui.html;
+
+        // If debug mode is enabled custom content will be replaced with debug content
+        if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
+          ui.div.className = 'debug-mode';
+          ui.div.innerHTML =
+            '<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
+            '<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>';
+          ui.div.setAttribute(
+            'style',
+            'position: absolute;' +
+            'border: 5px dashed red;' +
+            'height: 150px;' +
+            'width: 150px;' +
+            'display: flex;' +
+            'justify-content: center;' +
+            'align-items: center;'
+          );
+        }
+
+        // Add element to clickable layer
+        ui.getPanes().overlayMouseTarget.appendChild(ui.div);
+
+        // Add listeners to the element.
+        google.maps.event.addDomListener(ui.div, 'click', event => {
+          google.maps.event.trigger(ui, 'click');
+          if (ui.isFunction(ui.onClick)) ui.onClick();
+          event.stopPropagation();
+        });
+
+        google.maps.event.addDomListener(ui.div, 'mouseover', event => {
+          google.maps.event.trigger(ui, 'mouseover');
+          if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
+          event.stopPropagation();
+        });
+      }
+
+      draw() {
+        const ui = this;
+
+        // Calculate position of div
+        var positionInPixels = ui.getProjection().fromLatLngToDivPixel(
+          new google.maps.LatLng(ui.position)
+        );
+
+        // Align HTML overlay relative to original position
+        var divOffset = {
+          y: undefined,
+          x: undefined
+        };
+
+        switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
+          case 'left top':
+            divOffset.y = ui.div.offsetHeight;
+            divOffset.x = ui.div.offsetWidth;
+            break;
+          case 'left center':
+            divOffset.y = ui.div.offsetHeight / 2;
+            divOffset.x = ui.div.offsetWidth;
+            break;
+          case 'left bottom':
+            divOffset.y = 0;
+            divOffset.x = ui.div.offsetWidth;
+            break;
+          case 'center top':
+            divOffset.y = ui.div.offsetHeight;
+            divOffset.x = ui.div.offsetWidth / 2;
+            break;
+          case 'center center':
+            divOffset.y = ui.div.offsetHeight / 2;
+            divOffset.x = ui.div.offsetWidth / 2;
+            break;
+          case 'center bottom':
+            divOffset.y = 0;
+            divOffset.x = ui.div.offsetWidth / 2;
+            break;
+          case 'right top':
+            divOffset.y = ui.div.offsetHeight;
+            divOffset.x = 0;
+            break;
+          case 'right center':
+            divOffset.y = ui.div.offsetHeight / 2;
+            divOffset.x = 0;
+            break;
+          case 'right bottom':
+            divOffset.y = 0;
+            divOffset.x = 0;
+            break;
+          default:
+            divOffset.y = ui.div.offsetHeight / 2;
+            divOffset.x = ui.div.offsetWidth / 2;
+        }
+
+        // Set position
+        ui.div.style.top = positionInPixels.y - divOffset.y + 'px';
+        ui.div.style.left = positionInPixels.x - divOffset.x + 'px';
+      }
+
+      getPosition() {
+        const ui = this;
+        return ui.position;
+      }
+
+      getDiv() {
+        const ui = this;
+        return ui.div;
+      }
+
+      setPosition(position, align) {
+        const ui = this;
+        ui.position = position;
+        ui.align = align;
+        ui.draw();
+      }
+    }
+    return GoogleMapsHtmlOverlay;
+  }
+}
+
+export default Obj;

src/js/_components/drivers/_map.mapbox.js

@@ -0,0 +1,178 @@
+'use strict';
+
+import $ from 'jquery';
+import mapBoxGL from 'mapbox-gl';
+
+import Events from '../../_events';
+
+const MapBoxDriver = (($) => {
+  class MapBoxDriver {
+
+    getName() {
+      return 'MapBoxDriver';
+    }
+
+    init($el, config = []) {
+      const ui = this;
+
+      mapBoxGL.accessToken = config['key'];
+
+      ui.map = new mapBoxGL.Map({
+          'container': $el.find('.mapAPI-map')[0],
+          'center': (config['center'] ? config['center'] : [0, 0]),
+          //hash: true,
+          'style': (config['style'] ? config['style'] : 'mapbox://styles/mapbox/streets-v9'),
+          'localIdeographFontFamily': config['font-family'],
+          'zoom': (config['mapZoom'] ? config['mapZoom'] : 10),
+          'attributionControl': false,
+          'antialias': true,
+          'accessToken': config['key']
+        })
+        .addControl(new mapBoxGL.AttributionControl({
+          compact: true,
+        }))
+        .addControl(new mapBoxGL.NavigationControl(), 'top-right')
+        .addControl(new mapBoxGL.GeolocateControl({
+          positionOptions: {
+            enableHighAccuracy: true,
+          },
+          trackUserLocation: true,
+        }), 'bottom-right')
+        .addControl(new mapBoxGL.ScaleControl({
+          maxWidth: 80,
+          unit: 'metric',
+        }), 'top-left')
+        .addControl(new mapBoxGL.FullscreenControl());
+
+      ui.map.on('load', (e) => {
+        $el.trigger(Events.MAPLOADED);
+      });
+
+      ui.popup = new mapBoxGL.Popup({
+        closeOnClick: false,
+        className: 'popup',
+      });
+    }
+
+    addMarker(crds, config) {
+      const ui = this;
+
+      // create a DOM el for the marker
+      const $el = $(`<div id="Marker${ config['id'] }" data-id="${ config['id'] }" class="marker">${ config['icon'] }</div>`);
+
+      $el.on('click', (e) => {
+        ui.popup.setLngLat(crds)
+          .setHTML(config['content'])
+          .addTo(ui.map);
+
+        if (config['flyToMarker']) {
+          ui.map.flyTo({
+            center: crds,
+            zoom: 17,
+          });
+        }
+
+        $(e.currentTarget).trigger(Events.MAPMARKERCLICK);
+      });
+
+      // add marker to map
+      const marker = new mapBoxGL.Marker($el[0])
+        .setLngLat(crds)
+        .addTo(ui.map);
+
+      return marker;
+    }
+
+    addGeoJson(config) {
+      const ui = this;
+      // Insert the layer beneath any symbol layer.
+      /*if (config['3d']) {
+        const layers = Map.getStyle().layers;
+        let labelLayerId;
+        for (let i = 0; i < layers.length; i++) {
+          if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
+            labelLayerId = layers[i].id;
+            break;
+          }
+        }
+
+        Map.addLayer({
+          'id': '3d-buildings',
+          'source': 'composite',
+          'source-layer': 'building',
+          'filter': ['==', 'extrude', 'true'],
+          'type': 'fill-extrusion',flyToBounds
+          'minzoom': 15,
+          'paint': {
+            'fill-extrusion-color': '#aaa',
+
+            // use an 'interpolate' expression to add a smooth transition effect to the
+            // buildings as the user zooms in
+            'fill-extrusion-height': [
+              "interpolate", ["linear"],
+              ["zoom"],
+              15, 0,
+              15.05, ["get", "height"],
+            ],
+            'fill-extrusion-base': [
+              "interpolate", ["linear"],
+              ["zoom"],
+              15, 0,
+              15.05, ["get", "min_height"],
+            ],
+            'fill-extrusion-opacity': .6,
+          },
+        }, labelLayerId);
+      }*/
+
+      const firstMarker = config['geojson'].features[0].geometry.coordinates;
+      //Map.setCenter(firstMarker);
+      const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker);
+
+      // add markers to map
+      config['geojson'].features.forEach((marker) => {
+        const id = marker.id;
+        const crds = marker.geometry.coordinates;
+        const content = marker.properties.content;
+
+        ui.addMarker(crds, {
+          'id': id,
+          'content': content,
+          'icon': marker.icon,
+          'flyToMarker': config['flyToMarker']
+        });
+
+        bounds.extend(crds);
+      });
+
+      ui.map.fitBounds(bounds, {
+        padding: 30,
+      });
+
+      ui.popup.on('close', (e) => {
+        if (config['flyToBounds']) {
+          ui.map.fitBounds(bounds, {
+            padding: 30,
+          });
+        }
+
+        $(e.currentTarget).trigger(Events.MAPPOPUPCLOSE);
+      });
+
+    }
+
+    getMap() {
+      const ui = this;
+      return ui.map;
+    }
+
+    getPopup() {
+      const ui = this;
+      return ui.popup;
+    }
+  }
+
+  return MapBoxDriver;
+})($);
+
+export default MapBoxDriver;

src/js/_consts.js

@@ -2,7 +2,10 @@
  * Add your global events here
  */
 
-module.exports = {
+import MAP_DRIVER from './_components/drivers/_map.google';
+//import MAP_DRIVER from './_components/drivers/_map.mapbox';
+
+const CONSTS = {
   ENVS: [
     'xs',
     'sm',
@@ -12,4 +15,7 @@ module.exports = {
     'xxl',
     'xxxl',
   ],
+  MAP_DRIVER: MAP_DRIVER
 };
+
+export default CONSTS;

src/js/app.js

@@ -19,7 +19,6 @@ import 'jquery-hammerjs/jquery.hammer';
 
 // conflicts with _components/_ui.hover.js (shows dropdown on hover)
 //import 'bootstrap/js/dist/dropdown';
-import './_components/_ui.flyout';
 import './_components/_ui.hover';
 
 import './_components/_ui.carousel';
@@ -40,7 +39,7 @@ import 'bootstrap/js/dist/tab';
 //import 'jquery-zoom/jquery.zoom';
 
 // FlyoutUI
-//import FlyoutUI from './_components/_ui.flyout';
+import FlyoutUI from './_components/_ui.flyout';
 
 // Toggle bootstrap form fields
 //import FormToggleUI from './_components/_ui.form.fields.toggle';
@@ -72,6 +71,11 @@ import '@a2nt/meta-lightbox/src/js/index';
 //import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
 //import Table from 'bootstrap-table/dist/bootstrap-table';
 
+// Map UI
+import MapApi from './_components/_ui.map.api';
+// Google Maps
+//import MapApi from './_components/_ui.map.api.google';
+
 import './_main';
 import './_layout';
 

src/scss/_components/_ui.map.scss

@@ -6,7 +6,15 @@
     margin-bottom: 1rem;
 }
 
+.mapboxgl-popup {
+    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);
 
     .mapboxgl-popup-close-button {
@@ -29,7 +37,10 @@
     text-align: center;
     color: $primary;
 
-    .fas {
+    .marker-icon,
+    .fas,
+    .fab,
+    .far {
         animation: pulse 0.8s linear infinite;
     }
 }