tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

FIX: _ui.map.google markers positions

Browse Source
This commit is contained in:
Tony Air 2020-01-31 22:47:21 +07:00
parent 6328b81ced
commit bdb0b06759
3 changed files with 76 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/js/_components/drivers/_map.google.js
View File

@ -4,7 +4,7 @@ import $ from 'jquery';
import Events from '../../_events'; import Events from '../../_events';
import MarkerUI from './_map.google.marker'; import MarkerUI from './_map.google.marker';
const GoogleMapsDriver = (($) => { const GoogleMapsDriver = ($ => {
class GoogleMapsDriver { class GoogleMapsDriver {
getName() { getName() {
return 'GoogleMapsDriver'; return 'GoogleMapsDriver';
@ -90,6 +90,7 @@ const GoogleMapsDriver = (($) => {
const marker = new ui.MarkerUI({ const marker = new ui.MarkerUI({
position: pos, position: pos,
map: ui.map, map: ui.map,
align: ['center', 'top'],
html: `<div class="mapboxgl-marker"><div id="Marker${config['id']}" data-id="${config['id']}" class="marker">${config['icon']}</div></div>`, html: `<div class="mapboxgl-marker"><div id="Marker${config['id']}" data-id="${config['id']}" class="marker">${config['icon']}</div></div>`,
onClick: () => { onClick: () => {
const $el = $(`#Marker${config['id']}`); const $el = $(`#Marker${config['id']}`);
@ -113,21 +114,25 @@ const GoogleMapsDriver = (($) => {
ui.map.setZoom(18); ui.map.setZoom(18);
} }
// keep it hidden to render content
$popup.css({ $popup.css({
opacity: '0', opacity: '0',
}); });
$popup.removeClass('d-none'); $popup.removeClass('d-none');
ui.popup.setPosition(pos, ['center', 'top']);
$popup.find('.mapboxgl-popup-content .html').html(content); $popup.find('.mapboxgl-popup-content .html').html(content);
$popup.find('.mapboxgl-popup-close-button').on('click', (e) => { $popup.find('.mapboxgl-popup-close-button').on('click', e => {
e.preventDefault(); e.preventDefault();
ui.hidePopup(); ui.hidePopup();
}); });
// set position when content was rendered
ui.popup.setPosition(pos, ['center', 'top']);
// display popup
$popup.css({ $popup.css({
'margin-left': '1rem', 'margin-top': '-1rem',
opacity: '1', opacity: '1',
}); });
} }
@ -200,7 +205,7 @@ const GoogleMapsDriver = (($) => {
const bounds = new google.maps.LatLngBounds(); const bounds = new google.maps.LatLngBounds();
// add markers to map // add markers to map
config['geojson'].features.forEach((marker) => { config['geojson'].features.forEach(marker => {
const id = marker.id; const id = marker.id;
const crds = marker.geometry.coordinates; const crds = marker.geometry.coordinates;
const content = marker.properties.content; const content = marker.properties.content;

89
src/js/_components/drivers/_map.google.marker.js
View File

@ -7,18 +7,16 @@ const Obj = {
ui.setMap(options.map); ui.setMap(options.map);
ui.position = options.position; ui.position = options.position;
ui.html = ui.html = options.html
(options.html ? ? options.html
options.html : : '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
'<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
);
ui.divClass = options.divClass; ui.divClass = options.divClass;
ui.align = options.align; ui.align = options.align;
ui.isDebugMode = options.debug; ui.isDebugMode = options.debug;
ui.onClick = options.onClick; ui.onClick = options.onClick;
ui.onMouseOver = options.onMouseOver; ui.onMouseOver = options.onMouseOver;
ui.isBoolean = (arg) => { ui.isBoolean = arg => {
if (typeof arg === 'boolean') { if (typeof arg === 'boolean') {
return true; return true;
} else { } else {
@ -26,7 +24,7 @@ const Obj = {
} }
}; };
ui.isNotUndefined = (arg) => { ui.isNotUndefined = arg => {
if (typeof arg !== 'undefined') { if (typeof arg !== 'undefined') {
return true; return true;
} else { } else {
@ -34,7 +32,7 @@ const Obj = {
} }
}; };
ui.hasContent = (arg) => { ui.hasContent = arg => {
if (arg.length > 0) { if (arg.length > 0) {
return true; return true;
} else { } else {
@ -42,7 +40,7 @@ const Obj = {
} }
}; };
ui.isString = (arg) => { ui.isString = arg => {
if (typeof arg === 'string') { if (typeof arg === 'string') {
return true; return true;
} else { } else {
@ -50,7 +48,7 @@ const Obj = {
} }
}; };
ui.isFunction = (arg) => { ui.isFunction = arg => {
if (typeof arg === 'function') { if (typeof arg === 'function') {
return true; return true;
} else { } else {
@ -91,7 +89,7 @@ const Obj = {
'width: 150px;' + 'width: 150px;' +
'display: flex;' + 'display: flex;' +
'justify-content: center;' + 'justify-content: center;' +
'align-items: center;' 'align-items: center;',
); );
} }
@ -99,13 +97,13 @@ const Obj = {
ui.getPanes().overlayMouseTarget.appendChild(ui.div); ui.getPanes().overlayMouseTarget.appendChild(ui.div);
// Add listeners to the element. // Add listeners to the element.
google.maps.event.addDomListener(ui.div, 'click', (event) => { google.maps.event.addDomListener(ui.div, 'click', event => {
google.maps.event.trigger(ui, 'click'); google.maps.event.trigger(ui, 'click');
if (ui.isFunction(ui.onClick)) ui.onClick(); if (ui.isFunction(ui.onClick)) ui.onClick();
event.stopPropagation(); event.stopPropagation();
}); });
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => { google.maps.event.addDomListener(ui.div, 'mouseover', event => {
google.maps.event.trigger(ui, 'mouseover'); google.maps.event.trigger(ui, 'mouseover');
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver(); if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation(); event.stopPropagation();
@ -114,63 +112,74 @@ const Obj = {
draw() { draw() {
const ui = this; const ui = this;
let $div = $(ui.div).find(
'.mapboxgl-marker,.marker-pin,.mapboxgl-popup,.popup',
);
if (!$div.length) {
$div = $(ui.div);
}
// Calculate position of div // Calculate position of div
var positionInPixels = ui.getProjection().fromLatLngToDivPixel( const positionInPixels = ui
new google.maps.LatLng(ui.position) .getProjection()
); .fromLatLngToDivPixel(new google.maps.LatLng(ui.position));
// Align HTML overlay relative to original position // Align HTML overlay relative to original position
var divOffset = { const offset = {
y: undefined, y: undefined,
x: undefined, x: undefined,
}; };
const divWidth = $div.outerWidth();
const divHeight = $div.outerHeight();
console.log(divWidth);
console.log(divHeight);
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') { switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
case 'left top': case 'left top':
divOffset.y = ui.div.offsetHeight; offset.y = divHeight;
divOffset.x = ui.div.offsetWidth; offset.x = divWidth;
break; break;
case 'left center': case 'left center':
divOffset.y = ui.div.offsetHeight / 2; offset.y = divHeight / 2;
divOffset.x = ui.div.offsetWidth; offset.x = divWidth;
break; break;
case 'left bottom': case 'left bottom':
divOffset.y = 0; offset.y = 0;
divOffset.x = ui.div.offsetWidth; offset.x = divWidth;
break; break;
case 'center top': case 'center top':
divOffset.y = ui.div.offsetHeight; offset.y = divHeight;
divOffset.x = ui.div.offsetWidth / 2; offset.x = divWidth / 2;
break; break;
case 'center center': case 'center center':
divOffset.y = ui.div.offsetHeight / 2; offset.y = divHeight / 2;
divOffset.x = ui.div.offsetWidth / 2; offset.x = divWidth / 2;
break; break;
case 'center bottom': case 'center bottom':
divOffset.y = 0; offset.y = 0;
divOffset.x = ui.div.offsetWidth / 2; offset.x = divWidth / 2;
break; break;
case 'right top': case 'right top':
divOffset.y = ui.div.offsetHeight; offset.y = divHeight;
divOffset.x = 0; offset.x = 0;
break; break;
case 'right center': case 'right center':
divOffset.y = ui.div.offsetHeight / 2; offset.y = divHeight / 2;
divOffset.x = 0; offset.x = 0;
break; break;
case 'right bottom': case 'right bottom':
divOffset.y = 0; offset.y = 0;
divOffset.x = 0; offset.x = 0;
break; break;
default: default:
divOffset.y = ui.div.offsetHeight / 2; offset.y = divHeight / 2;
divOffset.x = ui.div.offsetWidth / 2; offset.x = divWidth / 2;
break;
} }
// Set position // Set position
ui.div.style.top = `${positionInPixels.y - divOffset.y }px`; ui.div.style.top = `${positionInPixels.y - offset.y}px`;
ui.div.style.left = `${positionInPixels.x - divOffset.x }px`; ui.div.style.left = `${positionInPixels.x - offset.x}px`;
} }
getPosition() { getPosition() {
@ -192,6 +201,6 @@ const Obj = {
} }
return GoogleMapsHtmlOverlay; return GoogleMapsHtmlOverlay;
}, },
} };
export default Obj; export default Obj;

12
src/scss/_components/_ui.map.scss
View File

@ -1,5 +1,5 @@
@import "../_variables"; @import '../_variables';
@import "../_animations"; @import '../_animations';
//@import "~mapbox-gl/src/css/mapbox-gl.css"; //@import "~mapbox-gl/src/css/mapbox-gl.css";
@ -15,7 +15,7 @@
left: 0; left: 0;
display: flex; display: flex;
pointer-events: none; pointer-events: none;
font-size: .8rem; font-size: 0.8rem;
z-index: 4; z-index: 4;
line-height: 20px; line-height: 20px;
} }
@ -32,8 +32,8 @@
padding: 10px 10px 15px; padding: 10px 10px 15px;
border-radius: 3px; border-radius: 3px;
background: $white; background: $white;
min-width: 240px; width: 240px;
min-height: 5rem; height: 5rem;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
} }
@ -42,7 +42,7 @@
right: 0; right: 0;
top: 0; top: 0;
font-size: 2rem; font-size: 2rem;
padding: .5rem; padding: 0.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
&:hover, &:hover,