FIX: _ui.map.google markers positions

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

View File

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

View File

@ -7,18 +7,16 @@ const Obj = {
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.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) => {
ui.isBoolean = arg => {
if (typeof arg === 'boolean') {
return true;
} else {
@ -26,7 +24,7 @@ const Obj = {
}
};
ui.isNotUndefined = (arg) => {
ui.isNotUndefined = arg => {
if (typeof arg !== 'undefined') {
return true;
} else {
@ -34,7 +32,7 @@ const Obj = {
}
};
ui.hasContent = (arg) => {
ui.hasContent = arg => {
if (arg.length > 0) {
return true;
} else {
@ -42,7 +40,7 @@ const Obj = {
}
};
ui.isString = (arg) => {
ui.isString = arg => {
if (typeof arg === 'string') {
return true;
} else {
@ -50,7 +48,7 @@ const Obj = {
}
};
ui.isFunction = (arg) => {
ui.isFunction = arg => {
if (typeof arg === 'function') {
return true;
} else {
@ -91,7 +89,7 @@ const Obj = {
'width: 150px;' +
'display: flex;' +
'justify-content: center;' +
'align-items: center;'
'align-items: center;',
);
}
@ -99,13 +97,13 @@ const Obj = {
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
// 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');
if (ui.isFunction(ui.onClick)) ui.onClick();
event.stopPropagation();
});
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.addDomListener(ui.div, 'mouseover', event => {
google.maps.event.trigger(ui, 'mouseover');
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation();
@ -114,63 +112,74 @@ const Obj = {
draw() {
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
var positionInPixels = ui.getProjection().fromLatLngToDivPixel(
new google.maps.LatLng(ui.position)
);
const positionInPixels = ui
.getProjection()
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position));
// Align HTML overlay relative to original position
var divOffset = {
const offset = {
y: 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(' ') : '') {
case 'left top':
divOffset.y = ui.div.offsetHeight;
divOffset.x = ui.div.offsetWidth;
offset.y = divHeight;
offset.x = divWidth;
break;
case 'left center':
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth;
offset.y = divHeight / 2;
offset.x = divWidth;
break;
case 'left bottom':
divOffset.y = 0;
divOffset.x = ui.div.offsetWidth;
offset.y = 0;
offset.x = divWidth;
break;
case 'center top':
divOffset.y = ui.div.offsetHeight;
divOffset.x = ui.div.offsetWidth / 2;
offset.y = divHeight;
offset.x = divWidth / 2;
break;
case 'center center':
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth / 2;
offset.y = divHeight / 2;
offset.x = divWidth / 2;
break;
case 'center bottom':
divOffset.y = 0;
divOffset.x = ui.div.offsetWidth / 2;
offset.y = 0;
offset.x = divWidth / 2;
break;
case 'right top':
divOffset.y = ui.div.offsetHeight;
divOffset.x = 0;
offset.y = divHeight;
offset.x = 0;
break;
case 'right center':
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = 0;
offset.y = divHeight / 2;
offset.x = 0;
break;
case 'right bottom':
divOffset.y = 0;
divOffset.x = 0;
offset.y = 0;
offset.x = 0;
break;
default:
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth / 2;
offset.y = divHeight / 2;
offset.x = divWidth / 2;
break;
}
// Set position
ui.div.style.top = `${positionInPixels.y - divOffset.y }px`;
ui.div.style.left = `${positionInPixels.x - divOffset.x }px`;
ui.div.style.top = `${positionInPixels.y - offset.y}px`;
ui.div.style.left = `${positionInPixels.x - offset.x}px`;
}
getPosition() {
@ -192,6 +201,6 @@ const Obj = {
}
return GoogleMapsHtmlOverlay;
},
}
};
export default Obj;

View File

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