diff --git a/web/client/components/map/openlayers/plugins/GoogleLayer.js b/web/client/components/map/openlayers/plugins/GoogleLayer.js index 87e6133e8b..723bc48342 100644 --- a/web/client/components/map/openlayers/plugins/GoogleLayer.js +++ b/web/client/components/map/openlayers/plugins/GoogleLayer.js @@ -20,138 +20,140 @@ var endEvent = isTouchSupported ? 'touchend' : 'mouseup'; Layers.registerType('google', { create: (options, map, mapId) => { - let google = window.google; - if (!layersMap) { - layersMap = { - 'HYBRID': google.maps.MapTypeId.HYBRID, - 'SATELLITE': google.maps.MapTypeId.SATELLITE, - 'ROADMAP': google.maps.MapTypeId.ROADMAP, - 'TERRAIN': google.maps.MapTypeId.TERRAIN - }; - } - if (!gmaps[mapId]) { - gmaps[mapId] = new google.maps.Map(document.getElementById(mapId + 'gmaps'), { - disableDefaultUI: true, - keyboardShortcuts: false, - draggable: false, - disableDoubleClickZoom: true, - scrollwheel: false, - streetViewControl: false - }); - } - gmaps[mapId].setMapTypeId(layersMap[options.name]); - let view = map.getView(); - let mapContainer = document.getElementById(mapId + 'gmaps'); - let setCenter = function() { - if (mapContainer.style.visibility !== 'hidden') { - const center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326'); - gmaps[mapId].setCenter(new google.maps.LatLng(center[1], center[0])); - } - }; - let setZoom = function() { - if (mapContainer.style.visibility !== 'hidden') { - gmaps[mapId].setZoom(view.getZoom()); - } - }; - - /** - * @param point {array}: [x, y] - * @param alpha {number}: rotation in degrees - */ - let rotatePoint = function(point, alpha) { - const radAlpha = alpha * Math.PI / 180; - const x = point[0]; - const y = point[1]; - - let rx = x * Math.cos(radAlpha) - y * Math.sin(radAlpha); - let ry = x * Math.sin(radAlpha) + y * Math.cos(radAlpha); - - return [rx, ry]; - }; - - /** - * @param rotation {number}: rotation in degrees - * @param size {array}: map size [w, h] - */ - let calculateRotatedSize = function(rotation, size) { - let w = size[0]; - let h = size[1]; - - let vertices = [ - // [ x , y ] - [ w / 2, h / 2], - [-w / 2, h / 2], - [-w / 2, -h / 2], - [ w / 2, -h / 2] - ]; - - let rVertices = vertices.map(function(p) {return rotatePoint(p, rotation); }); - - let Xs = rVertices.map(function(p) {return p[0]; }); - let Ys = rVertices.map(function(p) {return p[1]; }); - - let maxX = Math.max.apply(null, Xs); - let minX = Math.min.apply(null, Xs); - let maxY = Math.max.apply(null, Ys); - let minY = Math.min.apply(null, Ys); - - let H = Math.abs(maxY) + Math.abs(minY); - let W = Math.abs(maxX) + Math.abs(minX); - - return {width: W, height: H}; - }; - - let setRotation = function() { - if (mapContainer.style.visibility !== 'hidden') { - const rotation = view.getRotation() * 180 / Math.PI; - - mapContainer.style.transform = "rotate(" + rotation + "deg)"; - google.maps.event.trigger(gmaps[mapId], "resize"); - } - }; - - view.on('change:center', setCenter); - view.on('change:resolution', setZoom); - view.on('change:rotation', setRotation); - - - setCenter(); - setZoom(); - - let viewport = map.getViewport(); - let oldTrans = document.getElementById(mapId + 'gmaps').style.transform; - - let mousedown = false; - let mousemove = false; - - let resizeGoogleLayerIfRotated = function() { - let degrees = /[\+\-]?\d+\.?\d*/i; - let newTrans = document.getElementById(mapId + 'gmaps').style.transform; - if (newTrans !== oldTrans && newTrans.indexOf('rotate') !== -1) { - let rotation = parseFloat(newTrans.match(degrees)[0]); - let size = calculateRotatedSize(-rotation, map.getSize()); - mapContainer.style.width = size.width + 'px'; - mapContainer.style.height = size.height + 'px'; - mapContainer.style.left = (Math.round((map.getSize()[0] - size.width) / 2.0)) + 'px'; - mapContainer.style.top = (Math.round((map.getSize()[1] - size.height) / 2.0)) + 'px'; - google.maps.event.trigger(gmaps[mapId], "resize"); - setCenter(); + if (document.getElementById(mapId + 'gmaps')) { + let google = window.google; + if (!layersMap) { + layersMap = { + 'HYBRID': google.maps.MapTypeId.HYBRID, + 'SATELLITE': google.maps.MapTypeId.SATELLITE, + 'ROADMAP': google.maps.MapTypeId.ROADMAP, + 'TERRAIN': google.maps.MapTypeId.TERRAIN + }; } - }; - - viewport.addEventListener(startEvent, () => { - mousedown = true; - }); - viewport.addEventListener(endEvent, () => { - if (mousemove && mousedown) { - resizeGoogleLayerIfRotated(); + if (!gmaps[mapId]) { + gmaps[mapId] = new google.maps.Map(document.getElementById(mapId + 'gmaps'), { + disableDefaultUI: true, + keyboardShortcuts: false, + draggable: false, + disableDoubleClickZoom: true, + scrollwheel: false, + streetViewControl: false + }); } - oldTrans = document.getElementById(mapId + 'gmaps').style.transform; - mousedown = false; - }); - viewport.addEventListener(moveEvent, () => { - mousemove = mousedown; - }); + gmaps[mapId].setMapTypeId(layersMap[options.name]); + let view = map.getView(); + let mapContainer = document.getElementById(mapId + 'gmaps'); + let setCenter = function() { + if (mapContainer && mapContainer.style.visibility !== 'hidden' && gmaps[mapId]) { + const center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326'); + gmaps[mapId].setCenter(new google.maps.LatLng(center[1], center[0])); + } + }; + let setZoom = function() { + if (mapContainer && mapContainer.style.visibility !== 'hidden' && gmaps[mapId]) { + gmaps[mapId].setZoom(view.getZoom()); + } + }; + + /** + * @param point {array}: [x, y] + * @param alpha {number}: rotation in degrees + */ + let rotatePoint = function(point, alpha) { + const radAlpha = alpha * Math.PI / 180; + const x = point[0]; + const y = point[1]; + + let rx = x * Math.cos(radAlpha) - y * Math.sin(radAlpha); + let ry = x * Math.sin(radAlpha) + y * Math.cos(radAlpha); + + return [rx, ry]; + }; + + /** + * @param rotation {number}: rotation in degrees + * @param size {array}: map size [w, h] + */ + let calculateRotatedSize = function(rotation, size) { + let w = size[0]; + let h = size[1]; + + let vertices = [ + // [ x , y ] + [ w / 2, h / 2], + [-w / 2, h / 2], + [-w / 2, -h / 2], + [ w / 2, -h / 2] + ]; + + let rVertices = vertices.map(function(p) {return rotatePoint(p, rotation); }); + + let Xs = rVertices.map(function(p) {return p[0]; }); + let Ys = rVertices.map(function(p) {return p[1]; }); + + let maxX = Math.max.apply(null, Xs); + let minX = Math.min.apply(null, Xs); + let maxY = Math.max.apply(null, Ys); + let minY = Math.min.apply(null, Ys); + + let H = Math.abs(maxY) + Math.abs(minY); + let W = Math.abs(maxX) + Math.abs(minX); + + return {width: W, height: H}; + }; + + let setRotation = function() { + if (mapContainer && mapContainer.style.visibility !== 'hidden' && gmaps[mapId]) { + const rotation = view.getRotation() * 180 / Math.PI; + + mapContainer.style.transform = "rotate(" + rotation + "deg)"; + google.maps.event.trigger(gmaps[mapId], "resize"); + } + }; + + view.on('change:center', setCenter); + view.on('change:resolution', setZoom); + view.on('change:rotation', setRotation); + + + setCenter(); + setZoom(); + + let viewport = map.getViewport(); + let oldTrans = document.getElementById(mapId + 'gmaps').style.transform; + + let mousedown = false; + let mousemove = false; + + let resizeGoogleLayerIfRotated = function() { + let degrees = /[\+\-]?\d+\.?\d*/i; + let newTrans = document.getElementById(mapId + 'gmaps').style.transform; + if (newTrans !== oldTrans && newTrans.indexOf('rotate') !== -1 && mapContainer) { + let rotation = parseFloat(newTrans.match(degrees)[0]); + let size = calculateRotatedSize(-rotation, map.getSize()); + mapContainer.style.width = size.width + 'px'; + mapContainer.style.height = size.height + 'px'; + mapContainer.style.left = (Math.round((map.getSize()[0] - size.width) / 2.0)) + 'px'; + mapContainer.style.top = (Math.round((map.getSize()[1] - size.height) / 2.0)) + 'px'; + google.maps.event.trigger(gmaps[mapId], "resize"); + setCenter(); + } + }; + + viewport.addEventListener(startEvent, () => { + mousedown = true; + }); + viewport.addEventListener(endEvent, () => { + if (mousemove && mousedown) { + resizeGoogleLayerIfRotated(); + } + oldTrans = document.getElementById(mapId + 'gmaps').style.transform; + mousedown = false; + }); + viewport.addEventListener(moveEvent, () => { + mousemove = mousedown; + }); + } return null; }, @@ -190,8 +192,10 @@ Layers.registerType('google', { if (!oldOptions.visibility && newOptions.visibility) { let view = map.getView(); const center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326'); - gmaps[mapId].setCenter(new google.maps.LatLng(center[1], center[0])); - gmaps[mapId].setZoom(view.getZoom()); + if (gmaps[mapId]) { + gmaps[mapId].setCenter(new google.maps.LatLng(center[1], center[0])); + gmaps[mapId].setZoom(view.getZoom()); + } } } diff --git a/web/client/reducers/maps.js b/web/client/reducers/maps.js index eb5869f7b9..d025a12c9f 100644 --- a/web/client/reducers/maps.js +++ b/web/client/reducers/maps.js @@ -16,7 +16,7 @@ const assign = require('object-assign'); const _ = require('lodash'); function maps(state = { - mapType: "openlayers", + mapType: "leaflet", enabled: false, errors: [], searchText: ""}, action) {