mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-10-22 11:05:45 +02:00
IMPROVEMENT: Google maps center clicked pin
This commit is contained in:
parent
b8a92a664b
commit
27cbf086fd
2
dist/js/app.js
vendored
2
dist/js/app.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/app.js.map
vendored
2
dist/js/app.js.map
vendored
File diff suppressed because one or more lines are too long
@ -31,23 +31,29 @@ const GoogleMapsDriver = (($) => {
|
|||||||
const config = ui.config;
|
const config = ui.config;
|
||||||
const $mapDiv = $el.find('.mapAPI-map');
|
const $mapDiv = $el.find('.mapAPI-map');
|
||||||
|
|
||||||
console.log(`${ui.getName()}: API is loaded`);
|
const zoom = (config['mapZoom'] ? config['mapZoom'] : 10);
|
||||||
|
const center = (config['center'] ? {
|
||||||
|
lat: config['center'][1],
|
||||||
|
lng: config['center'][0],
|
||||||
|
} : {
|
||||||
|
lat: 0,
|
||||||
|
lng: 0,
|
||||||
|
});
|
||||||
|
const style = (config['style'] ? config['style'] : null);
|
||||||
|
|
||||||
|
console.log(`${ui.getName()}: API is loaded`);
|
||||||
// init fontawesome icons
|
// init fontawesome icons
|
||||||
ui.MarkerUI = MarkerUI.init($);
|
ui.MarkerUI = MarkerUI.init($);
|
||||||
|
|
||||||
ui.map = new google.maps.Map($mapDiv[0], {
|
ui.map = new google.maps.Map($mapDiv[0], {
|
||||||
'zoom': (config['mapZoom'] ? config['mapZoom'] : 10),
|
zoom,
|
||||||
'center': (config['center'] ? {
|
center,
|
||||||
lat: config['center'][1],
|
|
||||||
lng: config['center'][0],
|
|
||||||
} : {
|
|
||||||
lat: 0,
|
|
||||||
lng: 0,
|
|
||||||
}),
|
|
||||||
'fullscreenControl': true,
|
'fullscreenControl': true,
|
||||||
'styles': (config['style'] ? config['style'] : null),
|
'styles': style,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
ui.default_zoom = zoom;
|
||||||
|
|
||||||
$mapDiv.addClass('mapboxgl-map');
|
$mapDiv.addClass('mapboxgl-map');
|
||||||
|
|
||||||
|
|
||||||
@ -78,25 +84,11 @@ const GoogleMapsDriver = (($) => {
|
|||||||
'position': pos,
|
'position': pos,
|
||||||
'map': ui.map,
|
'map': ui.map,
|
||||||
'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': (e) => {
|
'onClick': () => {
|
||||||
const $popup = $(ui.popup.getDiv());
|
const $el = $(`#Marker${ config['id'] }`);
|
||||||
$popup.css({
|
ui.showPopup(pos, config['content']);
|
||||||
'opacity': '0',
|
|
||||||
});
|
|
||||||
$popup.removeClass('d-none');
|
|
||||||
|
|
||||||
ui.popup.setPosition(pos, ['center', 'top']);
|
$el.trigger(Events.MAPMARKERCLICK);
|
||||||
$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',
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -104,6 +96,44 @@ const GoogleMapsDriver = (($) => {
|
|||||||
return marker;
|
return marker;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showPopup(pos, content) {
|
||||||
|
const ui = this;
|
||||||
|
const $popup = $(ui.popup.getDiv());
|
||||||
|
|
||||||
|
if (ui.config['flyToMarker']) {
|
||||||
|
ui.map.setCenter(pos); // panTo
|
||||||
|
ui.map.setZoom(18);
|
||||||
|
}
|
||||||
|
|
||||||
|
$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) => {
|
||||||
|
e.preventDefault();
|
||||||
|
ui.hidePopup();
|
||||||
|
});
|
||||||
|
|
||||||
|
$popup.css({
|
||||||
|
'margin-left': '1rem',
|
||||||
|
'opacity': '1',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
hidePopup() {
|
||||||
|
const ui = this;
|
||||||
|
const $popup = $(ui.popup.getDiv());
|
||||||
|
|
||||||
|
$popup.addClass('d-none');
|
||||||
|
ui.restoreBounds();
|
||||||
|
|
||||||
|
ui.$el.trigger(Events.MAPPOPUPCLOSE);
|
||||||
|
}
|
||||||
|
|
||||||
addGeoJson(config) {
|
addGeoJson(config) {
|
||||||
const ui = this;
|
const ui = this;
|
||||||
|
|
||||||
@ -132,8 +162,10 @@ const GoogleMapsDriver = (($) => {
|
|||||||
|
|
||||||
ui.map.fitBounds(bounds, {
|
ui.map.fitBounds(bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
});
|
}); //panToBounds
|
||||||
|
|
||||||
|
ui.default_bounds = bounds;
|
||||||
|
ui.default_zoom = ui.map.getZoom();
|
||||||
}
|
}
|
||||||
|
|
||||||
getMap() {
|
getMap() {
|
||||||
@ -145,6 +177,20 @@ const GoogleMapsDriver = (($) => {
|
|||||||
const ui = this;
|
const ui = this;
|
||||||
return ui.popup;
|
return ui.popup;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
restoreBounds() {
|
||||||
|
const ui = this;
|
||||||
|
|
||||||
|
ui.map.fitBounds(ui.default_bounds, {
|
||||||
|
padding: 30,
|
||||||
|
}); //panToBounds
|
||||||
|
}
|
||||||
|
|
||||||
|
restoreZoom() {
|
||||||
|
const ui = this;
|
||||||
|
|
||||||
|
ui.map.setZoom(ui.default_zoom);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return GoogleMapsDriver;
|
return GoogleMapsDriver;
|
||||||
|
62
src/js/types/Site.Controllers.MapElementController.js
Executable file
62
src/js/types/Site.Controllers.MapElementController.js
Executable file
@ -0,0 +1,62 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
import $ from 'jquery';
|
||||||
|
import Events from '../_events';
|
||||||
|
|
||||||
|
// Mapbox API
|
||||||
|
import '../_components/_ui.map.api';
|
||||||
|
|
||||||
|
const LocationUI = (($) => {
|
||||||
|
// Constants
|
||||||
|
const W = window;
|
||||||
|
const D = document;
|
||||||
|
const $Body = $('body');
|
||||||
|
|
||||||
|
const NAME = 'LocationUI';
|
||||||
|
class LocationUI {
|
||||||
|
// Static methods
|
||||||
|
|
||||||
|
static init() {
|
||||||
|
this.dispose();
|
||||||
|
console.log(`Initializing: ${NAME}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
static initMap() {
|
||||||
|
$('.mapAPI-map-container').find('.marker').on(`${Events.MAPMARKERCLICK}`, (e) => {
|
||||||
|
const $el = $(e.currentTarget);
|
||||||
|
const id = $el.data('id');
|
||||||
|
|
||||||
|
$Body.find('.locations .location').removeClass('active');
|
||||||
|
$Body.find(`.locations .location[data-id="${ id }"]`).addClass('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
$Body.find('.locations .location').on('click', (e) => {
|
||||||
|
const $el = $(e.currentTarget);
|
||||||
|
const id = $el.data('id');
|
||||||
|
|
||||||
|
$Body.find(`#Marker${id}`).click();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.mapAPI-map-container').on(Events.MAPPOPUPCLOSE, (e) => {
|
||||||
|
$Body.find('.locations .location').removeClass('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static dispose() {
|
||||||
|
console.log(`Destroying: ${NAME}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
|
LocationUI.init();
|
||||||
|
});
|
||||||
|
|
||||||
|
$(W).on(Events.MAPLOADED, () => {
|
||||||
|
LocationUI.initMap();
|
||||||
|
});
|
||||||
|
|
||||||
|
return LocationUI;
|
||||||
|
|
||||||
|
})($);
|
||||||
|
|
||||||
|
export default LocationUI;
|
Loading…
Reference in New Issue
Block a user