Skip to content

Commit

Permalink
fix geosolutions-it#1167 for Infinite loading on new layer creation
Browse files Browse the repository at this point in the history
  • Loading branch information
@saidaipparla
saidaipparla committed Nov 3, 2016
1 parent 0a037e8 commit df7fa00
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 133 deletions.
268 changes: 136 additions & 132 deletions web/client/components/map/openlayers/plugins/GoogleLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
Expand Down Expand Up @@ -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());
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion web/client/reducers/maps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const assign = require('object-assign');
const _ = require('lodash');

function maps(state = {
mapType: "openlayers",
mapType: "leaflet",
enabled: false,
errors: [],
searchText: ""}, action) {
Expand Down

0 comments on commit df7fa00

Please sign in to comment.