Add map api handlers
This commit is contained in:
Bartek Fabiszewski
parent
eda84b964c
commit
2086d20192
@ -1,333 +0,0 @@
|
|||||||
/*
|
|
||||||
* μlogger
|
|
||||||
*
|
|
||||||
* Copyright(C) 2019 Bartek Fabiszewski (www.fabiszewski.net)
|
|
||||||
*
|
|
||||||
* This is free software; you can redistribute it and/or modify it under
|
|
||||||
* the terms of the GNU General Public License as published by
|
|
||||||
* the Free Software Foundation; either version 3 of the License, or
|
|
||||||
* (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful, but
|
|
||||||
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
||||||
* General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU General Public License
|
|
||||||
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { config, lang } from '../constants.js';
|
|
||||||
import uEvent from '../event.js';
|
|
||||||
import uUI from '../ui.js';
|
|
||||||
import uUtils from '../utils.js';
|
|
||||||
|
|
||||||
// google maps
|
|
||||||
/**
|
|
||||||
* Google Maps API module
|
|
||||||
* @module gmApi
|
|
||||||
* @implements {uMap.api}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** @type {google.maps.Map} */
|
|
||||||
let map = null;
|
|
||||||
/** @type {uBinder} */
|
|
||||||
let binder = null;
|
|
||||||
/** @type {google.maps.Polyline[]} */
|
|
||||||
const polies = [];
|
|
||||||
/** @type {google.maps.Marker[]} */
|
|
||||||
const markers = [];
|
|
||||||
/** @type {google.maps.InfoWindow[]} */
|
|
||||||
const popups = [];
|
|
||||||
/** @type {google.maps.InfoWindow} */
|
|
||||||
let openPopup = null;
|
|
||||||
/** @type {google.maps.PolylineOptions} */
|
|
||||||
let polyOptions = null;
|
|
||||||
/** @type {google.maps.MapOptions} */
|
|
||||||
let mapOptions = null;
|
|
||||||
/** @type {number} */
|
|
||||||
let timeoutHandle = 0;
|
|
||||||
const name = 'gmaps';
|
|
||||||
let isLoaded = false;
|
|
||||||
let authError = false;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize map
|
|
||||||
* @param {uBinder} b
|
|
||||||
* @param {HTMLElement} el
|
|
||||||
*/
|
|
||||||
function init(b, el) {
|
|
||||||
|
|
||||||
binder = b;
|
|
||||||
|
|
||||||
const url = '//maps.googleapis.com/maps/api/js?' + ((config.gkey != null) ? ('key=' + config.gkey + '&') : '') + 'callback=gm_loaded';
|
|
||||||
uUtils.addScript(url, 'mapapi_gmaps');
|
|
||||||
if (!isLoaded) {
|
|
||||||
throw new Error('Google Maps API not ready');
|
|
||||||
}
|
|
||||||
start(el);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Start map engine when loaded
|
|
||||||
* @param {HTMLElement} el
|
|
||||||
*/
|
|
||||||
function start(el) {
|
|
||||||
if (authError) {
|
|
||||||
window.gm_authFailure();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
google.maps.visualRefresh = true;
|
|
||||||
// noinspection JSValidateTypes
|
|
||||||
polyOptions = {
|
|
||||||
strokeColor: config.strokeColor,
|
|
||||||
strokeOpacity: config.strokeOpacity,
|
|
||||||
strokeWeight: config.strokeWeight
|
|
||||||
};
|
|
||||||
// noinspection JSValidateTypes
|
|
||||||
mapOptions = {
|
|
||||||
center: new google.maps.LatLng(config.init_latitude, config.init_longitude),
|
|
||||||
zoom: 8,
|
|
||||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
||||||
scaleControl: true
|
|
||||||
};
|
|
||||||
map = new google.maps.Map(el, mapOptions);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clean up API
|
|
||||||
*/
|
|
||||||
function cleanup() {
|
|
||||||
polies.length = 0;
|
|
||||||
markers.length = 0;
|
|
||||||
popups.length = 0;
|
|
||||||
polyOptions = null;
|
|
||||||
mapOptions = null;
|
|
||||||
openPopup = null;
|
|
||||||
if (map && map.getDiv()) {
|
|
||||||
map.getDiv().innerHTML = '';
|
|
||||||
}
|
|
||||||
map = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Display track
|
|
||||||
* @param {uTrack} track
|
|
||||||
* @param {boolean} update Should fit bounds if true
|
|
||||||
*/
|
|
||||||
function displayTrack(track, update) {
|
|
||||||
if (!track) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// init polyline
|
|
||||||
const poly = new google.maps.Polyline(polyOptions);
|
|
||||||
poly.setMap(map);
|
|
||||||
const path = poly.getPath();
|
|
||||||
const latlngbounds = new google.maps.LatLngBounds();
|
|
||||||
let i = 0;
|
|
||||||
for (const position of track.positions) {
|
|
||||||
// set marker
|
|
||||||
setMarker(i++, track);
|
|
||||||
// update polyline
|
|
||||||
const coordinates = new google.maps.LatLng(position.latitude, position.longitude);
|
|
||||||
if (track.continuous) {
|
|
||||||
path.push(coordinates);
|
|
||||||
}
|
|
||||||
latlngbounds.extend(coordinates);
|
|
||||||
}
|
|
||||||
if (update) {
|
|
||||||
map.fitBounds(latlngbounds);
|
|
||||||
if (i === 1) {
|
|
||||||
// only one point, zoom out
|
|
||||||
const zListener =
|
|
||||||
google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
|
|
||||||
if (this.getZoom()) {
|
|
||||||
this.setZoom(15);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setTimeout(function () { google.maps.event.removeListener(zListener) }, 2000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
polies.push(poly);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clear map
|
|
||||||
*/
|
|
||||||
function clearMap() {
|
|
||||||
if (polies) {
|
|
||||||
for (let i = 0; i < polies.length; i++) {
|
|
||||||
polies[i].setMap(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (markers) {
|
|
||||||
for (let i = 0; i < markers.length; i++) {
|
|
||||||
// google.maps.event.removeListener(popups[i].listener);
|
|
||||||
google.maps.event.clearInstanceListeners(popups[i]);
|
|
||||||
popups[i].setMap(null);
|
|
||||||
markers[i].setMap(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
markers.length = 0;
|
|
||||||
polies.length = 0;
|
|
||||||
popups.length = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} fill Fill color
|
|
||||||
* @param {boolean} isLarge Is large icon
|
|
||||||
* @param {boolean} isExtra Is styled with extra mark
|
|
||||||
* @return {google.maps.Icon}
|
|
||||||
*/
|
|
||||||
function getMarkerIcon(fill, isLarge, isExtra) {
|
|
||||||
return {
|
|
||||||
anchor: new google.maps.Point(15, 35),
|
|
||||||
url: uUI.getSvgSrc(fill, isLarge, isExtra)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set marker
|
|
||||||
* @param {uTrack} track
|
|
||||||
* @param {number} id
|
|
||||||
*/
|
|
||||||
function setMarker(id, track) {
|
|
||||||
// marker
|
|
||||||
const position = track.positions[id];
|
|
||||||
const posLen = track.length;
|
|
||||||
// noinspection JSCheckFunctionSignatures
|
|
||||||
const marker = new google.maps.Marker({
|
|
||||||
position: new google.maps.LatLng(position.latitude, position.longitude),
|
|
||||||
title: (new Date(position.timestamp * 1000)).toLocaleString(),
|
|
||||||
map: map
|
|
||||||
});
|
|
||||||
const isExtra = position.hasComment() || position.hasImage();
|
|
||||||
let icon = getMarkerIcon(isExtra ? config.colorExtra : config.colorNormal, false, isExtra);
|
|
||||||
if (id === posLen - 1) {
|
|
||||||
icon = getMarkerIcon(config.colorStop, true, isExtra);
|
|
||||||
} else if (id === 0) {
|
|
||||||
icon = getMarkerIcon(config.colorStart, true, isExtra);
|
|
||||||
}
|
|
||||||
marker.setIcon(icon);
|
|
||||||
// popup
|
|
||||||
const popup = new google.maps.InfoWindow();
|
|
||||||
|
|
||||||
marker.addListener('click',
|
|
||||||
((i) => () => {
|
|
||||||
popup.setContent(uUI.getPopupHtml(i));
|
|
||||||
popup.open(map, marker);
|
|
||||||
binder.dispatchEvent(uEvent.MARKER_SELECT, i);
|
|
||||||
openPopup = popup;
|
|
||||||
popup.addListener('closeclick', () => {
|
|
||||||
binder.dispatchEvent(uEvent.MARKER_SELECT);
|
|
||||||
google.maps.event.clearListeners(popup, 'closeclick');
|
|
||||||
openPopup = null;
|
|
||||||
});
|
|
||||||
})(id));
|
|
||||||
marker.addListener('mouseover',
|
|
||||||
((i) => () => {
|
|
||||||
binder.dispatchEvent(uEvent.MARKER_OVER, i);
|
|
||||||
})(id));
|
|
||||||
marker.addListener('mouseout',
|
|
||||||
() => {
|
|
||||||
binder.dispatchEvent(uEvent.MARKER_OVER);
|
|
||||||
});
|
|
||||||
|
|
||||||
markers.push(marker);
|
|
||||||
popups.push(popup);
|
|
||||||
}
|
|
||||||
|
|
||||||
function animateMarker(id) {
|
|
||||||
if (openPopup) {
|
|
||||||
openPopup.close();
|
|
||||||
clearTimeout(timeoutHandle);
|
|
||||||
}
|
|
||||||
const icon = markers[id].getIcon();
|
|
||||||
markers[id].setIcon(getMarkerIcon(config.colorHilite, false, false));
|
|
||||||
markers[id].setAnimation(google.maps.Animation.BOUNCE);
|
|
||||||
timeoutHandle = setTimeout(() => {
|
|
||||||
markers[id].setIcon(icon);
|
|
||||||
markers[id].setAnimation(null);
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get map bounds
|
|
||||||
* eg. ((52.20105108685229, 20.789387865580238), (52.292069558807135, 21.172192736185707))
|
|
||||||
* @returns {number[]} Bounds
|
|
||||||
*/
|
|
||||||
function getBounds() {
|
|
||||||
const bounds = map.getBounds();
|
|
||||||
const lat_sw = bounds.getSouthWest().lat();
|
|
||||||
const lon_sw = bounds.getSouthWest().lng();
|
|
||||||
const lat_ne = bounds.getNorthEast().lat();
|
|
||||||
const lon_ne = bounds.getNorthEast().lng();
|
|
||||||
return [ lon_sw, lat_sw, lon_ne, lat_ne ];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Zoom to track extent
|
|
||||||
*/
|
|
||||||
function zoomToExtent() {
|
|
||||||
const latlngbounds = new google.maps.LatLngBounds();
|
|
||||||
for (let i = 0; i < markers.length; i++) {
|
|
||||||
const coordinates = new google.maps.LatLng(markers[i].position.lat(), markers[i].position.lng());
|
|
||||||
latlngbounds.extend(coordinates);
|
|
||||||
}
|
|
||||||
map.fitBounds(latlngbounds);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Zoom to bounds
|
|
||||||
* @param {number[]} bounds
|
|
||||||
*/
|
|
||||||
function zoomToBounds(bounds) {
|
|
||||||
const sw = new google.maps.LatLng(bounds[1], bounds[0]);
|
|
||||||
const ne = new google.maps.LatLng(bounds[3], bounds[2]);
|
|
||||||
const latLngBounds = new google.maps.LatLngBounds(sw, ne);
|
|
||||||
map.fitBounds(latLngBounds);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update size
|
|
||||||
*/
|
|
||||||
function updateSize() {
|
|
||||||
// ignore for google API
|
|
||||||
}
|
|
||||||
|
|
||||||
function setAuthError() { authError = true; }
|
|
||||||
function setLoaded() { isLoaded = true; }
|
|
||||||
|
|
||||||
export {
|
|
||||||
name,
|
|
||||||
init,
|
|
||||||
cleanup,
|
|
||||||
displayTrack,
|
|
||||||
clearMap,
|
|
||||||
animateMarker,
|
|
||||||
getBounds,
|
|
||||||
zoomToExtent,
|
|
||||||
zoomToBounds,
|
|
||||||
updateSize
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Callback for Google Maps API
|
|
||||||
* It will be called when authentication fails
|
|
||||||
*/
|
|
||||||
window.gm_authFailure = function () {
|
|
||||||
setAuthError();
|
|
||||||
let message = uUtils.sprintf(lang.strings['apifailure'], 'Google Maps');
|
|
||||||
message += '<br><br>' + lang.strings['gmauthfailure'];
|
|
||||||
message += '<br><br>' + lang.strings['gmapilink'];
|
|
||||||
uUI.resolveModal(message);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Callback for Google Maps API
|
|
||||||
* It will be called when API is loaded
|
|
||||||
*/
|
|
||||||
window.gm_loaded = function () {
|
|
||||||
setLoaded();
|
|
||||||
};
|
|
||||||
@ -1,536 +0,0 @@
|
|||||||
/*
|
|
||||||
* μlogger
|
|
||||||
*
|
|
||||||
* Copyright(C) 2019 Bartek Fabiszewski (www.fabiszewski.net)
|
|
||||||
*
|
|
||||||
* This is free software; you can redistribute it and/or modify it under
|
|
||||||
* the terms of the GNU General Public License as published by
|
|
||||||
* the Free Software Foundation; either version 3 of the License, or
|
|
||||||
* (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful, but
|
|
||||||
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
||||||
* General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU General Public License
|
|
||||||
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { config } from '../constants.js';
|
|
||||||
import uEvent from '../event.js';
|
|
||||||
import uUI from '../ui.js';
|
|
||||||
import uUtils from '../utils.js';
|
|
||||||
|
|
||||||
// openlayers 3+
|
|
||||||
/**
|
|
||||||
* OpenLayers API module
|
|
||||||
* @module olApi
|
|
||||||
* @implements {uMap.api}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** @type {ol.Map} */
|
|
||||||
let map = null;
|
|
||||||
/** @type {uBinder} */
|
|
||||||
let binder = null;
|
|
||||||
/** @type {ol.layer.Vector} */
|
|
||||||
let layerTrack = null;
|
|
||||||
/** @type {ol.layer.Vector} */
|
|
||||||
let layerMarkers = null;
|
|
||||||
/** @type {ol.layer.Base} */
|
|
||||||
let selectedLayer = null;
|
|
||||||
/** @type {ol.style.Style|{}} */
|
|
||||||
let olStyles = {};
|
|
||||||
/** @type {string} */
|
|
||||||
const name = 'openlayers';
|
|
||||||
/** @type {?number} */
|
|
||||||
let pointOver = null;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize map
|
|
||||||
* @param {uBinder} b
|
|
||||||
* @param {HTMLElement} target
|
|
||||||
*/
|
|
||||||
function init(b, target) {
|
|
||||||
|
|
||||||
binder = b;
|
|
||||||
|
|
||||||
uUtils.addScript('//cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList', 'mapapi_openlayers_polyfill');
|
|
||||||
uUtils.addScript('js/lib/ol.js', 'mapapi_openlayers');
|
|
||||||
uUtils.addCss('css/ol.css', 'ol_css');
|
|
||||||
|
|
||||||
const controls = [
|
|
||||||
new ol.control.Zoom(),
|
|
||||||
new ol.control.Rotate(),
|
|
||||||
new ol.control.ScaleLine(),
|
|
||||||
new ol.control.ZoomToExtent({ label: getExtentImg() })
|
|
||||||
];
|
|
||||||
|
|
||||||
const view = new ol.View({
|
|
||||||
center: ol.proj.fromLonLat([ config.init_longitude, config.init_latitude ]),
|
|
||||||
zoom: 8
|
|
||||||
});
|
|
||||||
|
|
||||||
map = new ol.Map({
|
|
||||||
target: target,
|
|
||||||
controls: controls,
|
|
||||||
view: view
|
|
||||||
});
|
|
||||||
|
|
||||||
map.on('pointermove', (e) => {
|
|
||||||
const feature = map.forEachFeatureAtPixel(e.pixel,
|
|
||||||
(_feature, _layer) => {
|
|
||||||
if (_layer.get('name') === 'Markers') {
|
|
||||||
return _feature;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
// emit mouse over marker event
|
|
||||||
/** @type {?number} */
|
|
||||||
const id = feature ? feature.getId() : null;
|
|
||||||
if (id !== pointOver) {
|
|
||||||
binder.dispatchEvent(uEvent.MARKER_OVER);
|
|
||||||
pointOver = id;
|
|
||||||
if (id) {
|
|
||||||
binder.dispatchEvent(uEvent.MARKER_OVER, id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// change mouse cursor when over marker
|
|
||||||
if (feature) {
|
|
||||||
map.getTargetElement().style.cursor = 'pointer';
|
|
||||||
} else {
|
|
||||||
map.getTargetElement().style.cursor = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
initLayers();
|
|
||||||
initStyles();
|
|
||||||
initPopups();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize map layers
|
|
||||||
*/
|
|
||||||
function initLayers() {
|
|
||||||
// default layer: OpenStreetMap
|
|
||||||
const osm = new ol.layer.Tile({
|
|
||||||
name: 'OpenStreetMap',
|
|
||||||
visible: true,
|
|
||||||
source: new ol.source.OSM()
|
|
||||||
});
|
|
||||||
map.addLayer(osm);
|
|
||||||
selectedLayer = osm;
|
|
||||||
|
|
||||||
// add extra tile layers
|
|
||||||
for (const layerName in config.ol_layers) {
|
|
||||||
if (config.ol_layers.hasOwnProperty(layerName)) {
|
|
||||||
const layerUrl = config.ol_layers[layerName];
|
|
||||||
const ol_layer = new ol.layer.Tile({
|
|
||||||
name: layerName,
|
|
||||||
visible: false,
|
|
||||||
source: new ol.source.XYZ({
|
|
||||||
url: layerUrl
|
|
||||||
})
|
|
||||||
});
|
|
||||||
map.addLayer(ol_layer);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// add track and markers layers
|
|
||||||
const lineStyle = new ol.style.Style({
|
|
||||||
stroke: new ol.style.Stroke({
|
|
||||||
color: uUtils.hexToRGBA(config.strokeColor, config.strokeOpacity),
|
|
||||||
width: config.strokeWeight
|
|
||||||
})
|
|
||||||
});
|
|
||||||
layerTrack = new ol.layer.Vector({
|
|
||||||
name: 'Track',
|
|
||||||
type: 'data',
|
|
||||||
source: new ol.source.Vector(),
|
|
||||||
style: lineStyle
|
|
||||||
});
|
|
||||||
layerMarkers = new ol.layer.Vector({
|
|
||||||
name: 'Markers',
|
|
||||||
type: 'data',
|
|
||||||
source: new ol.source.Vector()
|
|
||||||
});
|
|
||||||
map.addLayer(layerTrack);
|
|
||||||
map.addLayer(layerMarkers);
|
|
||||||
|
|
||||||
initLayerSwitcher();
|
|
||||||
}
|
|
||||||
|
|
||||||
function initStyles() {
|
|
||||||
olStyles = {};
|
|
||||||
const iconStart = new ol.style.Icon({
|
|
||||||
anchor: [ 0.5, 1 ],
|
|
||||||
src: uUI.getSvgSrc(config.colorStart, true)
|
|
||||||
});
|
|
||||||
const iconStop = new ol.style.Icon({
|
|
||||||
anchor: [ 0.5, 1 ],
|
|
||||||
src: uUI.getSvgSrc(config.colorStop, true)
|
|
||||||
});
|
|
||||||
const iconStartExtra = new ol.style.Icon({
|
|
||||||
anchor: [ 0.5, 1 ],
|
|
||||||
src: uUI.getSvgSrc(config.colorStart, true, true)
|
|
||||||
});
|
|
||||||
const iconStopExtra = new ol.style.Icon({
|
|
||||||
anchor: [ 0.5, 1 ],
|
|
||||||
src: uUI.getSvgSrc(config.colorStop, true, true)
|
|
||||||
});
|
|
||||||
const iconNormal = new ol.style.Icon({
|
|
||||||
anchor: [ 0.5, 1 ],
|
|
||||||
opacity: 0.7,
|
|
||||||
src: uUI.getSvgSrc(config.colorNormal, false)
|
|
||||||
});
|
|
||||||
const iconExtra = new ol.style.Icon({
|
|
||||||
anchor: [ 0.5, 1 ],
|
|
||||||
src: uUI.getSvgSrc(config.colorExtra, false, true)
|
|
||||||
});
|
|
||||||
const iconHilite = new ol.style.Icon({
|
|
||||||
anchor: [ 0.5, 1 ],
|
|
||||||
src: uUI.getSvgSrc(config.colorHilite, false)
|
|
||||||
});
|
|
||||||
olStyles['start'] = new ol.style.Style({
|
|
||||||
image: iconStart
|
|
||||||
});
|
|
||||||
olStyles['stop'] = new ol.style.Style({
|
|
||||||
image: iconStop
|
|
||||||
});
|
|
||||||
olStyles['startExtra'] = new ol.style.Style({
|
|
||||||
image: iconStartExtra
|
|
||||||
});
|
|
||||||
olStyles['stopExtra'] = new ol.style.Style({
|
|
||||||
image: iconStopExtra
|
|
||||||
});
|
|
||||||
olStyles['normal'] = new ol.style.Style({
|
|
||||||
image: iconNormal
|
|
||||||
});
|
|
||||||
olStyles['extra'] = new ol.style.Style({
|
|
||||||
image: iconExtra
|
|
||||||
});
|
|
||||||
olStyles['hilite'] = new ol.style.Style({
|
|
||||||
image: iconHilite
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initPopups() {
|
|
||||||
const popupContainer = document.createElement('div');
|
|
||||||
popupContainer.id = 'popup';
|
|
||||||
popupContainer.className = 'ol-popup';
|
|
||||||
document.body.appendChild(popupContainer);
|
|
||||||
const popupCloser = document.createElement('a');
|
|
||||||
popupCloser.id = 'popup-closer';
|
|
||||||
popupCloser.className = 'ol-popup-closer';
|
|
||||||
popupCloser.href = '#';
|
|
||||||
popupContainer.appendChild(popupCloser);
|
|
||||||
const popupContent = document.createElement('div');
|
|
||||||
popupContent.id = 'popup-content';
|
|
||||||
popupContainer.appendChild(popupContent);
|
|
||||||
|
|
||||||
const popup = new ol.Overlay({
|
|
||||||
element: popupContainer,
|
|
||||||
autoPan: true,
|
|
||||||
autoPanAnimation: {
|
|
||||||
duration: 250
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
popupCloser.onclick = () => {
|
|
||||||
// eslint-disable-next-line no-undefined
|
|
||||||
popup.setPosition(undefined);
|
|
||||||
popupCloser.blur();
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// add click handler to map to show popup
|
|
||||||
map.on('click', (e) => {
|
|
||||||
const coordinate = e.coordinate;
|
|
||||||
const feature = map.forEachFeatureAtPixel(e.pixel,
|
|
||||||
(_feature, _layer) => {
|
|
||||||
if (_layer.get('name') === 'Markers') {
|
|
||||||
return _feature;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
if (feature) {
|
|
||||||
// popup show
|
|
||||||
popup.setPosition(coordinate);
|
|
||||||
popupContent.innerHTML = uUI.getPopupHtml(feature.getId());
|
|
||||||
map.addOverlay(popup);
|
|
||||||
binder.dispatchEvent(uEvent.MARKER_SELECT, feature.getId());
|
|
||||||
} else {
|
|
||||||
// popup destroy
|
|
||||||
// eslint-disable-next-line no-undefined
|
|
||||||
popup.setPosition(undefined);
|
|
||||||
binder.dispatchEvent(uEvent.MARKER_SELECT);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initLayerSwitcher() {
|
|
||||||
const switcher = document.createElement('div');
|
|
||||||
switcher.id = 'switcher';
|
|
||||||
switcher.className = 'ol-control';
|
|
||||||
document.body.appendChild(switcher);
|
|
||||||
const switcherContent = document.createElement('div');
|
|
||||||
switcherContent.id = 'switcher-content';
|
|
||||||
switcherContent.className = 'ol-layerswitcher';
|
|
||||||
switcher.appendChild(switcherContent);
|
|
||||||
|
|
||||||
map.getLayers().forEach((_layer) => {
|
|
||||||
const layerLabel = document.createElement('label');
|
|
||||||
layerLabel.innerHTML = _layer.get('name');
|
|
||||||
switcherContent.appendChild(layerLabel);
|
|
||||||
|
|
||||||
const layerRadio = document.createElement('input');
|
|
||||||
if (_layer.get('type') === 'data') {
|
|
||||||
layerRadio.type = 'checkbox';
|
|
||||||
layerLabel.className = 'ol-datalayer';
|
|
||||||
} else {
|
|
||||||
layerRadio.type = 'radio';
|
|
||||||
}
|
|
||||||
layerRadio.name = 'layer';
|
|
||||||
layerRadio.value = _layer.get('name');
|
|
||||||
layerRadio.onclick = switchLayer;
|
|
||||||
if (_layer.getVisible()) {
|
|
||||||
layerRadio.checked = true;
|
|
||||||
}
|
|
||||||
layerLabel.insertBefore(layerRadio, layerLabel.childNodes[0]);
|
|
||||||
});
|
|
||||||
|
|
||||||
function switchLayer() {
|
|
||||||
const targetName = this.value;
|
|
||||||
map.getLayers().forEach((_layer) => {
|
|
||||||
if (_layer.get('name') === targetName) {
|
|
||||||
if (_layer.get('type') === 'data') {
|
|
||||||
if (_layer.getVisible()) {
|
|
||||||
_layer.setVisible(false);
|
|
||||||
} else {
|
|
||||||
_layer.setVisible(true);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
selectedLayer.setVisible(false);
|
|
||||||
selectedLayer = _layer;
|
|
||||||
_layer.setVisible(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const switcherButton = document.createElement('button');
|
|
||||||
const layerImg = document.createElement('img');
|
|
||||||
layerImg.src = 'images/layers.svg';
|
|
||||||
layerImg.style.width = '60%';
|
|
||||||
switcherButton.appendChild(layerImg);
|
|
||||||
|
|
||||||
const switcherHandle = () => {
|
|
||||||
const el = document.getElementById('switcher');
|
|
||||||
if (el.style.display === 'block') {
|
|
||||||
el.style.display = 'none';
|
|
||||||
} else {
|
|
||||||
el.style.display = 'block';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
switcherButton.addEventListener('click', switcherHandle, false);
|
|
||||||
switcherButton.addEventListener('touchstart', switcherHandle, false);
|
|
||||||
|
|
||||||
const element = document.createElement('div');
|
|
||||||
element.className = 'ol-switcher-button ol-unselectable ol-control';
|
|
||||||
element.appendChild(switcherButton);
|
|
||||||
|
|
||||||
const switcherControl = new ol.control.Control({
|
|
||||||
element: element
|
|
||||||
});
|
|
||||||
map.addControl(switcherControl);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clean up API
|
|
||||||
*/
|
|
||||||
function cleanup() {
|
|
||||||
layerTrack = null;
|
|
||||||
layerMarkers = null;
|
|
||||||
selectedLayer = null;
|
|
||||||
olStyles = null;
|
|
||||||
uUI.removeElementById('popup');
|
|
||||||
uUI.removeElementById('switcher');
|
|
||||||
if (map && map.getTargetElement()) {
|
|
||||||
map.getTargetElement().innerHTML = '';
|
|
||||||
}
|
|
||||||
map = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Display track
|
|
||||||
* @param {uTrack} track Track
|
|
||||||
* @param {boolean} update Should fit bounds if true
|
|
||||||
*/
|
|
||||||
function displayTrack(track, update) {
|
|
||||||
if (!track) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let i = 0;
|
|
||||||
const lineString = new ol.geom.LineString([]);
|
|
||||||
for (const position of track.positions) {
|
|
||||||
// set marker
|
|
||||||
setMarker(i++, track);
|
|
||||||
if (track.continuous) {
|
|
||||||
// update polyline
|
|
||||||
lineString.appendCoordinate(ol.proj.fromLonLat([ position.longitude, position.latitude ]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (lineString.getLength() > 0) {
|
|
||||||
const lineFeature = new ol.Feature({
|
|
||||||
geometry: lineString
|
|
||||||
});
|
|
||||||
layerTrack.getSource().addFeature(lineFeature);
|
|
||||||
}
|
|
||||||
|
|
||||||
let extent = layerMarkers.getSource().getExtent();
|
|
||||||
|
|
||||||
map.getControls().forEach((el) => {
|
|
||||||
if (el instanceof ol.control.ZoomToExtent) {
|
|
||||||
map.removeControl(el);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (update) {
|
|
||||||
map.getView().fit(extent);
|
|
||||||
const zoom = map.getView().getZoom();
|
|
||||||
if (zoom > 20) {
|
|
||||||
map.getView().setZoom(20);
|
|
||||||
extent = map.getView().calculateExtent(map.getSize());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const zoomToExtentControl = new ol.control.ZoomToExtent({
|
|
||||||
extent,
|
|
||||||
label: getExtentImg()
|
|
||||||
});
|
|
||||||
map.addControl(zoomToExtentControl);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clear map
|
|
||||||
*/
|
|
||||||
function clearMap() {
|
|
||||||
if (layerTrack) {
|
|
||||||
layerTrack.getSource().clear();
|
|
||||||
}
|
|
||||||
if (layerMarkers) {
|
|
||||||
layerMarkers.getSource().clear();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMarkerStyle(position, id, posLen) {
|
|
||||||
let iconStyle = olStyles['normal'];
|
|
||||||
if (position.hasComment() || position.hasImage()) {
|
|
||||||
if (id === posLen - 1) {
|
|
||||||
iconStyle = olStyles['stopExtra'];
|
|
||||||
} else if (id === 0) {
|
|
||||||
iconStyle = olStyles['startExtra'];
|
|
||||||
} else {
|
|
||||||
iconStyle = olStyles['extra'];
|
|
||||||
}
|
|
||||||
} else if (id === posLen - 1) {
|
|
||||||
iconStyle = olStyles['stop'];
|
|
||||||
} else if (id === 0) {
|
|
||||||
iconStyle = olStyles['start'];
|
|
||||||
}
|
|
||||||
return iconStyle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set marker
|
|
||||||
* @param {number} id
|
|
||||||
* @param {uTrack} track
|
|
||||||
*/
|
|
||||||
function setMarker(id, track) {
|
|
||||||
// marker
|
|
||||||
const position = track.positions[id];
|
|
||||||
const posLen = track.positions.length;
|
|
||||||
const marker = new ol.Feature({
|
|
||||||
geometry: new ol.geom.Point(ol.proj.fromLonLat([ position.longitude, position.latitude ]))
|
|
||||||
});
|
|
||||||
|
|
||||||
const iconStyle = getMarkerStyle(position, id, posLen);
|
|
||||||
marker.setStyle(iconStyle);
|
|
||||||
marker.setId(id);
|
|
||||||
layerMarkers.getSource().addFeature(marker);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Animate marker
|
|
||||||
* @param id Marker sequential id
|
|
||||||
*/
|
|
||||||
function animateMarker(id) {
|
|
||||||
const marker = layerMarkers.getSource().getFeatureById(id);
|
|
||||||
const initStyle = marker.getStyle();
|
|
||||||
const iconStyle = olStyles['hilite'];
|
|
||||||
marker.setStyle(iconStyle);
|
|
||||||
setTimeout(() => marker.setStyle(initStyle), 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get map bounds
|
|
||||||
* eg. (20.597985430276808, 52.15547181298076, 21.363595171488573, 52.33750879522563)
|
|
||||||
* @returns {number[]} Bounds
|
|
||||||
*/
|
|
||||||
function getBounds() {
|
|
||||||
const extent = map.getView().calculateExtent(map.getSize());
|
|
||||||
const bounds = ol.proj.transformExtent(extent, 'EPSG:900913', 'EPSG:4326');
|
|
||||||
const lon_sw = bounds[0];
|
|
||||||
const lat_sw = bounds[1];
|
|
||||||
const lon_ne = bounds[2];
|
|
||||||
const lat_ne = bounds[3];
|
|
||||||
return [ lon_sw, lat_sw, lon_ne, lat_ne ];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Zoom to track extent
|
|
||||||
*/
|
|
||||||
function zoomToExtent() {
|
|
||||||
map.getView().fit(layerMarkers.getSource().getExtent());
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Zoom to bounds
|
|
||||||
* @param {number[]} bounds
|
|
||||||
*/
|
|
||||||
function zoomToBounds(bounds) {
|
|
||||||
const extent = ol.proj.transformExtent(bounds, 'EPSG:4326', 'EPSG:900913');
|
|
||||||
map.getView().fit(extent);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update size
|
|
||||||
*/
|
|
||||||
function updateSize() {
|
|
||||||
map.updateSize();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get extent image
|
|
||||||
* @returns {HTMLImageElement}
|
|
||||||
*/
|
|
||||||
function getExtentImg() {
|
|
||||||
const extentImg = document.createElement('img');
|
|
||||||
extentImg.src = 'images/extent.svg';
|
|
||||||
extentImg.style.width = '60%';
|
|
||||||
return extentImg;
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
name,
|
|
||||||
init,
|
|
||||||
cleanup,
|
|
||||||
displayTrack,
|
|
||||||
clearMap,
|
|
||||||
animateMarker,
|
|
||||||
getBounds,
|
|
||||||
zoomToExtent,
|
|
||||||
zoomToBounds,
|
|
||||||
updateSize
|
|
||||||
}
|
|
||||||
1
js/ol.js.map
Normal file
1
js/ol.js.map
Normal file
File diff suppressed because one or more lines are too long
42
js/src/lib/ol.js
Normal file
42
js/src/lib/ol.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
/*
|
||||||
|
* μlogger
|
||||||
|
*
|
||||||
|
* Copyright(C) 2019 Bartek Fabiszewski (www.fabiszewski.net)
|
||||||
|
*
|
||||||
|
* This is free software; you can redistribute it and/or modify it under
|
||||||
|
* the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation; either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful, but
|
||||||
|
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
* General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Control, Rotate, ScaleLine, Zoom, ZoomToExtent } from 'ol/control';
|
||||||
|
import { LineString, Point } from 'ol/geom';
|
||||||
|
import { fromLonLat, toLonLat } from 'ol/proj';
|
||||||
|
import Feature from 'ol/Feature';
|
||||||
|
import Icon from 'ol/style/Icon';
|
||||||
|
import Map from 'ol/Map';
|
||||||
|
import OSM from 'ol/source/OSM';
|
||||||
|
import Overlay from 'ol/Overlay';
|
||||||
|
import Stroke from 'ol/style/Stroke';
|
||||||
|
import Style from 'ol/style/Style';
|
||||||
|
import TileLayer from 'ol/layer/Tile';
|
||||||
|
import Vector from 'ol/source/Vector';
|
||||||
|
import VectorLayer from 'ol/layer/Vector';
|
||||||
|
import View from 'ol/View';
|
||||||
|
import XYZ from 'ol/source/XYZ';
|
||||||
|
|
||||||
|
export { Feature, Map, Overlay, View };
|
||||||
|
export const control = { Control, Rotate, ScaleLine, Zoom, ZoomToExtent };
|
||||||
|
export const geom = { LineString, Point };
|
||||||
|
export const layer = { TileLayer, VectorLayer };
|
||||||
|
export const proj = { fromLonLat, toLonLat };
|
||||||
|
export const source = { OSM, Vector, XYZ };
|
||||||
|
export const style = { Icon, Stroke, Style };
|
||||||
340
js/src/mapapi/api_gmaps.js
Normal file
340
js/src/mapapi/api_gmaps.js
Normal file
@ -0,0 +1,340 @@
|
|||||||
|
/*
|
||||||
|
* μlogger
|
||||||
|
*
|
||||||
|
* Copyright(C) 2019 Bartek Fabiszewski (www.fabiszewski.net)
|
||||||
|
*
|
||||||
|
* This is free software; you can redistribute it and/or modify it under
|
||||||
|
* the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation; either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful, but
|
||||||
|
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
* General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { config, lang } from '../initializer.js';
|
||||||
|
import MapViewModel from '../mapviewmodel.js';
|
||||||
|
import uUtils from '../utils.js';
|
||||||
|
|
||||||
|
// google maps
|
||||||
|
/**
|
||||||
|
* Google Maps API
|
||||||
|
* @class GoogleMapsApi
|
||||||
|
* @implements {MapViewModel.api}
|
||||||
|
*/
|
||||||
|
export default class GoogleMapsApi {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {MapViewModel} vm
|
||||||
|
*/
|
||||||
|
constructor(vm) {
|
||||||
|
/** @type {google.maps.Map} */
|
||||||
|
this.map = null;
|
||||||
|
/** @type {MapViewModel} */
|
||||||
|
this.viewModel = vm;
|
||||||
|
/** @type {google.maps.Polyline[]} */
|
||||||
|
this.polies = [];
|
||||||
|
/** @type {google.maps.Marker[]} */
|
||||||
|
this.markers = [];
|
||||||
|
/** @type {google.maps.InfoWindow} */
|
||||||
|
this.popup = null;
|
||||||
|
/** @type {number} */
|
||||||
|
this.timeoutHandle = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load and initialize api scripts
|
||||||
|
* @return {Promise<void, Error>}
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
const params = `?${(config.gkey != null) ? `key=${config.gkey}&` : ''}callback=gm_loaded`;
|
||||||
|
const gmReady = Promise.all([
|
||||||
|
GoogleMapsApi.onScriptLoaded(),
|
||||||
|
uUtils.loadScript(`https://maps.googleapis.com/maps/api/js${params}`, 'mapapi_gmaps', GoogleMapsApi.loadTimeoutMs)
|
||||||
|
]);
|
||||||
|
return gmReady.then(() => this.initMap());
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listen to Google Maps callbacks
|
||||||
|
* @return {Promise<void, Error>}
|
||||||
|
*/
|
||||||
|
static onScriptLoaded() {
|
||||||
|
const timeout = uUtils.timeoutPromise(GoogleMapsApi.loadTimeoutMs);
|
||||||
|
const gmInitialize = new Promise((resolve, reject) => {
|
||||||
|
window.gm_loaded = () => {
|
||||||
|
GoogleMapsApi.gmInitialized = true;
|
||||||
|
resolve();
|
||||||
|
};
|
||||||
|
window.gm_authFailure = () => {
|
||||||
|
GoogleMapsApi.authError = true;
|
||||||
|
let message = uUtils.sprintf(lang.strings['apifailure'], 'Google Maps');
|
||||||
|
message += '<br><br>' + lang.strings['gmauthfailure'];
|
||||||
|
message += '<br><br>' + lang.strings['gmapilink'];
|
||||||
|
if (GoogleMapsApi.gmInitialized) {
|
||||||
|
alert(message);
|
||||||
|
}
|
||||||
|
reject(new Error(message));
|
||||||
|
};
|
||||||
|
if (GoogleMapsApi.authError) {
|
||||||
|
window.gm_authFailure();
|
||||||
|
}
|
||||||
|
if (GoogleMapsApi.gmInitialized) {
|
||||||
|
window.gm_loaded();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return Promise.race([ gmInitialize, timeout ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start map engine when loaded
|
||||||
|
*/
|
||||||
|
initMap() {
|
||||||
|
const mapOptions = {
|
||||||
|
center: new google.maps.LatLng(config.initLatitude, config.initLongitude),
|
||||||
|
zoom: 8,
|
||||||
|
mapTypeId: google.maps.MapTypeId.TERRAIN,
|
||||||
|
scaleControl: true,
|
||||||
|
controlSize: 30
|
||||||
|
};
|
||||||
|
// noinspection JSCheckFunctionSignatures
|
||||||
|
this.map = new google.maps.Map(this.viewModel.mapElement, mapOptions);
|
||||||
|
this.popup = new google.maps.InfoWindow();
|
||||||
|
this.popup.addListener('closeclick', () => {
|
||||||
|
this.popupClose();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clean up API
|
||||||
|
*/
|
||||||
|
cleanup() {
|
||||||
|
this.polies.length = 0;
|
||||||
|
this.markers.length = 0;
|
||||||
|
this.popup = null;
|
||||||
|
if (this.map && this.map.getDiv()) {
|
||||||
|
this.map.getDiv().innerHTML = '';
|
||||||
|
}
|
||||||
|
this.map = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Display track
|
||||||
|
* @param {uTrack} track
|
||||||
|
* @param {boolean} update Should fit bounds if true
|
||||||
|
*/
|
||||||
|
displayTrack(track, update) {
|
||||||
|
if (!track) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// init polyline
|
||||||
|
const polyOptions = {
|
||||||
|
strokeColor: config.strokeColor,
|
||||||
|
strokeOpacity: config.strokeOpacity,
|
||||||
|
strokeWeight: config.strokeWeight
|
||||||
|
};
|
||||||
|
// noinspection JSCheckFunctionSignatures
|
||||||
|
const poly = new google.maps.Polyline(polyOptions);
|
||||||
|
poly.setMap(this.map);
|
||||||
|
const path = poly.getPath();
|
||||||
|
const latlngbounds = new google.maps.LatLngBounds();
|
||||||
|
let i = 0;
|
||||||
|
for (const position of track.positions) {
|
||||||
|
// set marker
|
||||||
|
this.setMarker(i++, track);
|
||||||
|
// update polyline
|
||||||
|
const coordinates = new google.maps.LatLng(position.latitude, position.longitude);
|
||||||
|
if (track.continuous) {
|
||||||
|
path.push(coordinates);
|
||||||
|
}
|
||||||
|
latlngbounds.extend(coordinates);
|
||||||
|
}
|
||||||
|
if (update) {
|
||||||
|
this.map.fitBounds(latlngbounds);
|
||||||
|
if (i === 1) {
|
||||||
|
// only one point, zoom out
|
||||||
|
const zListener =
|
||||||
|
google.maps.event.addListenerOnce(this.map, 'bounds_changed', function () {
|
||||||
|
if (this.getZoom()) {
|
||||||
|
this.setZoom(15);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setTimeout(function () {
|
||||||
|
google.maps.event.removeListener(zListener)
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.polies.push(poly);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear map
|
||||||
|
*/
|
||||||
|
clearMap() {
|
||||||
|
if (this.polies) {
|
||||||
|
for (let i = 0; i < this.polies.length; i++) {
|
||||||
|
this.polies[i].setMap(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.markers) {
|
||||||
|
for (let i = 0; i < this.markers.length; i++) {
|
||||||
|
this.markers[i].setMap(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.popup.getMap()) {
|
||||||
|
this.popupClose();
|
||||||
|
}
|
||||||
|
this.popup.setContent('');
|
||||||
|
this.markers.length = 0;
|
||||||
|
this.polies.length = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} fill Fill color
|
||||||
|
* @param {boolean} isLarge Is large icon
|
||||||
|
* @param {boolean} isExtra Is styled with extra mark
|
||||||
|
* @return {google.maps.Icon}
|
||||||
|
*/
|
||||||
|
static getMarkerIcon(fill, isLarge, isExtra) {
|
||||||
|
// noinspection JSValidateTypes
|
||||||
|
return {
|
||||||
|
anchor: new google.maps.Point(15, 35),
|
||||||
|
url: MapViewModel.getSvgSrc(fill, isLarge, isExtra)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set marker
|
||||||
|
* @param {uTrack} track
|
||||||
|
* @param {number} id
|
||||||
|
*/
|
||||||
|
setMarker(id, track) {
|
||||||
|
// marker
|
||||||
|
const position = track.positions[id];
|
||||||
|
const posLen = track.length;
|
||||||
|
// noinspection JSCheckFunctionSignatures
|
||||||
|
const marker = new google.maps.Marker({
|
||||||
|
position: new google.maps.LatLng(position.latitude, position.longitude),
|
||||||
|
title: (new Date(position.timestamp * 1000)).toLocaleString(),
|
||||||
|
map: this.map
|
||||||
|
});
|
||||||
|
const isExtra = position.hasComment() || position.hasImage();
|
||||||
|
let icon;
|
||||||
|
if (id === posLen - 1) {
|
||||||
|
icon = GoogleMapsApi.getMarkerIcon(config.colorStop, true, isExtra);
|
||||||
|
} else if (id === 0) {
|
||||||
|
icon = GoogleMapsApi.getMarkerIcon(config.colorStart, true, isExtra);
|
||||||
|
} else {
|
||||||
|
icon = GoogleMapsApi.getMarkerIcon(isExtra ? config.colorExtra : config.colorNormal, false, isExtra);
|
||||||
|
}
|
||||||
|
marker.setIcon(icon);
|
||||||
|
|
||||||
|
marker.addListener('click', () => {
|
||||||
|
this.popupOpen(id, marker);
|
||||||
|
});
|
||||||
|
marker.addListener('mouseover', () => {
|
||||||
|
this.viewModel.model.markerOver = id;
|
||||||
|
});
|
||||||
|
marker.addListener('mouseout', () => {
|
||||||
|
this.viewModel.model.markerOver = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.markers.push(marker);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open popup on marker with given id
|
||||||
|
* @param {number} id
|
||||||
|
* @param {google.maps.Marker} marker
|
||||||
|
*/
|
||||||
|
popupOpen(id, marker) {
|
||||||
|
this.popup.setContent(this.viewModel.getPopupHtml(id));
|
||||||
|
this.popup.open(this.map, marker);
|
||||||
|
this.viewModel.model.markerSelect = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Close popup
|
||||||
|
*/
|
||||||
|
popupClose() {
|
||||||
|
this.viewModel.model.markerSelect = null;
|
||||||
|
this.popup.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animate marker
|
||||||
|
* @param id Marker sequential id
|
||||||
|
*/
|
||||||
|
animateMarker(id) {
|
||||||
|
if (this.popup.getMap()) {
|
||||||
|
this.popupClose();
|
||||||
|
clearTimeout(this.timeoutHandle);
|
||||||
|
}
|
||||||
|
const icon = this.markers[id].getIcon();
|
||||||
|
this.markers[id].setIcon(GoogleMapsApi.getMarkerIcon(config.colorHilite, false, false));
|
||||||
|
this.markers[id].setAnimation(google.maps.Animation.BOUNCE);
|
||||||
|
this.timeoutHandle = setTimeout(() => {
|
||||||
|
this.markers[id].setIcon(icon);
|
||||||
|
this.markers[id].setAnimation(null);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get map bounds
|
||||||
|
* eg. ((52.20105108685229, 20.789387865580238), (52.292069558807135, 21.172192736185707))
|
||||||
|
* @returns {number[]} Bounds [ lon_sw, lat_sw, lon_ne, lat_ne ]
|
||||||
|
*/
|
||||||
|
getBounds() {
|
||||||
|
const bounds = this.map.getBounds();
|
||||||
|
const lat_sw = bounds.getSouthWest().lat();
|
||||||
|
const lon_sw = bounds.getSouthWest().lng();
|
||||||
|
const lat_ne = bounds.getNorthEast().lat();
|
||||||
|
const lon_ne = bounds.getNorthEast().lng();
|
||||||
|
return [ lon_sw, lat_sw, lon_ne, lat_ne ];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Zoom to track extent
|
||||||
|
*/
|
||||||
|
zoomToExtent() {
|
||||||
|
const bounds = new google.maps.LatLngBounds();
|
||||||
|
for (let i = 0; i < this.markers.length; i++) {
|
||||||
|
bounds.extend(this.markers[i].getPosition());
|
||||||
|
}
|
||||||
|
this.map.fitBounds(bounds);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Zoom to bounds
|
||||||
|
* @param {number[]} bounds [ lon_sw, lat_sw, lon_ne, lat_ne ]
|
||||||
|
*/
|
||||||
|
zoomToBounds(bounds) {
|
||||||
|
const sw = new google.maps.LatLng(bounds[1], bounds[0]);
|
||||||
|
const ne = new google.maps.LatLng(bounds[3], bounds[2]);
|
||||||
|
const latLngBounds = new google.maps.LatLngBounds(sw, ne);
|
||||||
|
this.map.fitBounds(latLngBounds);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update size
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line class-methods-use-this
|
||||||
|
updateSize() {
|
||||||
|
// ignore for google API
|
||||||
|
}
|
||||||
|
|
||||||
|
static get loadTimeoutMs() {
|
||||||
|
return 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @type {boolean} */
|
||||||
|
GoogleMapsApi.authError = false;
|
||||||
|
/** @type {boolean} */
|
||||||
|
GoogleMapsApi.gmInitialized = false;
|
||||||
591
js/src/mapapi/api_openlayers.js
Normal file
591
js/src/mapapi/api_openlayers.js
Normal file
@ -0,0 +1,591 @@
|
|||||||
|
/*
|
||||||
|
* μlogger
|
||||||
|
*
|
||||||
|
* Copyright(C) 2019 Bartek Fabiszewski (www.fabiszewski.net)
|
||||||
|
*
|
||||||
|
* This is free software; you can redistribute it and/or modify it under
|
||||||
|
* the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation; either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful, but
|
||||||
|
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
* General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import MapViewModel from '../mapviewmodel.js';
|
||||||
|
import { config } from '../initializer.js';
|
||||||
|
import uUtils from '../utils.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} MarkerStyles
|
||||||
|
* @property {Style} normal
|
||||||
|
* @property {Style} start
|
||||||
|
* @property {Style} stop
|
||||||
|
* @property {Style} extra
|
||||||
|
* @property {Style} startExtra
|
||||||
|
* @property {Style} stopExtra
|
||||||
|
* @property {Style} hilite
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {import("../lib/ol.js")} OpenLayers
|
||||||
|
* @property {import("ol/control")} control
|
||||||
|
* @property {import("ol/Feature").default} Feature
|
||||||
|
* @property {import("ol/geom")} geom
|
||||||
|
* @property {import("ol/layer/Tile").default} layer.TileLayer
|
||||||
|
* @property {import("ol/layer/Vector").default} layer.VectorLayer
|
||||||
|
* @property {import("ol/Map").default} Map
|
||||||
|
* @property {import("ol/Overlay").default} Overlay
|
||||||
|
* @property {import("ol/proj")} proj
|
||||||
|
* @property {import("ol/source/OSM").default} source.OSM
|
||||||
|
* @property {import("ol/source/Vector").default} source.Vector
|
||||||
|
* @property {import("ol/source/XYZ").default} source.XYZ
|
||||||
|
* @property {import("ol/style/Icon").default} style.Icon
|
||||||
|
* @property {import("ol/style/Stroke").default} style.Stroke
|
||||||
|
* @property {import("ol/style/Style").default} style.Style
|
||||||
|
* @property {import("ol/View").default} View
|
||||||
|
*/
|
||||||
|
/** @type {?OpenLayers} */
|
||||||
|
let ol;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* OpenLayers API
|
||||||
|
* @class OpenLayersApi
|
||||||
|
* @implements {MapViewModel.api}
|
||||||
|
*/
|
||||||
|
export default class OpenLayersApi {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {MapViewModel} vm
|
||||||
|
* @param {?OpenLayers=} olModule
|
||||||
|
*/
|
||||||
|
constructor(vm, olModule = null) {
|
||||||
|
/** @type {Map} */
|
||||||
|
this.map = null;
|
||||||
|
/** @type {MapViewModel} */
|
||||||
|
this.viewModel = vm;
|
||||||
|
/** @type {VectorLayer} */
|
||||||
|
this.layerTrack = null;
|
||||||
|
/** @type {VectorLayer} */
|
||||||
|
this.layerMarkers = null;
|
||||||
|
/** @type {Layer} */
|
||||||
|
this.selectedLayer = null;
|
||||||
|
/** @type {?MarkerStyles} */
|
||||||
|
this.markerStyles = null;
|
||||||
|
/** @type {?Overlay} */
|
||||||
|
this.popup = null;
|
||||||
|
// for tests
|
||||||
|
if (olModule) { ol = olModule; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize map
|
||||||
|
* @return {Promise<void, Error>}
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
uUtils.addCss('css/ol.css', 'ol_css');
|
||||||
|
const olReady = ol ? Promise.resolve() : import(/* webpackChunkName : "ol" */'../lib/ol.js').then((m) => { ol = m });
|
||||||
|
return olReady.then(() => {
|
||||||
|
this.initMap();
|
||||||
|
this.initLayers();
|
||||||
|
this.initStyles();
|
||||||
|
this.initPopups();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initMap() {
|
||||||
|
const controls = [
|
||||||
|
new ol.control.Zoom(),
|
||||||
|
new ol.control.Rotate(),
|
||||||
|
new ol.control.ScaleLine()
|
||||||
|
];
|
||||||
|
|
||||||
|
const view = new ol.View({
|
||||||
|
center: ol.proj.fromLonLat([ config.initLongitude, config.initLatitude ]),
|
||||||
|
zoom: 8
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map = new ol.Map({
|
||||||
|
target: this.viewModel.mapElement,
|
||||||
|
controls: controls,
|
||||||
|
view: view
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.on('pointermove', (e) => {
|
||||||
|
const feature = this.map.forEachFeatureAtPixel(e.pixel,
|
||||||
|
/**
|
||||||
|
* @param {Feature} _feature
|
||||||
|
* @param {Layer} _layer
|
||||||
|
* @return {Feature}
|
||||||
|
*/
|
||||||
|
(_feature, _layer) => {
|
||||||
|
if (_layer.get('name') === 'Markers') {
|
||||||
|
return _feature;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (feature) {
|
||||||
|
this.map.getTargetElement().style.cursor = 'pointer';
|
||||||
|
const id = feature.getId();
|
||||||
|
if (id !== this.viewModel.model.markerOver) {
|
||||||
|
this.viewModel.model.markerOver = id;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.map.getTargetElement().style.cursor = '';
|
||||||
|
this.viewModel.model.markerOver = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize map layers
|
||||||
|
*/
|
||||||
|
initLayers() {
|
||||||
|
// default layer: OpenStreetMap
|
||||||
|
const osm = new ol.layer.TileLayer({
|
||||||
|
name: 'OpenStreetMap',
|
||||||
|
visible: true,
|
||||||
|
source: new ol.source.OSM()
|
||||||
|
});
|
||||||
|
this.map.addLayer(osm);
|
||||||
|
this.selectedLayer = osm;
|
||||||
|
|
||||||
|
// add extra tile layers
|
||||||
|
for (const layerName in config.olLayers) {
|
||||||
|
if (config.olLayers.hasOwnProperty(layerName)) {
|
||||||
|
const layerUrl = config.olLayers[layerName];
|
||||||
|
const ol_layer = new ol.layer.TileLayer({
|
||||||
|
name: layerName,
|
||||||
|
visible: false,
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: layerUrl
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.map.addLayer(ol_layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// add track and markers layers
|
||||||
|
const lineStyle = new ol.style.Style({
|
||||||
|
stroke: new ol.style.Stroke({
|
||||||
|
color: uUtils.hexToRGBA(config.strokeColor, config.strokeOpacity),
|
||||||
|
width: config.strokeWeight
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.layerTrack = new ol.layer.VectorLayer({
|
||||||
|
name: 'Track',
|
||||||
|
type: 'data',
|
||||||
|
source: new ol.source.Vector(),
|
||||||
|
style: lineStyle
|
||||||
|
});
|
||||||
|
this.layerMarkers = new ol.layer.VectorLayer({
|
||||||
|
name: 'Markers',
|
||||||
|
type: 'data',
|
||||||
|
source: new ol.source.Vector()
|
||||||
|
});
|
||||||
|
this.map.addLayer(this.layerTrack);
|
||||||
|
this.map.addLayer(this.layerMarkers);
|
||||||
|
|
||||||
|
this.initLayerSwitcher();
|
||||||
|
}
|
||||||
|
|
||||||
|
initStyles() {
|
||||||
|
const anchor = [ 0.5, 1 ];
|
||||||
|
this.markerStyles = {
|
||||||
|
start: new ol.style.Style({
|
||||||
|
image: new ol.style.Icon({
|
||||||
|
anchor: anchor,
|
||||||
|
src: MapViewModel.getSvgSrc(config.colorStart, true)
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
stop: new ol.style.Style({
|
||||||
|
image: new ol.style.Icon({
|
||||||
|
anchor: anchor,
|
||||||
|
src: MapViewModel.getSvgSrc(config.colorStop, true)
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
normal: new ol.style.Style({
|
||||||
|
image: new ol.style.Icon({
|
||||||
|
anchor: anchor,
|
||||||
|
opacity: 0.7,
|
||||||
|
src: MapViewModel.getSvgSrc(config.colorNormal, false)
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
extra: new ol.style.Style({
|
||||||
|
image: new ol.style.Icon({
|
||||||
|
anchor: anchor,
|
||||||
|
src: MapViewModel.getSvgSrc(config.colorExtra, false, true)
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
startExtra: new ol.style.Style({
|
||||||
|
image: new ol.style.Icon({
|
||||||
|
anchor: anchor,
|
||||||
|
src: MapViewModel.getSvgSrc(config.colorStart, true, true)
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
stopExtra: new ol.style.Style({
|
||||||
|
image: new ol.style.Icon({
|
||||||
|
anchor: anchor,
|
||||||
|
src: MapViewModel.getSvgSrc(config.colorStop, true, true)
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
hilite: new ol.style.Style({
|
||||||
|
image: new ol.style.Icon({
|
||||||
|
anchor: anchor,
|
||||||
|
src: MapViewModel.getSvgSrc(config.colorHilite, false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
initPopups() {
|
||||||
|
const popupContainer = document.createElement('div');
|
||||||
|
popupContainer.id = 'popup-container';
|
||||||
|
popupContainer.className = 'ol-popup';
|
||||||
|
const popupContent = document.createElement('div');
|
||||||
|
popupContent.id = 'popup-content';
|
||||||
|
popupContainer.appendChild(popupContent);
|
||||||
|
const popupCloser = document.createElement('a');
|
||||||
|
popupCloser.id = 'popup-closer';
|
||||||
|
popupCloser.className = 'ol-popup-closer';
|
||||||
|
popupCloser.href = '#';
|
||||||
|
popupContainer.appendChild(popupCloser);
|
||||||
|
|
||||||
|
|
||||||
|
this.popup = new ol.Overlay({
|
||||||
|
element: popupContainer,
|
||||||
|
autoPan: true,
|
||||||
|
autoPanAnimation: {
|
||||||
|
duration: 250
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.map.addOverlay(this.popup);
|
||||||
|
|
||||||
|
popupCloser.onclick = () => {
|
||||||
|
this.popupClose();
|
||||||
|
popupCloser.blur();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// add click handler to map to show popup
|
||||||
|
this.map.on('click', (e) => {
|
||||||
|
const coordinate = e.coordinate;
|
||||||
|
const feature = this.map.forEachFeatureAtPixel(e.pixel,
|
||||||
|
/** @param {Feature} _feature
|
||||||
|
* @param {Layer} _layer
|
||||||
|
* @return {?Feature}
|
||||||
|
*/
|
||||||
|
(_feature, _layer) => {
|
||||||
|
if (_layer.get('name') === 'Markers') {
|
||||||
|
return _feature;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
if (feature) {
|
||||||
|
this.popupOpen(feature.getId(), coordinate);
|
||||||
|
} else {
|
||||||
|
this.popupClose();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show popup at coordinate
|
||||||
|
* @param {number} id
|
||||||
|
* @param {Coordinate} coordinate
|
||||||
|
*/
|
||||||
|
popupOpen(id, coordinate) {
|
||||||
|
this.popup.getElement().firstElementChild.innerHTML = this.viewModel.getPopupHtml(id);
|
||||||
|
this.popup.setPosition(coordinate);
|
||||||
|
this.viewModel.model.markerSelect = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Close popup
|
||||||
|
*/
|
||||||
|
popupClose() {
|
||||||
|
// eslint-disable-next-line no-undefined
|
||||||
|
this.popup.setPosition(undefined);
|
||||||
|
this.viewModel.model.markerSelect = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Switch layer to target
|
||||||
|
* @param {string} targetName
|
||||||
|
*/
|
||||||
|
switchLayer(targetName) {
|
||||||
|
this.map.getLayers().forEach(/** @param {Layer} _layer */(_layer) => {
|
||||||
|
if (_layer.get('name') === targetName) {
|
||||||
|
if (_layer.get('type') === 'data') {
|
||||||
|
if (_layer.getVisible()) {
|
||||||
|
_layer.setVisible(false);
|
||||||
|
} else {
|
||||||
|
_layer.setVisible(true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.selectedLayer.setVisible(false);
|
||||||
|
this.selectedLayer = _layer;
|
||||||
|
_layer.setVisible(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initLayerSwitcher() {
|
||||||
|
const switcher = document.createElement('div');
|
||||||
|
switcher.id = 'switcher';
|
||||||
|
switcher.className = 'ol-control';
|
||||||
|
document.body.appendChild(switcher);
|
||||||
|
const switcherContent = document.createElement('div');
|
||||||
|
switcherContent.id = 'switcher-content';
|
||||||
|
switcherContent.className = 'ol-layerswitcher';
|
||||||
|
switcher.appendChild(switcherContent);
|
||||||
|
|
||||||
|
this.map.getLayers().forEach(/** @param {Layer} _layer */(_layer) => {
|
||||||
|
const layerLabel = document.createElement('label');
|
||||||
|
layerLabel.innerHTML = _layer.get('name');
|
||||||
|
switcherContent.appendChild(layerLabel);
|
||||||
|
|
||||||
|
const layerRadio = document.createElement('input');
|
||||||
|
if (_layer.get('type') === 'data') {
|
||||||
|
layerRadio.type = 'checkbox';
|
||||||
|
layerLabel.className = 'ol-datalayer';
|
||||||
|
} else {
|
||||||
|
layerRadio.type = 'radio';
|
||||||
|
}
|
||||||
|
layerRadio.name = 'layer';
|
||||||
|
layerRadio.value = _layer.get('name');
|
||||||
|
layerRadio.onclick = (e) => this.switchLayer(e.value);
|
||||||
|
if (_layer.getVisible()) {
|
||||||
|
layerRadio.checked = true;
|
||||||
|
}
|
||||||
|
layerLabel.insertBefore(layerRadio, layerLabel.childNodes[0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
const switcherButton = document.createElement('button');
|
||||||
|
const layerImg = document.createElement('img');
|
||||||
|
layerImg.src = 'images/layers.svg';
|
||||||
|
layerImg.style.width = '60%';
|
||||||
|
switcherButton.appendChild(layerImg);
|
||||||
|
|
||||||
|
const switcherHandle = () => {
|
||||||
|
if (switcher.style.display === 'block') {
|
||||||
|
switcher.style.display = 'none';
|
||||||
|
} else {
|
||||||
|
switcher.style.display = 'block';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
switcherButton.addEventListener('click', switcherHandle, false);
|
||||||
|
switcherButton.addEventListener('touchstart', switcherHandle, false);
|
||||||
|
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.className = 'ol-switcher-button ol-unselectable ol-control';
|
||||||
|
element.appendChild(switcherButton);
|
||||||
|
|
||||||
|
const switcherControl = new ol.control.Control({
|
||||||
|
element: element
|
||||||
|
});
|
||||||
|
this.map.addControl(switcherControl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clean up API
|
||||||
|
*/
|
||||||
|
cleanup() {
|
||||||
|
this.layerTrack = null;
|
||||||
|
this.layerMarkers = null;
|
||||||
|
this.selectedLayer = null;
|
||||||
|
this.markerStyles = null;
|
||||||
|
uUtils.removeElementById('switcher');
|
||||||
|
if (this.map && this.map.getTargetElement()) {
|
||||||
|
this.map.getTargetElement().innerHTML = '';
|
||||||
|
}
|
||||||
|
this.map = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Display track
|
||||||
|
* @param {uTrack} track Track
|
||||||
|
* @param {boolean} update Should fit bounds if true
|
||||||
|
*/
|
||||||
|
displayTrack(track, update) {
|
||||||
|
if (!track) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let i = 0;
|
||||||
|
const lineString = new ol.geom.LineString([]);
|
||||||
|
for (const position of track.positions) {
|
||||||
|
// set marker
|
||||||
|
this.setMarker(i++, track);
|
||||||
|
if (track.continuous) {
|
||||||
|
// update polyline
|
||||||
|
lineString.appendCoordinate(ol.proj.fromLonLat([ position.longitude, position.latitude ]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (lineString.getLength() > 0) {
|
||||||
|
const lineFeature = new ol.Feature({
|
||||||
|
geometry: lineString
|
||||||
|
});
|
||||||
|
this.layerTrack.getSource().addFeature(lineFeature);
|
||||||
|
}
|
||||||
|
|
||||||
|
let extent = this.layerMarkers.getSource().getExtent();
|
||||||
|
|
||||||
|
if (update) {
|
||||||
|
extent = this.fitToExtent(extent);
|
||||||
|
}
|
||||||
|
this.setZoomToExtent(extent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set or replace ZoomToExtent control
|
||||||
|
* @param extent
|
||||||
|
*/
|
||||||
|
setZoomToExtent(extent) {
|
||||||
|
this.map.getControls().forEach((el) => {
|
||||||
|
if (el instanceof ol.control.ZoomToExtent) {
|
||||||
|
this.map.removeControl(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.map.addControl(new ol.control.ZoomToExtent({
|
||||||
|
extent,
|
||||||
|
label: OpenLayersApi.getExtentImg()
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fit to extent, zoom out if needed
|
||||||
|
* @param {Array.<number>} extent
|
||||||
|
* @return {Array.<number>}
|
||||||
|
*/
|
||||||
|
fitToExtent(extent) {
|
||||||
|
this.map.getView().fit(extent, { padding: [ 40, 10, 10, 10 ] });
|
||||||
|
const zoom = this.map.getView().getZoom();
|
||||||
|
if (zoom > OpenLayersApi.ZOOM_MAX) {
|
||||||
|
this.map.getView().setZoom(OpenLayersApi.ZOOM_MAX);
|
||||||
|
extent = this.map.getView().calculateExtent(this.map.getSize());
|
||||||
|
}
|
||||||
|
return extent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear map
|
||||||
|
*/
|
||||||
|
clearMap() {
|
||||||
|
if (this.layerTrack) {
|
||||||
|
this.layerTrack.getSource().clear();
|
||||||
|
}
|
||||||
|
if (this.layerMarkers) {
|
||||||
|
this.layerMarkers.getSource().clear();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get marker style
|
||||||
|
* @param {number} id
|
||||||
|
* @param {uTrack} track
|
||||||
|
* @return {Style}
|
||||||
|
*/
|
||||||
|
getMarkerStyle(id, track) {
|
||||||
|
const position = track.positions[id];
|
||||||
|
let iconStyle = this.markerStyles.normal;
|
||||||
|
if (position.hasComment() || position.hasImage()) {
|
||||||
|
if (id === track.positions.length - 1) {
|
||||||
|
iconStyle = this.markerStyles.stopExtra;
|
||||||
|
} else if (id === 0) {
|
||||||
|
iconStyle = this.markerStyles.startExtra;
|
||||||
|
} else {
|
||||||
|
iconStyle = this.markerStyles.extra;
|
||||||
|
}
|
||||||
|
} else if (id === track.positions.length - 1) {
|
||||||
|
iconStyle = this.markerStyles.stop;
|
||||||
|
} else if (id === 0) {
|
||||||
|
iconStyle = this.markerStyles.start;
|
||||||
|
}
|
||||||
|
return iconStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set marker
|
||||||
|
* @param {number} id
|
||||||
|
* @param {uTrack} track
|
||||||
|
*/
|
||||||
|
setMarker(id, track) {
|
||||||
|
// marker
|
||||||
|
const position = track.positions[id];
|
||||||
|
const marker = new ol.Feature({
|
||||||
|
geometry: new ol.geom.Point(ol.proj.fromLonLat([ position.longitude, position.latitude ]))
|
||||||
|
});
|
||||||
|
|
||||||
|
const iconStyle = this.getMarkerStyle(id, track);
|
||||||
|
marker.setStyle(iconStyle);
|
||||||
|
marker.setId(id);
|
||||||
|
this.layerMarkers.getSource().addFeature(marker);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animate marker
|
||||||
|
* @param id Marker sequential id
|
||||||
|
*/
|
||||||
|
animateMarker(id) {
|
||||||
|
const marker = this.layerMarkers.getSource().getFeatureById(id);
|
||||||
|
const initStyle = marker.getStyle();
|
||||||
|
marker.setStyle(this.markerStyles.hilite);
|
||||||
|
setTimeout(() => marker.setStyle(initStyle), 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get map bounds
|
||||||
|
* eg. (20.597985430276808, 52.15547181298076, 21.363595171488573, 52.33750879522563)
|
||||||
|
* @returns {number[]} Bounds [ lon_sw, lat_sw, lon_ne, lat_ne ]
|
||||||
|
*/
|
||||||
|
getBounds() {
|
||||||
|
const extent = this.map.getView().calculateExtent(this.map.getSize());
|
||||||
|
const sw = ol.proj.toLonLat([ extent[0], extent[1] ]);
|
||||||
|
const ne = ol.proj.toLonLat([ extent[2], extent[3] ]);
|
||||||
|
return [ sw[0], sw[1], ne[0], ne[1] ];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Zoom to track extent
|
||||||
|
*/
|
||||||
|
zoomToExtent() {
|
||||||
|
this.map.getView().fit(this.layerMarkers.getSource().getExtent());
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Zoom to bounds
|
||||||
|
* @param {number[]} bounds [ lon_sw, lat_sw, lon_ne, lat_ne ]
|
||||||
|
*/
|
||||||
|
zoomToBounds(bounds) {
|
||||||
|
const sw = ol.proj.fromLonLat([ bounds[0], bounds[1] ]);
|
||||||
|
const ne = ol.proj.fromLonLat([ bounds[2], bounds[3] ]);
|
||||||
|
this.map.getView().fit([ sw[0], sw[1], ne[0], ne[1] ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update size
|
||||||
|
*/
|
||||||
|
updateSize() {
|
||||||
|
this.map.updateSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get extent image
|
||||||
|
* @returns {HTMLImageElement}
|
||||||
|
*/
|
||||||
|
static getExtentImg() {
|
||||||
|
const extentImg = document.createElement('img');
|
||||||
|
extentImg.src = 'images/extent.svg';
|
||||||
|
extentImg.style.width = '60%';
|
||||||
|
return extentImg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
OpenLayersApi.ZOOM_MAX = 20;
|
||||||
491
js/test/api_gmaps.test.js
Normal file
491
js/test/api_gmaps.test.js
Normal file
@ -0,0 +1,491 @@
|
|||||||
|
/*
|
||||||
|
* μlogger
|
||||||
|
*
|
||||||
|
* Copyright(C) 2019 Bartek Fabiszewski (www.fabiszewski.net)
|
||||||
|
*
|
||||||
|
* This is free software; you can redistribute it and/or modify it under
|
||||||
|
* the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation; either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful, but
|
||||||
|
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
* General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import * as gmStub from './googlemaps.stub.js';
|
||||||
|
import { config, lang } from '../src/initializer.js'
|
||||||
|
import GoogleMapsApi from '../src/mapapi/api_gmaps.js';
|
||||||
|
import uPosition from '../src/position.js';
|
||||||
|
import uTrack from '../src/track.js';
|
||||||
|
import uUser from '../src/user.js';
|
||||||
|
import uUtils from '../src/utils.js';
|
||||||
|
|
||||||
|
describe('Google Maps map API tests', () => {
|
||||||
|
let container;
|
||||||
|
const loadTimeout = 100;
|
||||||
|
let mockViewModel;
|
||||||
|
let api;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
gmStub.setupGmapsStub();
|
||||||
|
GoogleMapsApi.authError = false;
|
||||||
|
GoogleMapsApi.gmInitialized = false;
|
||||||
|
config.initialize();
|
||||||
|
container = document.createElement('div');
|
||||||
|
mockViewModel = { mapElement: container, model: {} };
|
||||||
|
api = new GoogleMapsApi(mockViewModel);
|
||||||
|
spyOn(google.maps, 'InfoWindow').and.callThrough();
|
||||||
|
spyOn(google.maps, 'LatLngBounds').and.callThrough();
|
||||||
|
spyOn(google.maps, 'Map').and.callThrough();
|
||||||
|
spyOn(google.maps, 'Marker').and.callThrough();
|
||||||
|
spyOn(google.maps, 'Polyline').and.callThrough();
|
||||||
|
spyOnProperty(GoogleMapsApi, 'loadTimeoutMs', 'get').and.returnValue(loadTimeout);
|
||||||
|
spyOn(window, 'alert');
|
||||||
|
gmStub.applyPrototypes();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => gmStub.clear());
|
||||||
|
|
||||||
|
it('should timeout initialization of map engine', (done) => {
|
||||||
|
// given
|
||||||
|
spyOn(uUtils, 'loadScript').and.returnValue(Promise.resolve());
|
||||||
|
// when
|
||||||
|
api.init()
|
||||||
|
.then(() => done.fail('resolve callback called'))
|
||||||
|
.catch((e) => {
|
||||||
|
expect(e.message).toContain('timeout');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should fail loading script', (done) => {
|
||||||
|
// given
|
||||||
|
spyOn(uUtils, 'loadScript').and.returnValue(Promise.reject(Error('script loading error')));
|
||||||
|
// when
|
||||||
|
api.init()
|
||||||
|
.then(() => done.fail('resolve callback called'))
|
||||||
|
.catch((e) => {
|
||||||
|
expect(e.message).toContain('loading');
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should load and initialize api scripts', (done) => {
|
||||||
|
// given
|
||||||
|
spyOn(uUtils, 'loadScript').and.returnValue(Promise.resolve());
|
||||||
|
spyOn(api, 'initMap');
|
||||||
|
config.gkey = 'key1234567890';
|
||||||
|
// when
|
||||||
|
api.init()
|
||||||
|
.then(() => {
|
||||||
|
// then
|
||||||
|
expect(uUtils.loadScript).toHaveBeenCalledWith(`https://maps.googleapis.com/maps/api/js?key=${config.gkey}&callback=gm_loaded`, 'mapapi_gmaps', loadTimeout);
|
||||||
|
expect(api.initMap).toHaveBeenCalledTimes(1);
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch((e) => done.fail(e));
|
||||||
|
window.gm_loaded();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should initialize map engine with config values', () => {
|
||||||
|
// given
|
||||||
|
spyOn(google.maps.InfoWindow.prototype, 'addListener');
|
||||||
|
// when
|
||||||
|
api.initMap();
|
||||||
|
// then
|
||||||
|
expect(google.maps.Map).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.Map.calls.mostRecent().args[0]).toEqual(container);
|
||||||
|
expect(google.maps.Map.calls.mostRecent().args[1].center.latitude).toEqual(config.initLatitude);
|
||||||
|
expect(google.maps.Map.calls.mostRecent().args[1].center.longitude).toEqual(config.initLongitude);
|
||||||
|
expect(google.maps.InfoWindow).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.InfoWindow.prototype.addListener).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.InfoWindow.prototype.addListener).toHaveBeenCalledWith('closeclick', jasmine.any(Function));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should initialize map engine with null gkey', (done) => {
|
||||||
|
// given
|
||||||
|
spyOn(uUtils, 'loadScript').and.returnValue(Promise.resolve());
|
||||||
|
// when
|
||||||
|
api.init()
|
||||||
|
.then(() => {
|
||||||
|
expect(google.maps.Map).toHaveBeenCalledTimes(1);
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch((e) => done.fail(e));
|
||||||
|
window.gm_loaded();
|
||||||
|
// then
|
||||||
|
expect(uUtils.loadScript).toHaveBeenCalledWith('https://maps.googleapis.com/maps/api/js?callback=gm_loaded', 'mapapi_gmaps', loadTimeout);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should fail with authorization error', (done) => {
|
||||||
|
// given
|
||||||
|
spyOn(uUtils, 'loadScript').and.returnValue(Promise.resolve());
|
||||||
|
lang.strings['apifailure'] = 'authfailure';
|
||||||
|
// when
|
||||||
|
api.init()
|
||||||
|
.then(() => done.fail('resolve callback called'))
|
||||||
|
.catch((e) => {
|
||||||
|
// then
|
||||||
|
expect(e.message).toContain(lang.strings['apifailure']);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
window.gm_authFailure();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show alert if authorization error occurs after initialization', (done) => {
|
||||||
|
// given
|
||||||
|
spyOn(uUtils, 'loadScript').and.returnValue(Promise.resolve());
|
||||||
|
lang.strings['apifailure'] = 'authfailure';
|
||||||
|
// when
|
||||||
|
api.init()
|
||||||
|
.then(() => {
|
||||||
|
expect(google.maps.Map).toHaveBeenCalledTimes(1);
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch((e) => done.fail(e));
|
||||||
|
window.gm_loaded();
|
||||||
|
window.gm_authFailure();
|
||||||
|
|
||||||
|
expect(window.alert).toHaveBeenCalledTimes(1);
|
||||||
|
expect(window.alert.calls.mostRecent().args[0]).toContain(lang.strings['apifailure']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should clean up class fields', () => {
|
||||||
|
// given
|
||||||
|
api.polies.length = 1;
|
||||||
|
api.markers.length = 1;
|
||||||
|
api.popup = new google.maps.InfoWindow();
|
||||||
|
container.innerHTML = 'content';
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
spyOn(google.maps.Map.prototype, 'getDiv').and.returnValue(container);
|
||||||
|
// when
|
||||||
|
api.cleanup();
|
||||||
|
// then
|
||||||
|
expect(api.polies.length).toBe(0);
|
||||||
|
expect(api.markers.length).toBe(0);
|
||||||
|
expect(api.popup).toBe(null);
|
||||||
|
expect(container.innerHTML).toBe('');
|
||||||
|
expect(api.map).toBe(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should clear map features', () => {
|
||||||
|
// given
|
||||||
|
const poly = new google.maps.Polyline();
|
||||||
|
const marker = new google.maps.Marker();
|
||||||
|
const popup = new google.maps.InfoWindow();
|
||||||
|
api.polies.push(poly);
|
||||||
|
api.markers.push(marker);
|
||||||
|
api.popup = popup;
|
||||||
|
spyOn(api, 'popupClose');
|
||||||
|
poly.setMap = () => {/* ignore */};
|
||||||
|
spyOn(poly, 'setMap');
|
||||||
|
marker.setMap = () => {/* ignore */};
|
||||||
|
spyOn(marker, 'setMap');
|
||||||
|
popup.setContent = () => {/* ignore */};
|
||||||
|
spyOn(popup, 'setContent');
|
||||||
|
spyOn(google.maps.InfoWindow.prototype, 'getMap').and.returnValue(true);
|
||||||
|
// when
|
||||||
|
api.clearMap();
|
||||||
|
// then
|
||||||
|
expect(poly.setMap).toHaveBeenCalledWith(null);
|
||||||
|
expect(api.polies.length).toBe(0);
|
||||||
|
expect(marker.setMap).toHaveBeenCalledWith(null);
|
||||||
|
expect(api.markers.length).toBe(0);
|
||||||
|
expect(popup.setContent).toHaveBeenCalledWith('');
|
||||||
|
expect(api.popupClose).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should construct track polyline and markers', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack();
|
||||||
|
spyOn(api, 'setMarker');
|
||||||
|
spyOn(google.maps, 'LatLng').and.callThrough();
|
||||||
|
spyOn(google.maps.LatLngBounds.prototype, 'extend').and.callThrough();
|
||||||
|
const expectedPolyOptions = {
|
||||||
|
strokeColor: config.strokeColor,
|
||||||
|
strokeOpacity: config.strokeOpacity,
|
||||||
|
strokeWeight: config.strokeWeight
|
||||||
|
};
|
||||||
|
// when
|
||||||
|
api.displayTrack(track, false);
|
||||||
|
// then
|
||||||
|
expect(api.polies.length).toBe(1);
|
||||||
|
expect(api.polies[0].path.length).toBe(track.positions.length);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledTimes(track.positions.length);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledWith(0, track);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledWith(1, track);
|
||||||
|
expect(google.maps.Polyline).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.Polyline).toHaveBeenCalledWith(expectedPolyOptions);
|
||||||
|
expect(google.maps.LatLng.calls.mostRecent().args[0]).toEqual(track.positions[track.positions.length - 1].latitude);
|
||||||
|
expect(google.maps.LatLng.calls.mostRecent().args[1]).toEqual(track.positions[track.positions.length - 1].longitude);
|
||||||
|
expect(google.maps.LatLngBounds.prototype.extend).toHaveBeenCalledTimes(track.positions.length);
|
||||||
|
expect(google.maps.LatLngBounds.prototype.extend.calls.mostRecent().args[0].latitude).toEqual(track.positions[track.positions.length - 1].latitude);
|
||||||
|
expect(google.maps.LatLngBounds.prototype.extend.calls.mostRecent().args[0].longitude).toEqual(track.positions[track.positions.length - 1].longitude);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should construct non-continuous track markers without polyline', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack();
|
||||||
|
spyOn(api, 'setMarker');
|
||||||
|
// when
|
||||||
|
track.continuous = false;
|
||||||
|
api.displayTrack(track, false);
|
||||||
|
// then
|
||||||
|
expect(api.polies.length).toBe(1);
|
||||||
|
expect(api.polies[0].path.length).toBe(0);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledTimes(track.positions.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should fit bounds if update without zoom (should not add listener for "bounds_changed")', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack();
|
||||||
|
spyOn(google.maps.event, 'addListenerOnce');
|
||||||
|
spyOn(google.maps.Map.prototype, 'fitBounds');
|
||||||
|
spyOn(api, 'setMarker');
|
||||||
|
spyOn(window, 'setTimeout');
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
// when
|
||||||
|
api.displayTrack(track, true);
|
||||||
|
// then
|
||||||
|
expect(api.polies.length).toBe(1);
|
||||||
|
expect(api.polies[0].path.length).toBe(track.positions.length);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledTimes(track.positions.length);
|
||||||
|
expect(google.maps.Map.prototype.fitBounds).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.event.addListenerOnce).not.toHaveBeenCalled();
|
||||||
|
expect(setTimeout).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should fit bounds and zoom (add listener for "bounds_changed") if update with single position', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack(1);
|
||||||
|
spyOn(google.maps.event, 'addListenerOnce');
|
||||||
|
spyOn(google.maps.Map.prototype, 'fitBounds');
|
||||||
|
spyOn(api, 'setMarker');
|
||||||
|
spyOn(window, 'setTimeout');
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
// when
|
||||||
|
api.displayTrack(track, true);
|
||||||
|
// then
|
||||||
|
expect(api.polies.length).toBe(1);
|
||||||
|
expect(api.polies[0].path.length).toBe(track.positions.length);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledTimes(track.positions.length);
|
||||||
|
expect(google.maps.Map.prototype.fitBounds).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.event.addListenerOnce.calls.mostRecent().args[1]).toBe('bounds_changed');
|
||||||
|
expect(setTimeout).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create marker from track position and add it to markers array', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack(1);
|
||||||
|
track.positions[0].timestamp = 1;
|
||||||
|
spyOn(google.maps.Marker.prototype, 'addListener');
|
||||||
|
spyOn(google.maps.Marker.prototype, 'setIcon');
|
||||||
|
spyOn(GoogleMapsApi, 'getMarkerIcon');
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
|
||||||
|
expect(api.markers.length).toBe(0);
|
||||||
|
// when
|
||||||
|
api.setMarker(0, track);
|
||||||
|
// then
|
||||||
|
expect(google.maps.Marker).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.Marker.calls.mostRecent().args[0].position.latitude).toBe(track.positions[0].latitude);
|
||||||
|
expect(google.maps.Marker.calls.mostRecent().args[0].position.longitude).toBe(track.positions[0].longitude);
|
||||||
|
expect(google.maps.Marker.calls.mostRecent().args[0].title).toContain('1970');
|
||||||
|
expect(google.maps.Marker.calls.mostRecent().args[0].map).toEqual(api.map);
|
||||||
|
expect(google.maps.Marker.prototype.setIcon).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.Marker.prototype.addListener).toHaveBeenCalledTimes(3);
|
||||||
|
expect(google.maps.Marker.prototype.addListener).toHaveBeenCalledWith('click', jasmine.any(Function));
|
||||||
|
expect(google.maps.Marker.prototype.addListener).toHaveBeenCalledWith('mouseover', jasmine.any(Function));
|
||||||
|
expect(google.maps.Marker.prototype.addListener).toHaveBeenCalledWith('mouseout', jasmine.any(Function));
|
||||||
|
expect(api.markers.length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create marker different marker icon for start, end and normal position', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack(3);
|
||||||
|
spyOn(google.maps.Marker.prototype, 'setIcon');
|
||||||
|
spyOn(GoogleMapsApi, 'getMarkerIcon');
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
// when
|
||||||
|
api.setMarker(0, track);
|
||||||
|
// then
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledTimes(1);
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledWith(config.colorStart, true, jasmine.any(Boolean));
|
||||||
|
// when
|
||||||
|
api.setMarker(1, track);
|
||||||
|
// then
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledTimes(2);
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledWith(config.colorNormal, false, jasmine.any(Boolean));
|
||||||
|
// when
|
||||||
|
api.setMarker(2, track);
|
||||||
|
// then
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledTimes(3);
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledWith(config.colorStop, true, jasmine.any(Boolean));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create different marker for position with comment or image', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack(4);
|
||||||
|
const positionWithComment = 0;
|
||||||
|
const positionWithImage = 1;
|
||||||
|
const positionWithImageAndComment = 2;
|
||||||
|
const positionWithoutCommentAndImage = 3;
|
||||||
|
track.positions[positionWithComment].comment = 'comment 0';
|
||||||
|
track.positions[positionWithImage].image = 'image 1';
|
||||||
|
track.positions[positionWithImageAndComment].comment = 'comment 2';
|
||||||
|
track.positions[positionWithImageAndComment].image = 'image 2';
|
||||||
|
spyOn(google.maps.Marker.prototype, 'setIcon');
|
||||||
|
spyOn(GoogleMapsApi, 'getMarkerIcon');
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
// when
|
||||||
|
api.setMarker(positionWithComment, track);
|
||||||
|
// then
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledTimes(1);
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledWith(jasmine.any(String), jasmine.any(Boolean), true);
|
||||||
|
// when
|
||||||
|
api.setMarker(positionWithImage, track);
|
||||||
|
// then
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledTimes(2);
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledWith(jasmine.any(String), jasmine.any(Boolean), true);
|
||||||
|
// when
|
||||||
|
api.setMarker(positionWithImageAndComment, track);
|
||||||
|
// then
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledTimes(3);
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledWith(jasmine.any(String), jasmine.any(Boolean), true);
|
||||||
|
// when
|
||||||
|
api.setMarker(positionWithoutCommentAndImage, track);
|
||||||
|
// then
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledTimes(4);
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledWith(jasmine.any(String), jasmine.any(Boolean), false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should open popup for given marker with content generated by id', () => {
|
||||||
|
// given
|
||||||
|
const popup = new google.maps.InfoWindow();
|
||||||
|
const marker = new google.maps.Marker();
|
||||||
|
const id = 1;
|
||||||
|
spyOn(popup, 'setContent').and.callThrough();
|
||||||
|
spyOn(popup, 'open');
|
||||||
|
mockViewModel.getPopupHtml = (i) => `content ${i}`;
|
||||||
|
spyOn(mockViewModel, 'getPopupHtml').and.callThrough();
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
// when
|
||||||
|
api.popup = popup;
|
||||||
|
api.popupOpen(id, marker);
|
||||||
|
// then
|
||||||
|
expect(mockViewModel.getPopupHtml).toHaveBeenCalledWith(id);
|
||||||
|
expect(popup.setContent).toHaveBeenCalledWith(`content ${id}`);
|
||||||
|
expect(popup.open).toHaveBeenCalledWith(api.map, marker);
|
||||||
|
expect(api.viewModel.model.markerSelect).toBe(id);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should close popup', () => {
|
||||||
|
// given
|
||||||
|
const popup = new google.maps.InfoWindow();
|
||||||
|
spyOn(popup, 'close');
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
api.viewModel.model.markerSelect = 1;
|
||||||
|
// when
|
||||||
|
api.popup = popup;
|
||||||
|
api.popupClose();
|
||||||
|
// then
|
||||||
|
expect(popup.close).toHaveBeenCalledTimes(1);
|
||||||
|
expect(api.viewModel.model.markerSelect).toBe(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should animate marker with given index', (done) => {
|
||||||
|
// given
|
||||||
|
const marker = new google.maps.Marker();
|
||||||
|
const iconOriginal = new google.maps.Icon();
|
||||||
|
const iconAnimated = new google.maps.Icon();
|
||||||
|
api.markers.push(marker);
|
||||||
|
api.popup = new google.maps.InfoWindow();
|
||||||
|
spyOn(google.maps.Marker.prototype, 'getIcon').and.returnValue(iconOriginal);
|
||||||
|
spyOn(google.maps.Marker.prototype, 'setIcon').and.callThrough();
|
||||||
|
spyOn(google.maps.Marker.prototype, 'setAnimation');
|
||||||
|
spyOn(GoogleMapsApi, 'getMarkerIcon').and.returnValue(iconAnimated);
|
||||||
|
spyOn(google.maps.InfoWindow.prototype, 'getMap').and.returnValue(true);
|
||||||
|
spyOn(api, 'popupClose');
|
||||||
|
// when
|
||||||
|
api.animateMarker(0);
|
||||||
|
// then
|
||||||
|
expect(api.popupClose).toHaveBeenCalledTimes(1);
|
||||||
|
expect(google.maps.Marker.prototype.setIcon).toHaveBeenCalledWith(iconAnimated);
|
||||||
|
expect(GoogleMapsApi.getMarkerIcon).toHaveBeenCalledWith(config.colorHilite, jasmine.any(Boolean), jasmine.any(Boolean));
|
||||||
|
expect(google.maps.Marker.prototype.setAnimation).toHaveBeenCalledWith(google.maps.Animation.BOUNCE);
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(google.maps.Marker.prototype.setIcon).toHaveBeenCalledWith(iconOriginal);
|
||||||
|
expect(google.maps.Marker.prototype.setAnimation).toHaveBeenCalledWith(null);
|
||||||
|
done();
|
||||||
|
}, 2100);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return map bounds array', () => {
|
||||||
|
// given
|
||||||
|
const ne = new google.maps.LatLng(1, 2);
|
||||||
|
const sw = new google.maps.LatLng(3, 4);
|
||||||
|
const bounds = new google.maps.LatLngBounds(sw, ne);
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
spyOn(google.maps.Map.prototype, 'getBounds').and.returnValue(bounds);
|
||||||
|
// when
|
||||||
|
const result = api.getBounds();
|
||||||
|
// then
|
||||||
|
expect(result).toEqual([ sw.longitude, sw.latitude, ne.longitude, ne.latitude ]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should zoom to markers extent', () => {
|
||||||
|
// given
|
||||||
|
api.markers.push(new google.maps.Marker());
|
||||||
|
api.markers.push(new google.maps.Marker());
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
spyOn(google.maps.LatLngBounds.prototype, 'extend');
|
||||||
|
spyOn(google.maps.Map.prototype, 'fitBounds');
|
||||||
|
// when
|
||||||
|
api.zoomToExtent();
|
||||||
|
// then
|
||||||
|
expect(google.maps.LatLngBounds.prototype.extend).toHaveBeenCalledTimes(api.markers.length);
|
||||||
|
expect(google.maps.Map.prototype.fitBounds).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should zoom to given bounds array', () => {
|
||||||
|
// given
|
||||||
|
const ne = new google.maps.LatLng(1, 2);
|
||||||
|
const sw = new google.maps.LatLng(3, 4);
|
||||||
|
const fitBounds = new google.maps.LatLngBounds(sw, ne);
|
||||||
|
const bounds = [ sw.longitude, sw.latitude, ne.longitude, ne.latitude ];
|
||||||
|
api.map = new google.maps.Map(container);
|
||||||
|
spyOn(google.maps.Map.prototype, 'fitBounds');
|
||||||
|
// when
|
||||||
|
api.zoomToBounds(bounds);
|
||||||
|
// then
|
||||||
|
expect(google.maps.Map.prototype.fitBounds).toHaveBeenCalledWith(fitBounds);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return timeout in ms', () => {
|
||||||
|
jasmine.getEnv().allowRespy(true);
|
||||||
|
spyOnProperty(GoogleMapsApi, 'loadTimeoutMs', 'get').and.callThrough();
|
||||||
|
|
||||||
|
expect(GoogleMapsApi.loadTimeoutMs).toEqual(jasmine.any(Number));
|
||||||
|
});
|
||||||
|
|
||||||
|
function getTrack(length = 2) {
|
||||||
|
const track = new uTrack(1, 'test track', new uUser(1, 'testUser'));
|
||||||
|
track.positions = [];
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
track.positions.push(getPosition());
|
||||||
|
}
|
||||||
|
return track;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPosition(latitude = 52.23, longitude = 21.01) {
|
||||||
|
const position = new uPosition();
|
||||||
|
position.latitude = latitude;
|
||||||
|
position.longitude = longitude;
|
||||||
|
return position;
|
||||||
|
}
|
||||||
|
});
|
||||||
570
js/test/api_openlayers.test.js
Normal file
570
js/test/api_openlayers.test.js
Normal file
@ -0,0 +1,570 @@
|
|||||||
|
/*
|
||||||
|
* μlogger
|
||||||
|
*
|
||||||
|
* Copyright(C) 2019 Bartek Fabiszewski (www.fabiszewski.net)
|
||||||
|
*
|
||||||
|
* This is free software; you can redistribute it and/or modify it under
|
||||||
|
* the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation; either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful, but
|
||||||
|
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
* General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
/* eslint-disable no-undef */
|
||||||
|
|
||||||
|
import OpenlayersApi from '../src/mapapi/api_openlayers.js';
|
||||||
|
import { config } from '../src/initializer.js'
|
||||||
|
import uPosition from '../src/position.js';
|
||||||
|
import uTrack from '../src/track.js';
|
||||||
|
import uUser from '../src/user.js';
|
||||||
|
import uUtils from '../src/utils.js';
|
||||||
|
|
||||||
|
describe('Openlayers map API tests', () => {
|
||||||
|
let container;
|
||||||
|
let mockViewModel;
|
||||||
|
let api;
|
||||||
|
let mockMap;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
config.initialize();
|
||||||
|
document.body.innerHTML = '';
|
||||||
|
container = document.createElement('div');
|
||||||
|
document.body.appendChild(container);
|
||||||
|
mockViewModel = { mapElement: container, model: {} };
|
||||||
|
api = new OpenlayersApi(mockViewModel, ol);
|
||||||
|
mockMap = new ol.Map({ target: container });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should load and initialize api scripts', (done) => {
|
||||||
|
// given
|
||||||
|
spyOn(uUtils, 'addCss');
|
||||||
|
spyOn(api, 'initMap');
|
||||||
|
spyOn(api, 'initLayers');
|
||||||
|
spyOn(api, 'initStyles');
|
||||||
|
spyOn(api, 'initPopups');
|
||||||
|
// when
|
||||||
|
api.init()
|
||||||
|
.then(() => {
|
||||||
|
// then
|
||||||
|
expect(uUtils.addCss).toHaveBeenCalledTimes(1);
|
||||||
|
expect(api.initMap).toHaveBeenCalledTimes(1);
|
||||||
|
expect(api.initLayers).toHaveBeenCalledTimes(1);
|
||||||
|
expect(api.initStyles).toHaveBeenCalledTimes(1);
|
||||||
|
expect(api.initPopups).toHaveBeenCalledTimes(1);
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch((e) => done.fail(e));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should initialize map engine with config values', () => {
|
||||||
|
// given
|
||||||
|
spyOn(ol.Map.prototype, 'on');
|
||||||
|
// when
|
||||||
|
api.initMap();
|
||||||
|
// then
|
||||||
|
expect(api.map).toEqual(jasmine.any(ol.Map));
|
||||||
|
expect(api.map.getTarget()).toBe(container);
|
||||||
|
expect(api.map.getControls().getLength()).toBe(3);
|
||||||
|
expect(api.map.getView().getCenter()).toEqual(ol.proj.fromLonLat([ config.initLongitude, config.initLatitude ]));
|
||||||
|
expect(ol.Map.prototype.on).toHaveBeenCalledWith('pointermove', jasmine.any(Function));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should initialize map layers with config values', () => {
|
||||||
|
// given
|
||||||
|
spyOn(api, 'initLayerSwitcher');
|
||||||
|
config.olLayers = {
|
||||||
|
'layer1': 'http://layer1',
|
||||||
|
'layer2': 'http://layer2'
|
||||||
|
};
|
||||||
|
api.map = mockMap;
|
||||||
|
// when
|
||||||
|
api.initLayers();
|
||||||
|
// then
|
||||||
|
expect(api.map.getLayers().getLength()).toEqual(5);
|
||||||
|
api.map.getLayers().forEach((_layer) => {
|
||||||
|
const name = _layer.get('name');
|
||||||
|
switch (name) {
|
||||||
|
case 'OpenStreetMap':
|
||||||
|
|
||||||
|
expect(_layer).toEqual(jasmine.any(ol.layer.TileLayer));
|
||||||
|
expect(_layer.getVisible()).toBe(true);
|
||||||
|
expect(_layer.getSource()).toEqual(jasmine.any(ol.source.OSM));
|
||||||
|
expect(_layer.get('type')).not.toBe('data');
|
||||||
|
expect(api.selectedLayer).toEqual(_layer);
|
||||||
|
break;
|
||||||
|
case 'layer1':
|
||||||
|
case 'layer2':
|
||||||
|
|
||||||
|
expect(_layer.getVisible()).toBe(false);
|
||||||
|
expect(_layer).toEqual(jasmine.any(ol.layer.TileLayer));
|
||||||
|
expect(_layer.getSource()).toEqual(jasmine.any(ol.source.XYZ));
|
||||||
|
expect(_layer.get('type')).not.toBe('data');
|
||||||
|
break;
|
||||||
|
case 'Track':
|
||||||
|
|
||||||
|
expect(_layer.getVisible()).toBe(true);
|
||||||
|
expect(_layer).toEqual(jasmine.any(ol.layer.VectorLayer));
|
||||||
|
expect(_layer.getSource()).toEqual(jasmine.any(ol.source.Vector));
|
||||||
|
expect(_layer.getStyle().getStroke().getColor()).toBe(uUtils.hexToRGBA(config.strokeColor, config.strokeOpacity));
|
||||||
|
expect(_layer.getStyle().getStroke().getWidth()).toBe(config.strokeWeight);
|
||||||
|
expect(_layer.get('type')).toBe('data');
|
||||||
|
expect(api.layerTrack).toEqual(_layer);
|
||||||
|
break;
|
||||||
|
case 'Markers':
|
||||||
|
|
||||||
|
expect(_layer.getVisible()).toBe(true);
|
||||||
|
expect(_layer).toEqual(jasmine.any(ol.layer.VectorLayer));
|
||||||
|
expect(_layer.getSource()).toEqual(jasmine.any(ol.source.Vector));
|
||||||
|
expect(_layer.get('type')).toBe('data');
|
||||||
|
expect(api.layerMarkers).toEqual(_layer);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
fail(`Unexpected layer: ${name}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(api.initLayerSwitcher).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should initialize layer switcher element and control', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
api.map.addLayer(new ol.layer.TileLayer());
|
||||||
|
const controlsCount = api.map.getControls().getLength();
|
||||||
|
// when
|
||||||
|
api.initLayerSwitcher();
|
||||||
|
const switcher = document.getElementById('switcher');
|
||||||
|
// then
|
||||||
|
expect(switcher).toEqual(jasmine.any(HTMLDivElement));
|
||||||
|
expect(switcher.firstChild.childNodes.length).toEqual(1);
|
||||||
|
expect(api.map.getControls().getLength()).toBe(controlsCount + 1)
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should clean up and initialize styles', () => {
|
||||||
|
// given
|
||||||
|
api.markerStyles = {
|
||||||
|
'style1': 'to be cleaned up'
|
||||||
|
};
|
||||||
|
// when
|
||||||
|
api.initStyles();
|
||||||
|
// then
|
||||||
|
expect(Object.keys(api.markerStyles).length).toBe(7);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should initialize popups', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
// when
|
||||||
|
api.initPopups();
|
||||||
|
const popup = document.getElementById('popup-container');
|
||||||
|
// then
|
||||||
|
expect(popup).toEqual(jasmine.any(HTMLDivElement));
|
||||||
|
expect(api.popup).toEqual(jasmine.any(ol.Overlay));
|
||||||
|
expect(api.popup.getElement()).toBe(popup);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should switch layers', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
const layer1 = new ol.layer.TileLayer({ name: 'layer1', visible: true });
|
||||||
|
const layer2 = new ol.layer.TileLayer({ name: 'layer2', visible: false });
|
||||||
|
api.selectedLayer = layer1;
|
||||||
|
api.map.addLayer(layer1);
|
||||||
|
api.map.addLayer(layer2);
|
||||||
|
// when
|
||||||
|
api.switchLayer('layer2');
|
||||||
|
// then
|
||||||
|
expect(api.selectedLayer).toEqual(layer2);
|
||||||
|
expect(layer1.getVisible()).toBe(false);
|
||||||
|
expect(layer2.getVisible()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should toggle data layer visibility', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
const layer1 = new ol.layer.TileLayer({ name: 'layer1', visible: true, type: 'data' });
|
||||||
|
const layer2 = new ol.layer.TileLayer({ name: 'layer2', visible: false, type: 'data' });
|
||||||
|
api.selectedLayer = layer1;
|
||||||
|
api.map.addLayer(layer1);
|
||||||
|
api.map.addLayer(layer2);
|
||||||
|
// when
|
||||||
|
api.switchLayer('layer1');
|
||||||
|
// then
|
||||||
|
expect(api.selectedLayer).toEqual(layer1);
|
||||||
|
expect(layer1.getVisible()).toBe(false);
|
||||||
|
expect(layer2.getVisible()).toBe(false);
|
||||||
|
// when
|
||||||
|
api.switchLayer('layer2');
|
||||||
|
// then
|
||||||
|
expect(api.selectedLayer).toEqual(layer1);
|
||||||
|
expect(layer1.getVisible()).toBe(false);
|
||||||
|
expect(layer2.getVisible()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should clean up class fields', () => {
|
||||||
|
// given
|
||||||
|
api.layerTrack = new ol.layer.VectorLayer();
|
||||||
|
api.layerMarkers = new ol.layer.VectorLayer();
|
||||||
|
api.selectedLayer = api.layerTrack;
|
||||||
|
api.markerStyles = { style: 'style' };
|
||||||
|
document.body.appendChild(document.createElement('div'));
|
||||||
|
api.map = mockMap;
|
||||||
|
// when
|
||||||
|
api.cleanup();
|
||||||
|
// then
|
||||||
|
expect(api.layerTrack).toBe(null);
|
||||||
|
expect(api.layerMarkers).toBe(null);
|
||||||
|
expect(api.selectedLayer).toBe(null);
|
||||||
|
expect(api.markerStyles).toBe(null);
|
||||||
|
expect(container.innerHTML).toBe('');
|
||||||
|
expect(api.map).toBe(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should clear marker and track layers features', () => {
|
||||||
|
// given
|
||||||
|
api.layerTrack = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
api.layerTrack.getSource().addFeature(new ol.Feature());
|
||||||
|
api.layerMarkers = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
api.layerMarkers.getSource().addFeature(new ol.Feature());
|
||||||
|
|
||||||
|
expect(api.layerTrack.getSource().getFeatures().length).toBe(1);
|
||||||
|
expect(api.layerMarkers.getSource().getFeatures().length).toBe(1);
|
||||||
|
// when
|
||||||
|
api.clearMap();
|
||||||
|
// then
|
||||||
|
expect(api.layerTrack.getSource().getFeatures().length).toBe(0);
|
||||||
|
expect(api.layerMarkers.getSource().getFeatures().length).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should construct track markers with track layer', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
api.layerTrack = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
api.layerMarkers = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
const track = getTrack();
|
||||||
|
spyOn(api, 'setMarker');
|
||||||
|
spyOn(api, 'fitToExtent');
|
||||||
|
// when
|
||||||
|
api.displayTrack(track, false);
|
||||||
|
let zoomControl;
|
||||||
|
api.map.getControls().forEach((el) => {
|
||||||
|
if (el instanceof ol.control.ZoomToExtent) {
|
||||||
|
zoomControl = el;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// then
|
||||||
|
expect(api.layerTrack.getSource().getFeatures().length).toBe(1);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledTimes(track.positions.length);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledWith(0, track);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledWith(1, track);
|
||||||
|
expect(api.fitToExtent).not.toHaveBeenCalled();
|
||||||
|
// noinspection JSUnusedAssignment
|
||||||
|
expect(zoomControl.extent).toEqual(api.layerMarkers.getSource().getExtent());
|
||||||
|
expect(api.layerTrack.getSource().getFeatures()[0].getGeometry().getCoordinates().length).toEqual(track.positions.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should construct non-continuous track markers without track layer', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
api.map.addControl(new ol.control.ZoomToExtent());
|
||||||
|
api.layerTrack = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
api.layerMarkers = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
const track = getTrack();
|
||||||
|
track.continuous = false;
|
||||||
|
spyOn(api, 'setMarker');
|
||||||
|
spyOn(api, 'fitToExtent');
|
||||||
|
// when
|
||||||
|
api.displayTrack(track, false);
|
||||||
|
let zoomControl;
|
||||||
|
api.map.getControls().forEach((el) => {
|
||||||
|
if (el instanceof ol.control.ZoomToExtent) {
|
||||||
|
zoomControl = el;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// then
|
||||||
|
expect(api.layerTrack.getSource().getFeatures().length).toBe(0);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledTimes(track.positions.length);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledWith(0, track);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledWith(1, track);
|
||||||
|
expect(api.fitToExtent).not.toHaveBeenCalled();
|
||||||
|
// noinspection JSUnusedAssignment
|
||||||
|
expect(zoomControl.extent).toEqual(api.layerMarkers.getSource().getExtent());
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should fit to extent if update without zoom', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
api.layerTrack = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
api.layerMarkers = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
const track = getTrack();
|
||||||
|
spyOn(api, 'setMarker');
|
||||||
|
const markersExtent = [ 3, 2, 1, 0 ];
|
||||||
|
spyOn(api, 'fitToExtent').and.callFake((_extent) => _extent);
|
||||||
|
spyOn(ol.source.Vector.prototype, 'getExtent').and.returnValue(markersExtent);
|
||||||
|
// when
|
||||||
|
api.displayTrack(track, true);
|
||||||
|
let zoomControl;
|
||||||
|
api.map.getControls().forEach((el) => {
|
||||||
|
if (el instanceof ol.control.ZoomToExtent) {
|
||||||
|
zoomControl = el;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// then
|
||||||
|
expect(api.layerTrack.getSource().getFeatures().length).toBe(1);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledTimes(track.positions.length);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledWith(0, track);
|
||||||
|
expect(api.setMarker).toHaveBeenCalledWith(1, track);
|
||||||
|
expect(api.fitToExtent).toHaveBeenCalledWith(markersExtent);
|
||||||
|
// noinspection JSUnusedAssignment
|
||||||
|
expect(zoomControl.extent).toEqual(markersExtent);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should fit to extent', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
spyOn(ol.View.prototype, 'fit');
|
||||||
|
spyOn(ol.View.prototype, 'getZoom').and.returnValue(OpenlayersApi.ZOOM_MAX - 1);
|
||||||
|
const extent = [ 0, 1, 2, 3 ];
|
||||||
|
// when
|
||||||
|
const result = api.fitToExtent(extent);
|
||||||
|
// then
|
||||||
|
expect(ol.View.prototype.fit).toHaveBeenCalledWith(extent, jasmine.any(Object));
|
||||||
|
expect(result).toEqual(extent);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should fit to extent and zoom to max value', () => {
|
||||||
|
// given
|
||||||
|
const extent = [ 0, 1, 2, 3 ];
|
||||||
|
const zoomedExtent = [ 3, 2, 1, 0 ];
|
||||||
|
api.map = mockMap;
|
||||||
|
spyOn(ol.View.prototype, 'fit');
|
||||||
|
spyOn(ol.View.prototype, 'getZoom').and.returnValue(OpenlayersApi.ZOOM_MAX + 1);
|
||||||
|
spyOn(ol.View.prototype, 'setZoom');
|
||||||
|
spyOn(ol.View.prototype, 'calculateExtent').and.returnValue(zoomedExtent);
|
||||||
|
// when
|
||||||
|
const result = api.fitToExtent(extent);
|
||||||
|
// then
|
||||||
|
expect(ol.View.prototype.fit).toHaveBeenCalledWith(extent, jasmine.any(Object));
|
||||||
|
expect(ol.View.prototype.setZoom).toHaveBeenCalledWith(OpenlayersApi.ZOOM_MAX);
|
||||||
|
expect(result).toEqual(zoomedExtent);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create marker from track position and add it to markers layer', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack(1);
|
||||||
|
track.positions[0].timestamp = 1;
|
||||||
|
const id = 0;
|
||||||
|
api.map = mockMap;
|
||||||
|
api.layerMarkers = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
spyOn(api, 'getMarkerStyle');
|
||||||
|
// when
|
||||||
|
api.setMarker(id, track);
|
||||||
|
const marker = api.layerMarkers.getSource().getFeatures()[0];
|
||||||
|
// then
|
||||||
|
expect(marker.getId()).toBe(id);
|
||||||
|
expect(marker.getGeometry().getFirstCoordinate()).toEqual(ol.proj.fromLonLat([ track.positions[0].longitude, track.positions[0].latitude ]));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should get different marker style for start, end and normal position', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack(3);
|
||||||
|
api.markerStyles = {
|
||||||
|
normal: 'normal',
|
||||||
|
stop: 'stop',
|
||||||
|
start: 'start'
|
||||||
|
};
|
||||||
|
// when
|
||||||
|
let style = api.getMarkerStyle(0, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('start');
|
||||||
|
// when
|
||||||
|
style = api.getMarkerStyle(1, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('normal');
|
||||||
|
// when
|
||||||
|
style = api.getMarkerStyle(2, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('stop');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create different marker for position with comment', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack(3);
|
||||||
|
track.positions[0].comment = 'comment';
|
||||||
|
track.positions[1].comment = 'comment';
|
||||||
|
track.positions[2].comment = 'comment';
|
||||||
|
api.markerStyles = {
|
||||||
|
extra: 'extra',
|
||||||
|
stopExtra: 'stopExtra',
|
||||||
|
startExtra: 'startExtra'
|
||||||
|
};
|
||||||
|
// when
|
||||||
|
let style = api.getMarkerStyle(0, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('startExtra');
|
||||||
|
// when
|
||||||
|
style = api.getMarkerStyle(1, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('extra');
|
||||||
|
// when
|
||||||
|
style = api.getMarkerStyle(2, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('stopExtra');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create different marker for position with image', () => {
|
||||||
|
// given
|
||||||
|
const track = getTrack(3);
|
||||||
|
track.positions[0].image = 'image';
|
||||||
|
track.positions[1].image = 'image';
|
||||||
|
track.positions[2].image = 'image';
|
||||||
|
api.markerStyles = {
|
||||||
|
extra: 'extra',
|
||||||
|
stopExtra: 'stopExtra',
|
||||||
|
startExtra: 'startExtra'
|
||||||
|
};
|
||||||
|
// when
|
||||||
|
let style = api.getMarkerStyle(0, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('startExtra');
|
||||||
|
// when
|
||||||
|
style = api.getMarkerStyle(1, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('extra');
|
||||||
|
// when
|
||||||
|
style = api.getMarkerStyle(2, track);
|
||||||
|
// then
|
||||||
|
expect(style).toBe('stopExtra');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should animate marker with given index', (done) => {
|
||||||
|
// given
|
||||||
|
const styleOriginal = new ol.style.Style();
|
||||||
|
const styleAnimated = new ol.style.Style();
|
||||||
|
api.markerStyles = {
|
||||||
|
hilite: styleAnimated
|
||||||
|
};
|
||||||
|
const id = 1;
|
||||||
|
const marker = new ol.Feature();
|
||||||
|
marker.setStyle(styleOriginal);
|
||||||
|
marker.setId(id);
|
||||||
|
api.layerMarkers = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
api.layerMarkers.getSource().addFeature(marker);
|
||||||
|
// when
|
||||||
|
api.animateMarker(1);
|
||||||
|
// then
|
||||||
|
expect(marker.getStyle()).toBe(styleAnimated);
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(marker.getStyle()).toBe(styleOriginal);
|
||||||
|
done();
|
||||||
|
}, 2100);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should call View.fit with markers layer extent', () => {
|
||||||
|
// given
|
||||||
|
const extent = [ 0, 1, 2, 3 ];
|
||||||
|
api.map = mockMap;
|
||||||
|
api.layerMarkers = new ol.layer.VectorLayer({ source: new ol.source.Vector() });
|
||||||
|
spyOn(ol.View.prototype, 'fit');
|
||||||
|
spyOn(ol.source.Vector.prototype, 'getExtent').and.returnValue(extent);
|
||||||
|
// when
|
||||||
|
api.zoomToExtent();
|
||||||
|
// then
|
||||||
|
expect(ol.View.prototype.fit).toHaveBeenCalledWith(extent);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should get map bounds and convert to WGS84 (EPSG:4326)', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
const extent = [ 2292957.24947, 6828285.71702, 2378184.536, 6861382.95027 ];
|
||||||
|
spyOn(ol.View.prototype, 'calculateExtent').and.returnValue(extent);
|
||||||
|
// when
|
||||||
|
const bounds = api.getBounds();
|
||||||
|
// then
|
||||||
|
expect(ol.View.prototype.calculateExtent).toHaveBeenCalledWith(jasmine.any(Array));
|
||||||
|
expect(bounds[0]).toBeCloseTo(20.597985430276808);
|
||||||
|
expect(bounds[1]).toBeCloseTo(52.15547181298076);
|
||||||
|
expect(bounds[2]).toBeCloseTo(21.363595171488573);
|
||||||
|
expect(bounds[3]).toBeCloseTo(52.33750879522563);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should convert bounds to EPSG:3857 and fit view', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
const bounds = [ 20.597985430276808, 52.15547181298076, 21.363595171488573, 52.33750879522563 ];
|
||||||
|
spyOn(ol.View.prototype, 'fit');
|
||||||
|
// when
|
||||||
|
api.zoomToBounds(bounds);
|
||||||
|
// then
|
||||||
|
const extent = ol.View.prototype.fit.calls.mostRecent().args[0];
|
||||||
|
|
||||||
|
expect(extent[0]).toBeCloseTo(2292957.24947);
|
||||||
|
expect(extent[1]).toBeCloseTo(6828285.71702);
|
||||||
|
expect(extent[2]).toBeCloseTo(2378184.536);
|
||||||
|
expect(extent[3]).toBeCloseTo(6861382.95027);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should update map size', () => {
|
||||||
|
// given
|
||||||
|
api.map = mockMap;
|
||||||
|
spyOn(ol.Map.prototype, 'updateSize');
|
||||||
|
// when
|
||||||
|
api.updateSize();
|
||||||
|
// then
|
||||||
|
expect(ol.Map.prototype.updateSize).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should open popup at coordinate and close it', () => {
|
||||||
|
// given
|
||||||
|
const id = 1;
|
||||||
|
const coordinate = [ 1, 2 ];
|
||||||
|
mockViewModel.getPopupHtml = (i) => `content ${i}`;
|
||||||
|
mockViewModel.model.markerSelect = null;
|
||||||
|
spyOn(mockViewModel, 'getPopupHtml').and.callThrough();
|
||||||
|
api.map = mockMap;
|
||||||
|
const popupContainer = document.createElement('div');
|
||||||
|
const popupContent = document.createElement('div');
|
||||||
|
popupContainer.appendChild(popupContent);
|
||||||
|
api.popup = new ol.Overlay({ element: popupContainer });
|
||||||
|
api.map.addOverlay(api.popup);
|
||||||
|
// when
|
||||||
|
api.popupOpen(id, coordinate);
|
||||||
|
// then
|
||||||
|
expect(api.popup.getPosition()).toEqual(coordinate);
|
||||||
|
expect(api.popup.getElement().firstElementChild.innerHTML).toBe(`content ${id}`);
|
||||||
|
expect(mockViewModel.model.markerSelect).toBe(id);
|
||||||
|
// when
|
||||||
|
api.popupClose();
|
||||||
|
// then
|
||||||
|
// eslint-disable-next-line no-undefined
|
||||||
|
expect(api.popup.getPosition()).toBe(undefined);
|
||||||
|
expect(api.popup.getElement().firstElementChild.innerHTML).toBe('content 1');
|
||||||
|
expect(mockViewModel.model.markerSelect).toBe(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
function getTrack(length = 2) {
|
||||||
|
const track = new uTrack(1, 'test track', new uUser(1, 'testUser'));
|
||||||
|
track.positions = [];
|
||||||
|
let lat = 21.01;
|
||||||
|
let lon = 52.23;
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
track.positions.push(getPosition(lat, lon));
|
||||||
|
lat += 0.5;
|
||||||
|
lon += 0.5;
|
||||||
|
}
|
||||||
|
return track;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPosition(latitude = 52.23, longitude = 21.01) {
|
||||||
|
const position = new uPosition();
|
||||||
|
position.latitude = latitude;
|
||||||
|
position.longitude = longitude;
|
||||||
|
return position;
|
||||||
|
}
|
||||||
|
});
|
||||||
99
js/test/googlemaps.stub.js
Normal file
99
js/test/googlemaps.stub.js
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
/*
|
||||||
|
* μlogger
|
||||||
|
*
|
||||||
|
* Copyright(C) 2019 Bartek Fabiszewski (www.fabiszewski.net)
|
||||||
|
*
|
||||||
|
* This is free software; you can redistribute it and/or modify it under
|
||||||
|
* the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation; either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful, but
|
||||||
|
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
* General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* eslint-disable func-style */
|
||||||
|
const stubObj = {};
|
||||||
|
const stubFn = function() {/* ignore */};
|
||||||
|
const stubFnObj = function() { return stubObj; };
|
||||||
|
|
||||||
|
export const setupGmapsStub = () => {
|
||||||
|
// noinspection JSUnresolvedVariable
|
||||||
|
window.google = {
|
||||||
|
maps: {
|
||||||
|
Animation: {
|
||||||
|
BOUNCE: 1,
|
||||||
|
DROP: 2
|
||||||
|
},
|
||||||
|
event: {
|
||||||
|
addListener: stubFn,
|
||||||
|
addListenerOnce: stubFn,
|
||||||
|
removeListener: stubFn
|
||||||
|
},
|
||||||
|
Icon: stubFn,
|
||||||
|
InfoWindow: stubFn,
|
||||||
|
LatLng: function(lat, lng) {
|
||||||
|
this.latitude = parseFloat(lat);
|
||||||
|
this.longitude = parseFloat(lng);
|
||||||
|
},
|
||||||
|
LatLngBounds: function(sw, ne) {
|
||||||
|
this.sw = sw;
|
||||||
|
this.ne = ne;
|
||||||
|
},
|
||||||
|
Map: stubFn,
|
||||||
|
MapTypeId: {
|
||||||
|
HYBRID: 1,
|
||||||
|
ROADMAP: 2,
|
||||||
|
SATELLITE: 3,
|
||||||
|
TERRAIN: 4
|
||||||
|
},
|
||||||
|
Marker: stubFn,
|
||||||
|
Point: stubFnObj,
|
||||||
|
Polyline: function(opts) {
|
||||||
|
this.options = opts;
|
||||||
|
this.path = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
applyPrototypes(stubFn, stubObj);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const applyPrototypes = () => {
|
||||||
|
window.google.maps.InfoWindow.prototype.addListener = stubFn;
|
||||||
|
window.google.maps.InfoWindow.prototype.close = stubFn;
|
||||||
|
window.google.maps.InfoWindow.prototype.getMap = stubFn;
|
||||||
|
window.google.maps.InfoWindow.prototype.open = stubFn;
|
||||||
|
window.google.maps.InfoWindow.prototype.setContent = stubFn;
|
||||||
|
window.google.maps.LatLng.prototype.lat = function () { return this.latitude; };
|
||||||
|
window.google.maps.LatLng.prototype.lng = function () { return this.longitude; };
|
||||||
|
window.google.maps.LatLngBounds.prototype.extend = stubFn;
|
||||||
|
window.google.maps.LatLngBounds.prototype.getNorthEast = function () { return this.ne; };
|
||||||
|
window.google.maps.LatLngBounds.prototype.getSouthWest = function () { return this.sw; };
|
||||||
|
window.google.maps.Map.prototype.fitBounds = stubFn;
|
||||||
|
window.google.maps.Map.prototype.getBounds = stubFn;
|
||||||
|
window.google.maps.Map.prototype.getCenter = stubFn;
|
||||||
|
window.google.maps.Map.prototype.getDiv = stubFn;
|
||||||
|
window.google.maps.Map.prototype.getZoom = stubFn;
|
||||||
|
window.google.maps.Map.prototype.setCenter = stubFn;
|
||||||
|
window.google.maps.Map.prototype.setMapTypeId = stubFn;
|
||||||
|
window.google.maps.Map.prototype.setOptions = stubFn;
|
||||||
|
window.google.maps.Map.prototype.setZoom = stubFn;
|
||||||
|
window.google.maps.Marker.prototype.addListener = stubFn;
|
||||||
|
window.google.maps.Marker.prototype.getIcon = stubFn;
|
||||||
|
window.google.maps.Marker.prototype.getPosition = stubFn;
|
||||||
|
window.google.maps.Marker.prototype.setAnimation = stubFn;
|
||||||
|
window.google.maps.Marker.prototype.setIcon = stubFn;
|
||||||
|
window.google.maps.Marker.prototype.setMap = stubFn;
|
||||||
|
window.google.maps.Polyline.prototype.getPath = function () { return this.path; };
|
||||||
|
window.google.maps.Polyline.prototype.setMap = stubFn;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const clear = () => {
|
||||||
|
// noinspection JSAnnotator,JSUnresolvedVariable
|
||||||
|
delete window.google;
|
||||||
|
};
|
||||||
7
js/test/openlayers.bundle.js
Normal file
7
js/test/openlayers.bundle.js
Normal file
File diff suppressed because one or more lines are too long
@ -7,7 +7,7 @@ const preprocessors = {};
|
|||||||
const reporters = [ 'progress' ];
|
const reporters = [ 'progress' ];
|
||||||
// don't preprocess files on debug run
|
// don't preprocess files on debug run
|
||||||
if (!process.env._INTELLIJ_KARMA_INTERNAL_PARAMETER_debug && !process.argv.includes('--debug')) {
|
if (!process.env._INTELLIJ_KARMA_INTERNAL_PARAMETER_debug && !process.argv.includes('--debug')) {
|
||||||
preprocessors['src/*.js'] = 'karma-coverage-istanbul-instrumenter';
|
preprocessors['src/**/*.js'] = 'karma-coverage-istanbul-instrumenter';
|
||||||
reporters.push('coverage-istanbul');
|
reporters.push('coverage-istanbul');
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -19,7 +19,9 @@ module.exports = function(config) {
|
|||||||
// list of files / patterns to load in the browser
|
// list of files / patterns to load in the browser
|
||||||
files: [
|
files: [
|
||||||
{ pattern: 'test/*.test.js', type: 'module' },
|
{ pattern: 'test/*.test.js', type: 'module' },
|
||||||
{ pattern: 'src/*.js', type: 'module', included: false }
|
{ pattern: 'test/*.stub.js', type: 'module', included: false },
|
||||||
|
{ pattern: 'src/**/*.js', type: 'module', included: false },
|
||||||
|
{ pattern: 'test/openlayers.bundle.js', type: 'js', included: true }
|
||||||
],
|
],
|
||||||
// list of files / patterns to exclude
|
// list of files / patterns to exclude
|
||||||
exclude: [],
|
exclude: [],
|
||||||
|
|||||||
6058
package-lock.json
generated
6058
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
34
package.json
34
package.json
@ -2,11 +2,11 @@
|
|||||||
"name": "ulogger-server",
|
"name": "ulogger-server",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "This is a web application for real-time collection of geolocation data, tracks viewing and management. Together with a dedicated [μlogger mobile client](https://github.com/bfabiszewski/ulogger-android) it may be used as a complete self hosted server–client solution for logging and monitoring users' geolocation.",
|
"description": "This is a web application for real-time collection of geolocation data, tracks viewing and management. Together with a dedicated [μlogger mobile client](https://github.com/bfabiszewski/ulogger-android) it may be used as a complete self hosted server–client solution for logging and monitoring users' geolocation.",
|
||||||
"main": "js/ulogger.js",
|
"main": "js/src/ulogger.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "karma start karma.conf.js",
|
"test": "karma start karma.conf.js",
|
||||||
"start": "parcel index.html",
|
"start": "webpack-dev-server --open --config webpack.dev.js",
|
||||||
"build": "parcel build --public-url . js/ulogger.js"
|
"build": "webpack --config webpack.prod.js"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@ -15,30 +15,34 @@
|
|||||||
"author": "Bartek Fabiszewski",
|
"author": "Bartek Fabiszewski",
|
||||||
"license": "GPL-3.0-or-later",
|
"license": "GPL-3.0-or-later",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.7.0",
|
"@babel/cli": "^7.7.4",
|
||||||
"@babel/core": "^7.7.2",
|
"@babel/core": "^7.7.4",
|
||||||
"@babel/preset-env": "^7.7.1",
|
"@babel/plugin-transform-runtime": "^7.7.4",
|
||||||
|
"@babel/preset-env": "^7.7.4",
|
||||||
|
"babel-eslint": "^10.0.3",
|
||||||
"babel-loader": "^8.0.6",
|
"babel-loader": "^8.0.6",
|
||||||
"babel-minify-webpack-plugin": "^0.3.1",
|
|
||||||
"browserlist": "^1.0.1",
|
"browserlist": "^1.0.1",
|
||||||
"core-js": "^3.4.1",
|
"clean-webpack-plugin": "^3.0.0",
|
||||||
"eslint": "^6.6.0",
|
"core-js": "^3.4.2",
|
||||||
"eslint-plugin-jasmine": "^4.0.0",
|
"eslint": "^6.7.1",
|
||||||
|
"eslint-plugin-import": "^2.18.2",
|
||||||
|
"eslint-plugin-jasmine": "^4.1.0",
|
||||||
"jasmine": "^3.5.0",
|
"jasmine": "^3.5.0",
|
||||||
"karma": "^4.4.1",
|
"karma": "^4.4.1",
|
||||||
"karma-chrome-launcher": "^3.1.0",
|
"karma-chrome-launcher": "^3.1.0",
|
||||||
"karma-coverage-istanbul-instrumenter": "^1.0.1",
|
"karma-coverage-istanbul-instrumenter": "^1.0.1",
|
||||||
"karma-coverage-istanbul-reporter": "^2.1.0",
|
"karma-coverage-istanbul-reporter": "^2.1.1",
|
||||||
"karma-jasmine": "^2.0.1",
|
"karma-jasmine": "^2.0.1",
|
||||||
"parcel-bundler": "^1.12.4",
|
|
||||||
"puppeteer": "^2.0.0",
|
"puppeteer": "^2.0.0",
|
||||||
"regenerator-runtime": "^0.13.3",
|
"regenerator-runtime": "^0.13.3",
|
||||||
"uglifyjs-webpack-plugin": "^2.2.0",
|
|
||||||
"webpack": "^4.41.2",
|
"webpack": "^4.41.2",
|
||||||
"webpack-cli": "^3.3.10"
|
"webpack-cli": "^3.3.10",
|
||||||
|
"webpack-merge": "^4.2.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ol": "^5.3.3"
|
"@babel/runtime": "^7.7.4",
|
||||||
|
"babel-runtime": "^6.26.0",
|
||||||
|
"ol": "^6.1.1"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"defaults"
|
"defaults"
|
||||||
|
|||||||
22
webpack.common.js
Normal file
22
webpack.common.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './js/src/ulogger.js',
|
||||||
|
output: {
|
||||||
|
filename: 'bundle.js',
|
||||||
|
path: path.resolve(__dirname, 'js/dist'),
|
||||||
|
publicPath: 'js/dist/'
|
||||||
|
},
|
||||||
|
plugins: [ new CleanWebpackPlugin() ],
|
||||||
|
optimization: {
|
||||||
|
splitChunks: {
|
||||||
|
cacheGroups: {
|
||||||
|
vendors: {
|
||||||
|
test: /[\\/]node_modules[\\/]|[\\/]ol.js/,
|
||||||
|
name: 'ol'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
7
webpack.dev.js
Normal file
7
webpack.dev.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
const merge = require('webpack-merge');
|
||||||
|
const common = require('./webpack.common.js');
|
||||||
|
|
||||||
|
module.exports = merge(common, {
|
||||||
|
mode: 'development',
|
||||||
|
devtool: 'inline-source-map',
|
||||||
|
});
|
||||||
19
webpack.prod.js
Normal file
19
webpack.prod.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const merge = require('webpack-merge');
|
||||||
|
const common = require('./webpack.common.js');
|
||||||
|
|
||||||
|
module.exports = merge(common, {
|
||||||
|
mode: 'production',
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
presets: [ '@babel/preset-env' ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user