From 8423178f188189b5b1d42606fa4a7eaafc1c956d Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Fri, 16 Jun 2017 10:54:32 +0200 Subject: [PATCH 01/11] Loading works, but nothing is displayed --- bower.json | 3 +- .../Animation/AnimationManager.js | 194 ++++++++---------- js/app/Visualization/Animation/GlAnimation.js | 23 ++- js/app/Visualization/UI/MouseLatLon.js | 16 +- js/app/Visualization/UI/UIManager.js | 4 +- 5 files changed, 113 insertions(+), 127 deletions(-) diff --git a/bower.json b/bower.json index 2c6ef8ea..3af9a086 100644 --- a/bower.json +++ b/bower.json @@ -38,6 +38,7 @@ "easyXDM": "~2.4.17", "cartodb.js": "https://github.com/SkyTruth/cartodb.js-bower.git#3.15.8-skytruth-4", "dojo-theme-flat": "https://github.com/Esri/dojo-theme-flat.git", - "clipboard.js": "~0.2.0" + "clipboard.js": "~0.2.0", + "bower-ol3": "ol3#^3.4.0" } } diff --git a/js/app/Visualization/Animation/AnimationManager.js b/js/app/Visualization/Animation/AnimationManager.js index f33c1d3d..ab63fdce 100644 --- a/js/app/Visualization/Animation/AnimationManager.js +++ b/js/app/Visualization/Animation/AnimationManager.js @@ -13,20 +13,21 @@ define([ "shims/jQuery/main", "dijit/Dialog", "app/Visualization/Animation/Matrix", - "shims/CanvasLayer/main", + "libs/bower-ol3/build/ol", +// "shims/CanvasLayer/main", "shims/Stats/main", "app/Visualization/Animation/ObjectToTable", "app/Visualization/Animation/Rowidx", "app/Visualization/Animation/Animation", - "app/Visualization/Animation/BboxSelection", +// "app/Visualization/Animation/BboxSelection", "app/Visualization/Animation/PointAnimation", "app/Visualization/Animation/LineAnimation", "app/Visualization/Animation/LineStripAnimation", "app/Visualization/Animation/TileAnimation", "app/Visualization/Animation/DebugAnimation", "app/Visualization/Animation/ClusterAnimation", - "app/Visualization/Animation/MapsEngineAnimation", - "app/Visualization/Animation/CartoDBAnimation", +// "app/Visualization/Animation/MapsEngineAnimation", +// "app/Visualization/Animation/CartoDBAnimation", "app/Visualization/Animation/VesselTrackAnimation", "app/Visualization/Animation/ArrowAnimation", "app/Visualization/Animation/SatelliteAnimation" @@ -44,7 +45,8 @@ define([ $, Dialog, Matrix, - CanvasLayer, +// CanvasLayer, + ol, Stats, ObjectToTable, Rowidx, @@ -55,18 +57,6 @@ define([ name: "AnimationManager", mapOptions: { - mapTypeId: google.maps.MapTypeId.ROADMAP, - zoomControl: false, - scaleControl: true, - mapTypeControl: false, - streetViewControl: false, - overviewMapControl: false, - styles: [ - { - featureType: 'poi', - stylers: [{visibility: 'off'}] - } - ] }, initialize: function (visualization) { @@ -99,7 +89,6 @@ define([ async.series([ self.initMap.bind(self), - self.initOverlay.bind(self), self.initCanvas.bind(self), self.initStats.bind(self), self.initMouse.bind(self), @@ -134,25 +123,33 @@ define([ initMap: function (cb) { var self = this; - self.map = new google.maps.Map( - self.node[0], - $.extend( - { - zoom: 1, - center: {lat: 0, lng: 0} - }, - self.mapOptions - ) - ); + self.layer = new ol.layer.Tile({ + source: new ol.source.OSM() + }); + self.map = new ol.Map({ + layers: [ + self.layer + ], + target: self.node[0], + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), + view: new ol.View({ + center: [0, 0], + zoom: 2 + }) + }); window.addEventListener('resize', self.windowSizeChanged.bind(self), false); - google.maps.event.addListener(self.map, 'tilesloaded', self.tilesLoaded.bind(self)); - google.maps.event.addListener(self.map, 'center_changed', self.centerChanged.bind(self)); - google.maps.event.addListener(self.map, 'zoom_changed', self.zoomChanged.bind(self)); - google.maps.event.addListener(self.map, 'bounds_changed', self.boundsChanged.bind(self)); - google.maps.event.addListener(self.map, 'dragstart', function () { self.indrag = true; }); - google.maps.event.addListener(self.map, 'dragend', function () { self.indrag = false; self.boundsChanged(); }); - google.maps.event.addListener(self.map, "bounds_changed", self.checkBounds.bind(self)); + self.layer.getSource().on('tileloadstart', self.tilesLoaded.bind(self)); + self.map.getView().on('change:zoom', self.zoomChanged.bind(self)); + self.map.getView().on('change:center', self.centerChanged.bind(self)); + self.map.getView().on('resolution', self.boundsChanged.bind(self)); + self.map.on('movestart', function () { self.indrag = true; }); + self.map.on('moveend', function () { self.indrag = false; self.boundsChanged(); }); + self.map.getView().on('resolution', self.checkBounds.bind(self)); cb(); }, @@ -162,20 +159,22 @@ define([ checkBounds: function() { var self = this; +// FIXME: NOT FIXED +return; var bounds = self.map.getBounds(); var top = bounds.getNorthEast().lat(); var bottom = bounds.getSouthWest().lat(); - var center = self.map.getCenter(); + var center = self.map.getView().getCenter(); if (bottom < self.minLat) { if (top > self.maxLat) { self.map.setZoom(self.map.getZoom() + 1); } else { - self.map.setCenter(new google.maps.LatLng(center.lat() + (self.minLat - bottom), center.lng())); + self.map.setCenter([center.lng(), center.lat() + (self.minLat - bottom)]); } } else if (top > self.maxLat) { - self.map.setCenter(new google.maps.LatLng(center.lat() + (self.maxLat - top), center.lng())); + self.map.setCenter([center.lng(), center.lat() + (self.maxLat - top)]); } }, @@ -189,17 +188,6 @@ define([ */ }, - initOverlay: function (cb) { - var self = this; - - var overlay = self.visualization.state.getValue("overlay") - if (overlay) { - var kmlLayer = new google.maps.KmlLayer({url: overlay, preserveViewport: true}); - kmlLayer.setMap(self.map); - } - cb(); - }, - handleNoGl: function () { var self = this; var failover = self.visualization.state.getValue('nowebgl'); @@ -242,16 +230,12 @@ define([ initCanvas: function (cb) { var self = this; - var canvasLayerOptions = { - map: self.map, - resizeHandler: function () { if (self.initialized) self.canvasResize() }, - updateHandler: function () { if (self.initialized) self.update(); }, - animate: true - }; - self.canvasLayer = new CanvasLayer(canvasLayerOptions); + self.canvas = document.createElement('canvas'); + $(self.canvas).css({position: "fixed", top: 0, left: 0, width: "100%", height: "100%"}); + self.node.append(self.canvas); try { - self.gl = self.getGlContext(self.canvasLayer.canvas); + self.gl = self.getGlContext(self.canvas); self.rowidxGl = [self.createRowidxGlContext(), self.createRowidxGlContext()]; } catch (e) { @@ -262,16 +246,9 @@ define([ } } - var onAdd = function () { - if (!self.canvasLayer.isAdded_) { - setTimeout(onAdd, 1); - } else { - self.canvasResize(); - cb(); - } - } - onAdd(); - }, + self.canvasResize(); + cb(); + }, search: function(query, offset, limit, cb) { var self = this; @@ -350,8 +327,8 @@ define([ self.mouseoverPixelCache[cell] = self.rowidxGl.map(function (gl) { - gl.canvas.width = self.canvasLayer.canvas.width; - gl.canvas.height = self.canvasLayer.canvas.height; + gl.canvas.width = $(self.canvas).innerWidth(); + gl.canvas.height = $(self.canvas).innerHeight(); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); gl.enable(gl.SCISSOR_TEST); gl.scissor(gridX_global, gridY_global, self.mouseoverCacheCellSize.width, self.mouseoverCacheCellSize.height); @@ -380,10 +357,10 @@ define([ getRowidxAtPos: function (x, y) { var self = this; - var height = self.canvasLayer.canvas.height; + var height = $(self.canvas).innerHeight(); /* Canvas coordinates are upside down for some reason... */ - y = self.canvasLayer.canvas.height - y; + y = height - y; return Rowidx.pixelToId( Rowidx.appendByteArrays.apply( @@ -717,19 +694,20 @@ define([ 'Show raw object information (no server query) in popup' ); +/* self.infoPopup = new google.maps.InfoWindow({}); google.maps.event.addListener(self.infoPopup, "closeclick", self.closeInfoPopup.bind(self)); - +*/ self.node.mousemove(function (e) { if (!self.indrag) self.handleMouse(e, 'hover'); }); - google.maps.event.addListener(self.map, "click", function(e) { + self.map.on('click', function(e) { self.handleMouse(e, 'selected'); if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); }); - google.maps.event.addListener(self.map, "rightclick", function(e) { + self.map.getView().on('contextmenu', function(e) { e.pageX = e.pixel.x; e.pageY = e.pixel.y; @@ -759,10 +737,12 @@ define([ var self = this; async.series([ +/* function (cb) { self.bboxSelection = new BboxSelection(self, {}); self.addAnimationInstance(self.bboxSelection, cb, "overlays"); } +*/ ], cb); }, @@ -793,6 +773,7 @@ define([ }); }, +/* closeInfoPopup: function () { var self = this; self.infoPopup.close(); @@ -800,6 +781,7 @@ define([ animation.select(undefined, "info", true, {}); }); }, +*/ handleInfo: function (animation, type, err, data, selectionData) { var self = this; @@ -825,7 +807,7 @@ define([ if (type == 'info') { if (err) data = err; if (!data) return; - +/* var content = ObjectToTable(data); if (typeof(content) != "string") content = content.html(); @@ -835,6 +817,7 @@ define([ lng: selectionData.longitude} }); self.infoPopup.open(self.map); +*/ } else { var category; var event = { @@ -956,26 +939,28 @@ define([ windowSizeChanged: function () { var self = this; - google.maps.event.trigger(self.map, 'resize'); + self.canvasResize(); + self.map.updateSize(); }, panZoom: function () { var self = this; if (!self.inPanZoom) { - self.map.setCenter({ - lat: self.visualization.state.getValue("lat"), - lng: self.visualization.state.getValue("lon") - }); - self.map.setZoom(self.visualization.state.getValue("zoom")); + self.map.getView().setCenter( + ol.proj.transform([self.visualization.state.getValue("lon"), + self.visualization.state.getValue("lat")], + 'EPSG:4326', self.map.getView().getProjection())); + self.map.getView().setZoom(self.visualization.state.getValue("zoom")); } }, centerChanged: function() { var self = this; self.inPanZoom = true; - self.visualization.state.setValue("lat", self.map.getCenter().lat()); - self.visualization.state.setValue("lon", self.map.getCenter().lng()); + var center = ol.proj.transform(self.map.getView().getCenter(), self.map.getView().getProjection(), 'EPSG:4326'); + self.visualization.state.setValue("lat", center[1]); + self.visualization.state.setValue("lon", center[0]); self.inPanZoom = false; self.triggerUpdate(); }, @@ -997,13 +982,15 @@ define([ dataNeedsChanged: function() { var self = this; - var bounds = self.map.getBounds(); - var ne = bounds.getNorthEast(); - var sw = bounds.getSouthWest(); - var latmin = sw.lat(); - var lonmin = sw.lng(); - var latmax = ne.lat(); - var lonmax = ne.lng(); + var extent = ol.proj.transformExtent( + self.map.getView().calculateExtent( + self.map.getSize()), + self.map.getView().getProjection(), + 'EPSG:4326'); + var latmin = extent.bottom; + var lonmin = extent.left; + var latmax = extent.top; + var lonmax = extent.right; var bounds = new Bounds([lonmin, latmin, lonmax, latmax]); var end = self.visualization.state.getValue("time"); @@ -1020,8 +1007,8 @@ define([ if (!self.gl) return; - var width = self.canvasLayer.canvas.width; - var height = self.canvasLayer.canvas.height; + var width = $(self.canvas).innerWidth(); + var height = $(self.canvas).innerHeight(); self.gl.viewport(0, 0, width, height); @@ -1074,16 +1061,14 @@ define([ * see https://developers.google.com/maps/documentation/javascript/maptypes#MapCoordinate */ - var mapProjection = self.map.getProjection(); - // copy pixel->webgl matrix self.googleMercator2webglMatrix.set(self.pixelsToWebGLMatrix); - var scale = self.canvasLayer.getMapScale(); + var scale = self.map.getView().getZoom(); Matrix.scaleMatrix(self.googleMercator2webglMatrix, scale, scale); - var translation = self.canvasLayer.getMapTranslation(); - Matrix.translateMatrix(self.googleMercator2webglMatrix, translation.x, translation.y); + var translation = self.map.getView().getCenter(); + Matrix.translateMatrix(self.googleMercator2webglMatrix, translation[0], translation[1]); }, isPaused: function () { @@ -1142,17 +1127,6 @@ define([ } }, - setMapOptions: function (options) { - var self = this; - - options = $.extend({}, options); - delete options.zoom; - delete options.center; - - self.mapOptions = options; - self.map.setOptions(options); - }, - load: function (animations, cb) { var self = this; self.animations.map(function (animation) { @@ -1161,10 +1135,6 @@ define([ }); self.animations = []; - if (animations.options) { - self.setMapOptions(animations.options); - } - async.mapSeries( animations.animations, function (item, cb) { diff --git a/js/app/Visualization/Animation/GlAnimation.js b/js/app/Visualization/Animation/GlAnimation.js index de9c1c07..487a4648 100644 --- a/js/app/Visualization/Animation/GlAnimation.js +++ b/js/app/Visualization/Animation/GlAnimation.js @@ -7,7 +7,8 @@ define([ "app/Visualization/Animation/Shader", "app/Data/GeoProjection", "app/Data/DataView", - "shims/jQuery/main" + "shims/jQuery/main", + "libs/bower-ol3/build/ol" ], function( Class, Events, @@ -17,7 +18,8 @@ define([ Shader, GeoProjection, DataView, - $ + $, + ol ) { return Class(Animation, { name: "GlAnimation", @@ -176,17 +178,22 @@ define([ var timeFocus = self.manager.visualization.state.getValue("timeFocus"); program.gl.uniform1f(program.uniforms.timefocus, timeFocus); - program.gl.uniform1f(program.uniforms.zoom, self.manager.map.zoom); - program.gl.uniform1f(program.uniforms.width, self.manager.canvasLayer.canvas.width); - program.gl.uniform1f(program.uniforms.height, self.manager.canvasLayer.canvas.height); + program.gl.uniform1f(program.uniforms.zoom, self.manager.map.getView().getZoom()); + program.gl.uniform1f(program.uniforms.width, $(self.manager.canvas).innerWidth()); + program.gl.uniform1f(program.uniforms.height, $(self.manager.canvas).innerHeight()); + + var center = ol.proj.transform( + self.manager.map.getView().getCenter(), + self.manager.map.getView().getProjection(), + 'EPSG:4326'); // pointSize range [5,20], 21 zoom levels var pointSize = Math.max( - Math.floor( ((20-5) * (self.manager.map.zoom - 0) / (21 - 0)) + 5 ), + Math.floor( ((20-5) * (self.manager.map.getView().getZoom() - 0) / (21 - 0)) + 5 ), ((self.manager.visualization.state.getValue("resolution") || 1000) / GeoProjection.metersPerGoogleMercatorAtLatitude( - self.manager.map.getCenter().lat(), - self.manager.map.zoom))); + center[1], + self.manager.map.getView().getZoom()))); program.gl.uniform1f(program.uniforms.pointSize, pointSize*1.0); } diff --git a/js/app/Visualization/UI/MouseLatLon.js b/js/app/Visualization/UI/MouseLatLon.js index 28faa1e0..57b4fb6b 100644 --- a/js/app/Visualization/UI/MouseLatLon.js +++ b/js/app/Visualization/UI/MouseLatLon.js @@ -1,11 +1,13 @@ define([ "dojo/_base/declare", "./TemplatedContainer", - "shims/jQuery/main" + "shims/jQuery/main", + "libs/bower-ol3/build/ol" ], function( declare, TemplatedContainer, - $ + $, + ol ) { return declare("MouseLatLon", [TemplatedContainer], { baseClass: 'MouseLatLon', @@ -22,12 +24,18 @@ define([ startup: function () { var self = this; self.placeAt(self.visualization.node[0]); - google.maps.event.addListener(self.visualization.animations.map, 'mousemove', self.mouseMove.bind(self)); + + $(self.visualization.animations.node).mousemove(self.mouseMove.bind(self)); }, mouseMove: function (e) { var self = this; - var s = e.latLng.lat().toFixed(4) + ", " + e.latLng.lng().toFixed(4); + + var coords = ol.proj.transform([e.pageX, e.pageY], + self.visualization.animations.map.getView().getProjection(), + 'EPSG:4326'); + + var s = coords[1].toFixed(4) + ", " + coords[0].toFixed(4); $(self.displayNode).text(s); } }); diff --git a/js/app/Visualization/UI/UIManager.js b/js/app/Visualization/UI/UIManager.js index 2b1eca28..875394ad 100644 --- a/js/app/Visualization/UI/UIManager.js +++ b/js/app/Visualization/UI/UIManager.js @@ -195,8 +195,8 @@ define([ setTimeout(setActiveHandler, 100); }; - self.loadingNode = $('
'); - self.visualization.animations.map.controls[google.maps.ControlPosition.LEFT_TOP].push(self.loadingNode[0]); + self.loadingNode = $('
'); + $(self.visualization.animations.node).append(self.loadingNode); self.loadingNode.hide(); LoadingInfo.main.events.on({ From 63e05837a3947ec8c0ae7641016fee0579c8c9d1 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Fri, 16 Jun 2017 15:11:54 +0200 Subject: [PATCH 02/11] Bugfixes --- js/app/Visualization/Animation/AnimationManager.js | 11 +++++------ js/app/Visualization/UI/MouseLatLon.js | 7 ++++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/js/app/Visualization/Animation/AnimationManager.js b/js/app/Visualization/Animation/AnimationManager.js index ab63fdce..bf6ae77c 100644 --- a/js/app/Visualization/Animation/AnimationManager.js +++ b/js/app/Visualization/Animation/AnimationManager.js @@ -89,8 +89,8 @@ define([ async.series([ self.initMap.bind(self), - self.initCanvas.bind(self), self.initStats.bind(self), + self.initCanvas.bind(self), self.initMouse.bind(self), self.initUpdates.bind(self), self.initOverlays.bind(self), @@ -234,6 +234,8 @@ return; $(self.canvas).css({position: "fixed", top: 0, left: 0, width: "100%", height: "100%"}); self.node.append(self.canvas); + window.requestAnimationFrame(self.update.bind(self)); + try { self.gl = self.getGlContext(self.canvas); @@ -987,11 +989,7 @@ return; self.map.getSize()), self.map.getView().getProjection(), 'EPSG:4326'); - var latmin = extent.bottom; - var lonmin = extent.left; - var latmax = extent.top; - var lonmax = extent.right; - var bounds = new Bounds([lonmin, latmin, lonmax, latmax]); + var bounds = new Bounds(extent); var end = self.visualization.state.getValue("time"); if (end == undefined) return; @@ -1069,6 +1067,7 @@ return; var translation = self.map.getView().getCenter(); Matrix.translateMatrix(self.googleMercator2webglMatrix, translation[0], translation[1]); +console.log("\n\n" + JSON.stringify({scale:scale, translation:translation, matrix:self.googleMercator2webglMatrix}) + "\n\n"); }, isPaused: function () { diff --git a/js/app/Visualization/UI/MouseLatLon.js b/js/app/Visualization/UI/MouseLatLon.js index 57b4fb6b..50d46e80 100644 --- a/js/app/Visualization/UI/MouseLatLon.js +++ b/js/app/Visualization/UI/MouseLatLon.js @@ -31,9 +31,10 @@ define([ mouseMove: function (e) { var self = this; - var coords = ol.proj.transform([e.pageX, e.pageY], - self.visualization.animations.map.getView().getProjection(), - 'EPSG:4326'); + var coords = ol.proj.transform( + self.visualization.animations.map.getCoordinateFromPixel([e.pageX, e.pageY]), + self.visualization.animations.map.getView().getProjection(), + "EPSG:4326"); var s = coords[1].toFixed(4) + ", " + coords[0].toFixed(4); $(self.displayNode).text(s); From 20821ec1e5436ebfcbf2736c5091f4a31c4450c6 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Mon, 19 Jun 2017 13:01:16 +0200 Subject: [PATCH 03/11] css bugfix --- js/app/Visualization/Animation/AnimationManager.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/app/Visualization/Animation/AnimationManager.js b/js/app/Visualization/Animation/AnimationManager.js index bf6ae77c..6b08b7ad 100644 --- a/js/app/Visualization/Animation/AnimationManager.js +++ b/js/app/Visualization/Animation/AnimationManager.js @@ -231,7 +231,7 @@ return; var self = this; self.canvas = document.createElement('canvas'); - $(self.canvas).css({position: "fixed", top: 0, left: 0, width: "100%", height: "100%"}); + $(self.canvas).css({"pointer-events": "none", position: "fixed", top: 0, left: 0, width: "100%", height: "100%"}); self.node.append(self.canvas); window.requestAnimationFrame(self.update.bind(self)); @@ -1063,9 +1063,11 @@ return; self.googleMercator2webglMatrix.set(self.pixelsToWebGLMatrix); var scale = self.map.getView().getZoom(); +scale = 16; Matrix.scaleMatrix(self.googleMercator2webglMatrix, scale, scale); var translation = self.map.getView().getCenter(); +translation = [-88, -105.81249999999999]; Matrix.translateMatrix(self.googleMercator2webglMatrix, translation[0], translation[1]); console.log("\n\n" + JSON.stringify({scale:scale, translation:translation, matrix:self.googleMercator2webglMatrix}) + "\n\n"); }, From bb8a44332962644a7ee99d3b9162b7425771de56 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Mon, 19 Jun 2017 14:11:27 +0200 Subject: [PATCH 04/11] Bugfix for redraw and clipping --- js/app/Visualization/Animation/AnimationManager.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/app/Visualization/Animation/AnimationManager.js b/js/app/Visualization/Animation/AnimationManager.js index 6b08b7ad..daaabedd 100644 --- a/js/app/Visualization/Animation/AnimationManager.js +++ b/js/app/Visualization/Animation/AnimationManager.js @@ -1099,6 +1099,11 @@ console.log("\n\n" + JSON.stringify({scale:scale, translation:translation, matri self.updateTime(self.visualization.data.header, paused); self.updateProjection(); + self.gl.canvas.width = $(self.canvas).innerWidth(); + self.gl.canvas.height = $(self.canvas).innerHeight(); + self.gl.viewport(0, 0, self.gl.canvas.width, self.gl.canvas.height); + self.gl.enable(self.gl.SCISSOR_TEST); + self.gl.scissor(0, 0, self.gl.canvas.width, self.gl.canvas.height); self.gl.clear(self.gl.COLOR_BUFFER_BIT); Logging.main.log("Visualization.Animation.AnimationManager.update", { @@ -1126,6 +1131,7 @@ console.log("\n\n" + JSON.stringify({scale:scale, translation:translation, matri if (!e || e.mouseoverChange !== false) { self.mouseoverUpdateNeeded = true; } + window.requestAnimationFrame(self.update.bind(self)); }, load: function (animations, cb) { From 8c78738fb450a821b977131c399cefe655ec7c03 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Mon, 19 Jun 2017 17:32:16 +0200 Subject: [PATCH 05/11] Bugfix for map translation --- .../Animation/AnimationManager.js | 40 ++++++++++++++----- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/js/app/Visualization/Animation/AnimationManager.js b/js/app/Visualization/Animation/AnimationManager.js index daaabedd..87d0be18 100644 --- a/js/app/Visualization/Animation/AnimationManager.js +++ b/js/app/Visualization/Animation/AnimationManager.js @@ -14,7 +14,6 @@ define([ "dijit/Dialog", "app/Visualization/Animation/Matrix", "libs/bower-ol3/build/ol", -// "shims/CanvasLayer/main", "shims/Stats/main", "app/Visualization/Animation/ObjectToTable", "app/Visualization/Animation/Rowidx", @@ -26,7 +25,6 @@ define([ "app/Visualization/Animation/TileAnimation", "app/Visualization/Animation/DebugAnimation", "app/Visualization/Animation/ClusterAnimation", -// "app/Visualization/Animation/MapsEngineAnimation", // "app/Visualization/Animation/CartoDBAnimation", "app/Visualization/Animation/VesselTrackAnimation", "app/Visualization/Animation/ArrowAnimation", @@ -45,7 +43,6 @@ define([ $, Dialog, Matrix, -// CanvasLayer, ol, Stats, ObjectToTable, @@ -1062,14 +1059,39 @@ return; // copy pixel->webgl matrix self.googleMercator2webglMatrix.set(self.pixelsToWebGLMatrix); - var scale = self.map.getView().getZoom(); -scale = 16; + var scale = Math.pow(2, self.map.getView().getZoom()); + //scale = 16; Matrix.scaleMatrix(self.googleMercator2webglMatrix, scale, scale); - var translation = self.map.getView().getCenter(); -translation = [-88, -105.81249999999999]; - Matrix.translateMatrix(self.googleMercator2webglMatrix, translation[0], translation[1]); -console.log("\n\n" + JSON.stringify({scale:scale, translation:translation, matrix:self.googleMercator2webglMatrix}) + "\n\n"); + var translation = self.getMapTranslation(); + //translation = {x:-88, y:-105.81249999999999}; + Matrix.translateMatrix(self.googleMercator2webglMatrix, translation.x, translation.y); + }, + + getMapTranslation: function () { + var self = this; + // Extents are minX, minY, maxX, maxY + + // Where is northwest corner of earth compared to northwest corner of canvas? If there's more than one + // projection displaying (i.e. the international date line is visible one or more times), select + // projection which covers the center pixel of the container + var scale = Math.pow(2, self.map.getView().getZoom()); + var world = self.map.getView().getProjection().getExtent(); + var worldWidth = world[2] - world[0]; + var worldHeight = world[3] - world[1]; + var projectionWidth = worldWidth / scale; + + var extent = self.map.getView().calculateExtent(self.map.getSize()); + + var translation = {x:(extent[0] - world[0]) * 256 / worldWidth, y:(-extent[3] - world[1]) * 256 / worldHeight}; // Top left corner + translation.x = -translation.x; + translation.y = -translation.y; + + // Calculate how many projectionWidths we can move to the right before the origin crosses the center pixel of the container + var advance = Math.floor(((0.5 * self.map.getSize()[0] / scale) - translation.x) / projectionWidth); + + translation.x += advance * projectionWidth; + return translation; }, isPaused: function () { From 7807cd4e36ea76f81f927ffef0991e71b206b1f1 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Mon, 19 Jun 2017 17:32:25 +0200 Subject: [PATCH 06/11] Bugfix for zoom buttons --- js/app/Visualization/UI/ZoomButtons.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/app/Visualization/UI/ZoomButtons.js b/js/app/Visualization/UI/ZoomButtons.js index ce3766c1..c8a9afaf 100644 --- a/js/app/Visualization/UI/ZoomButtons.js +++ b/js/app/Visualization/UI/ZoomButtons.js @@ -26,11 +26,13 @@ define([ zoomIn: function () { var self = this; - self.visualization.animations.map.setZoom(self.visualization.animations.map.zoom + 1); + var view = self.visualization.animations.map.getView(); + view.setZoom(view.getZoom() + 1); }, zoomOut: function () { var self = this; - self.visualization.animations.map.setZoom(self.visualization.animations.map.zoom - 1); + var view = self.visualization.animations.map.getView(); + view.setZoom(view.getZoom() - 1); } }); }); From 74069418814934fda573d44532b1411d0baec888 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Mon, 19 Jun 2017 18:01:05 +0200 Subject: [PATCH 07/11] OpenSeamap overlay --- js/app/CanvasLayer.js | 515 ------------------ .../Animation/AnimationManager.js | 7 +- 2 files changed, 6 insertions(+), 516 deletions(-) delete mode 100755 js/app/CanvasLayer.js diff --git a/js/app/CanvasLayer.js b/js/app/CanvasLayer.js deleted file mode 100755 index eeac6e3c..00000000 --- a/js/app/CanvasLayer.js +++ /dev/null @@ -1,515 +0,0 @@ -/** - * Copyright 2012 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * @fileoverview Extends OverlayView to provide a canvas "Layer". - * @author Brendan Kenny - */ - -/** - * A map layer that provides a canvas over the slippy map and a callback - * system for efficient animation. Requires canvas and CSS 2D transform - * support. - * @constructor - * @extends google.maps.OverlayView - * @param {CanvasLayerOptions=} opt_options Options to set in this CanvasLayer. - */ -function CanvasLayer(opt_options) { - /** - * If true, canvas is in a map pane and the OverlayView is fully functional. - * See google.maps.OverlayView.onAdd for more information. - * @type {boolean} - * @private - */ - this.isAdded_ = false; - - /** - * If true, each update will immediately schedule the next. - * @type {boolean} - * @private - */ - this.isAnimated_ = false; - - /** - * The name of the MapPane in which this layer will be displayed. - * @type {string} - * @private - */ - this.paneName_ = CanvasLayer.DEFAULT_PANE_NAME_; - - /** - * A user-supplied function called whenever an update is required. Null or - * undefined if a callback is not provided. - * @type {?function=} - * @private - */ - this.updateHandler_ = null; - - /** - * A user-supplied function called whenever an update is required and the - * map has been resized since the last update. Null or undefined if a - * callback is not provided. - * @type {?function} - * @private - */ - this.resizeHandler_ = null; - - /** - * The LatLng coordinate of the top left of the current view of the map. Will - * be null when this.isAdded_ is false. - * @type {google.maps.LatLng} - * @private - */ - this.topLeft_ = null; - - /** - * The map-pan event listener. Will be null when this.isAdded_ is false. Will - * be null when this.isAdded_ is false. - * @type {?function} - * @private - */ - this.centerListener_ = null; - - /** - * The map-resize event listener. Will be null when this.isAdded_ is false. - * @type {?function} - * @private - */ - this.resizeListener_ = null; - - /** - * If true, the map size has changed and this.resizeHandler_ must be called - * on the next update. - * @type {boolean} - * @private - */ - this.needsResize_ = true; - - /** - * A browser-defined id for the currently requested callback. Null when no - * callback is queued. - * @type {?number} - * @private - */ - this.requestAnimationFrameId_ = null; - - var canvas = document.createElement('canvas'); - canvas.style.position = 'absolute'; - canvas.style.top = 0; - canvas.style.left = 0; - canvas.style.pointerEvents = 'none'; - - /** - * The canvas element. - * @type {!HTMLCanvasElement} - */ - this.canvas = canvas; - - /** - * Simple bind for functions with no args for bind-less browsers (Safari). - * @param {Object} thisArg The this value used for the target function. - * @param {function} func The function to be bound. - */ - function simpleBindShim(thisArg, func) { - return function() { func.apply(thisArg); }; - } - - /** - * A reference to this.repositionCanvas_ with this bound as its this value. - * @type {function} - * @private - */ - this.repositionFunction_ = simpleBindShim(this, this.repositionCanvas_); - - /** - * A reference to this.resize_ with this bound as its this value. - * @type {function} - * @private - */ - this.resizeFunction_ = simpleBindShim(this, this.resize_); - - /** - * A reference to this.update_ with this bound as its this value. - * @type {function} - * @private - */ - this.requestUpdateFunction_ = simpleBindShim(this, this.update_); - - // set provided options, if any - if (opt_options) { - this.setOptions(opt_options); - } -} - -CanvasLayer.prototype = new google.maps.OverlayView(); - -/** - * The default MapPane to contain the canvas. - * @type {string} - * @const - * @private - */ -CanvasLayer.DEFAULT_PANE_NAME_ = 'overlayLayer'; - -/** - * Transform CSS property name, with vendor prefix if required. If browser - * does not support transforms, property will be ignored. - * @type {string} - * @const - * @private - */ -CanvasLayer.CSS_TRANSFORM_ = (function() { - var div = document.createElement('div'); - var transformProps = [ - 'transform', - 'WebkitTransform', - 'MozTransform', - 'OTransform', - 'msTransform' - ]; - for (var i = 0; i < transformProps.length; i++) { - var prop = transformProps[i]; - if (div.style[prop] !== undefined) { - return prop; - } - } - - // return unprefixed version by default - return transformProps[0]; -})(); - -/** - * The requestAnimationFrame function, with vendor-prefixed or setTimeout-based - * fallbacks. MUST be called with window as thisArg. - * @type {function} - * @param {function} callback The function to add to the frame request queue. - * @return {number} The browser-defined id for the requested callback. - * @private - */ -CanvasLayer.prototype.requestAnimFrame_ = - window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || - function(callback) { - return window.setTimeout(callback, 1000 / 60); - }; - -/** - * The cancelAnimationFrame function, with vendor-prefixed fallback. Does not - * fall back to clearTimeout as some platforms implement requestAnimationFrame - * but not cancelAnimationFrame, and the cost is an extra frame on onRemove. - * MUST be called with window as thisArg. - * @type {function} - * @param {number=} requestId The id of the frame request to cancel. - * @private - */ -CanvasLayer.prototype.cancelAnimFrame_ = - window.cancelAnimationFrame || - window.webkitCancelAnimationFrame || - window.mozCancelAnimationFrame || - window.oCancelAnimationFrame || - window.msCancelAnimationFrame || - function(requestId) {}; - -/** - * Sets any options provided. See CanvasLayerOptions for more information. - * @param {CanvasLayerOptions} options The options to set. - */ -CanvasLayer.prototype.setOptions = function(options) { - if (options.animate !== undefined) { - this.setAnimate(options.animate); - } - - if (options.paneName !== undefined) { - this.setPane(options.paneName); - } - - if (options.updateHandler !== undefined) { - this.setUpdateHandler(options.updateHandler); - } - - if (options.resizeHandler !== undefined) { - this.setResizeHandler(options.resizeHandler); - } - - if (options.map !== undefined) { - this.setMap(options.map); - } -}; - -/** - * Set the animated state of the layer. If true, updateHandler will be called - * repeatedly, once per frame. If false, updateHandler will only be called when - * a map property changes that could require the canvas content to be redrawn. - * @param {boolean} animate Whether the canvas is animated. - */ -CanvasLayer.prototype.setAnimate = function(animate) { - this.isAnimated_ = !!animate; - - if (this.isAnimated_) { - this.scheduleUpdate(); - } -}; - -/** - * @return {boolean} Whether the canvas is animated. - */ -CanvasLayer.prototype.isAnimated = function() { - return this.isAnimated_; -}; - -/** - * Set the MapPane in which this layer will be displayed, by name. See - * {@code google.maps.MapPanes} for the panes available. - * @param {string} paneName The name of the desired MapPane. - */ -CanvasLayer.prototype.setPaneName = function(paneName) { - this.paneName_ = paneName; - - this.setPane_(); -}; - -/** - * @return {string} The name of the current container pane. - */ -CanvasLayer.prototype.getPaneName = function() { - return this.paneName_; -}; - -/** - * Adds the canvas to the specified container pane. Since this is guaranteed to - * execute only after onAdd is called, this is when paneName's existence is - * checked (and an error is thrown if it doesn't exist). - * @private - */ -CanvasLayer.prototype.setPane_ = function() { - if (!this.isAdded_) { - return; - } - - // onAdd has been called, so panes can be used - var panes = this.getPanes(); - if (!panes[this.paneName_]) { - throw new Error('"' + this.paneName_ + '" is not a valid MapPane name.'); - } - - panes[this.paneName_].appendChild(this.canvas); -}; - -/** - * Set a function that will be called whenever the parent map and the overlay's - * canvas have been resized. If opt_resizeHandler is null or unspecified, any - * existing callback is removed. - * @param {?function=} opt_resizeHandler The resize callback function. - */ -CanvasLayer.prototype.setResizeHandler = function(opt_resizeHandler) { - this.resizeHandler_ = opt_resizeHandler; -}; - -/** - * Set a function that will be called when a repaint of the canvas is required. - * If opt_updateHandler is null or unspecified, any existing callback is - * removed. - * @param {?function=} opt_updateHandler The update callback function. - */ -CanvasLayer.prototype.setUpdateHandler = function(opt_updateHandler) { - this.updateHandler_ = opt_updateHandler; -}; - -/** - * @inheritDoc - */ -CanvasLayer.prototype.onAdd = function() { - if (this.isAdded_) { - return; - } - - this.isAdded_ = true; - this.setPane_(); - - this.resizeListener_ = google.maps.event.addListener(this.getMap(), - 'resize', this.resizeFunction_); - this.centerListener_ = google.maps.event.addListener(this.getMap(), - 'center_changed', this.repositionFunction_); - - this.resize_(); - this.repositionCanvas_(); -}; - -/** - * @inheritDoc - */ -CanvasLayer.prototype.onRemove = function() { - if (!this.isAdded_) { - return; - } - - this.isAdded_ = false; - this.topLeft_ = null; - - // remove canvas and listeners for pan and resize from map - this.canvas.parentElement.removeChild(this.canvas); - if (this.centerListener_) { - google.maps.event.removeListener(this.centerListener_); - this.centerListener_ = null; - } - if (this.resizeListener_) { - google.maps.event.removeListener(this.resizeListener_); - this.resizeListener_ = null; - } - - // cease canvas update callbacks - if (this.requestAnimationFrameId_) { - this.cancelAnimFrame_.call(window, this.requestAnimationFrameId_); - this.requestAnimationFrameId_ = null; - } -}; - -/** - * The internal callback for resize events that resizes the canvas to keep the - * map properly covered. - * @private - */ -CanvasLayer.prototype.resize_ = function() { - // TODO(bckenny): it's common to use a smaller canvas but use CSS to scale - // what is drawn by the browser to save on fill rate. Add an option to do - // this. - - if (!this.isAdded_) { - return; - } - - var map = this.getMap(); - var width = map.getDiv().offsetWidth; - var height = map.getDiv().offsetHeight; - var oldWidth = this.canvas.width; - var oldHeight = this.canvas.height; - - // resizing may allocate a new back buffer, so do so conservatively - if (oldWidth !== width || oldHeight !== height) { - this.canvas.width = width; - this.canvas.height = height; - this.canvas.style.width = width + 'px'; - this.canvas.style.height = height + 'px'; - - this.needsResize_ = true; - this.scheduleUpdate(); - } -}; - -/** - * @inheritDoc - */ -CanvasLayer.prototype.draw = function() { - this.repositionCanvas_(); -}; - -/** - * Internal callback for map view changes. Since the Maps API moves the overlay - * along with the map, this function calculates the opposite translation to - * keep the canvas in place. - * @private - */ -CanvasLayer.prototype.repositionCanvas_ = function() { - // TODO(bckenny): *should* only be executed on RAF, but in current browsers - // this causes noticeable hitches in map and overlay relative - // positioning. - - // canvas position relative to draggable map's conatainer depends on - // overlayView's projection, not the map's - var map = this.getMap(); - var projection = this.getProjection(); - this.topLeft_ = projection.fromContainerPixelToLatLng(new google.maps.Point(0,0)); - var divTopLeft = projection.fromLatLngToDivPixel(this.topLeft_); - var containerTopLeft = projection.fromLatLngToContainerPixel(this.topLeft_); - - this.canvas.style[CanvasLayer.CSS_TRANSFORM_] = 'translate(' + - Math.round(divTopLeft.x - containerTopLeft.x) + 'px,' + Math.round(divTopLeft.y - containerTopLeft.y) + 'px)'; - - // Where is northwest corner of earth compared to northwest corner of canvas? If there's more than one - // projection displaying (i.e. the international date line is visible one or more times), select - // projection which covers the center pixel of the container - this.mapScale_ = Math.pow(2, map.zoom); - var projectionWidth = projection.getWorldWidth() / this.mapScale_; - - this.mapTranslation_ = map.getProjection().fromLatLngToPoint(this.getTopLeft()); - this.mapTranslation_.x = -this.mapTranslation_.x; - this.mapTranslation_.y = -this.mapTranslation_.y; - - // Calculate how many projectionWidths we can move to the right before the origin crosses the center pixel of the container - var advance = Math.floor(((0.5 * this.canvas.width / this.mapScale_) - this.mapTranslation_.x) / projectionWidth); - - this.mapTranslation_.x += advance * projectionWidth; - - this.scheduleUpdate(); -}; - -/** - * Internal callback that serves as main animation scheduler via - * requestAnimationFrame. Calls resize and update callbacks if set, and - * schedules the next frame if overlay is animated. - * @private - */ -CanvasLayer.prototype.update_ = function() { - this.requestAnimationFrameId_ = null; - - if (!this.isAdded_) { - return; - } - - if (this.isAnimated_) { - this.scheduleUpdate(); - } - - if (this.needsResize_ && this.resizeHandler_) { - this.needsResize_ = false; - this.resizeHandler_(); - } - - if (this.updateHandler_) { - this.updateHandler_(); - } -}; - -/** - * A convenience method to get the current LatLng coordinate of the top left of - * the current view of the map. - * @return {google.maps.LatLng} The top left coordinate. - */ -CanvasLayer.prototype.getTopLeft = function() { - return this.topLeft_; -}; - -CanvasLayer.prototype.getMapTranslation = function() { - return this.mapTranslation_; -} - -CanvasLayer.prototype.getMapScale = function() { - return this.mapScale_; -} - -/** - * Schedule a requestAnimationFrame callback to updateHandler. If one is - * already scheduled, there is no effect. - */ -CanvasLayer.prototype.scheduleUpdate = function() { - if (this.isAdded_ && !this.requestAnimationFrameId_) { - this.requestAnimationFrameId_ = - this.requestAnimFrame_.call(window, this.requestUpdateFunction_); - } -}; diff --git a/js/app/Visualization/Animation/AnimationManager.js b/js/app/Visualization/Animation/AnimationManager.js index 87d0be18..a5462401 100644 --- a/js/app/Visualization/Animation/AnimationManager.js +++ b/js/app/Visualization/Animation/AnimationManager.js @@ -123,9 +123,14 @@ define([ self.layer = new ol.layer.Tile({ source: new ol.source.OSM() }); + self.markerLayer = new ol.layer.Tile({ + source: new ol.source.XYZ({ + url: 'http://t1.openseamap.org/seamark/{z}/{x}/{y}.png' + }) + }); self.map = new ol.Map({ layers: [ - self.layer + self.layer, self.markerLayer ], target: self.node[0], controls: ol.control.defaults({ From 4598dc1b197be1ac2317093b7c4de57d16a4d251 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Tue, 20 Jun 2017 12:57:55 +0200 Subject: [PATCH 08/11] Some build bugfixes --- Makefile | 3 ++- .../Animation/AnimationManager.js | 2 +- js/app/Visualization/Animation/GlAnimation.js | 2 +- js/app/Visualization/UI/MouseLatLon.js | 2 +- js/app/app.profile.js | 1 - js/shims/CanvasLayer/main.js | 26 ------------------- js/shims/Stats/main.js | 2 +- js/shims/openlayers/main.js | 16 ++++++++++++ .../openlayers.profile.js} | 0 .../{CanvasLayer => openlayers}/package.json | 4 +-- 10 files changed, 24 insertions(+), 34 deletions(-) delete mode 100644 js/shims/CanvasLayer/main.js create mode 100644 js/shims/openlayers/main.js rename js/shims/{CanvasLayer/CanvasLayer.profile.js => openlayers/openlayers.profile.js} (100%) rename js/shims/{CanvasLayer => openlayers}/package.json (79%) diff --git a/Makefile b/Makefile index 0f141e11..f128f80d 100644 --- a/Makefile +++ b/Makefile @@ -11,7 +11,8 @@ JSDEPS= \ $(LIBS)/loggly-jslogger/src/loggly.tracker.js \ $(LIBS)/cartodb.js/cartodb.js \ $(LIBS)/cartodb.js/cartodb.mod.torque.js \ - $(LIBS)/clipboard.js/clipboard.min.js + $(LIBS)/clipboard.js/clipboard.min.js \ + $(LIBS)/bower-ol3/build/ol.js CSSDEPS= \ $(LIBS)/font-awesome/css/font-awesome.min.css \ diff --git a/js/app/Visualization/Animation/AnimationManager.js b/js/app/Visualization/Animation/AnimationManager.js index a5462401..7c6c0479 100644 --- a/js/app/Visualization/Animation/AnimationManager.js +++ b/js/app/Visualization/Animation/AnimationManager.js @@ -13,7 +13,7 @@ define([ "shims/jQuery/main", "dijit/Dialog", "app/Visualization/Animation/Matrix", - "libs/bower-ol3/build/ol", + "shims/openlayers/main", "shims/Stats/main", "app/Visualization/Animation/ObjectToTable", "app/Visualization/Animation/Rowidx", diff --git a/js/app/Visualization/Animation/GlAnimation.js b/js/app/Visualization/Animation/GlAnimation.js index 487a4648..8c0eba0b 100644 --- a/js/app/Visualization/Animation/GlAnimation.js +++ b/js/app/Visualization/Animation/GlAnimation.js @@ -8,7 +8,7 @@ define([ "app/Data/GeoProjection", "app/Data/DataView", "shims/jQuery/main", - "libs/bower-ol3/build/ol" + "shims/openlayers/main" ], function( Class, Events, diff --git a/js/app/Visualization/UI/MouseLatLon.js b/js/app/Visualization/UI/MouseLatLon.js index 50d46e80..f2ddd36b 100644 --- a/js/app/Visualization/UI/MouseLatLon.js +++ b/js/app/Visualization/UI/MouseLatLon.js @@ -2,7 +2,7 @@ define([ "dojo/_base/declare", "./TemplatedContainer", "shims/jQuery/main", - "libs/bower-ol3/build/ol" + "shims/openlayers/main" ], function( declare, TemplatedContainer, diff --git a/js/app/app.profile.js b/js/app/app.profile.js index 97e4a8ed..5bf3cfe5 100644 --- a/js/app/app.profile.js +++ b/js/app/app.profile.js @@ -4,7 +4,6 @@ profile = { amd: function(filename, mid) { var specials = { // "app/Condition": true, - "app/CanvasLayer": true /* , diff --git a/js/shims/CanvasLayer/main.js b/js/shims/CanvasLayer/main.js deleted file mode 100644 index 915e5ba3..00000000 --- a/js/shims/CanvasLayer/main.js +++ /dev/null @@ -1,26 +0,0 @@ -if (false) { - define(["shims/GoogleMaps/main", "app/CanvasLayer"], function () {}); -} - -(function () { - var def = define; - - if (window.CanvasLayer != undefined) { - def([], function () { return window.CanvasLayer; }); - } else { - window.canvasLayerShimLoader = function (req, callback) { - delete window.canvasLayerShimLoader; - - req(["shims/GoogleMaps/main"], function () { - req(["app/CanvasLayer"], function () { - callback(); - }); - }); - } - - - def(["shims/DefineCallback!canvasLayerShimLoader"], function () { - return CanvasLayer; - }); - } -})(); diff --git a/js/shims/Stats/main.js b/js/shims/Stats/main.js index f2993f52..efad3394 100644 --- a/js/shims/Stats/main.js +++ b/js/shims/Stats/main.js @@ -1,5 +1,5 @@ if (false) { - define(["shims/GoogleMaps/main", "app/CanvasLayer"], function () {}); + define(["shims/GoogleMaps/main"], function () {}); } (function () { diff --git a/js/shims/openlayers/main.js b/js/shims/openlayers/main.js new file mode 100644 index 00000000..0232199c --- /dev/null +++ b/js/shims/openlayers/main.js @@ -0,0 +1,16 @@ +if (false) { + define([], function () {}); +} + +(function () { + var def = define; + + if (window.ol != undefined) { + def([], function () { return window.ol; }); + } else { + def(["libs/bower-ol3/build/ol"], function (ol) { + return ol; + }); + } +})(); + diff --git a/js/shims/CanvasLayer/CanvasLayer.profile.js b/js/shims/openlayers/openlayers.profile.js similarity index 100% rename from js/shims/CanvasLayer/CanvasLayer.profile.js rename to js/shims/openlayers/openlayers.profile.js diff --git a/js/shims/CanvasLayer/package.json b/js/shims/openlayers/package.json similarity index 79% rename from js/shims/CanvasLayer/package.json rename to js/shims/openlayers/package.json index e667a9b6..345bfebd 100644 --- a/js/shims/CanvasLayer/package.json +++ b/js/shims/openlayers/package.json @@ -1,5 +1,5 @@ { - "name": "CanvasLayer", + "name": "openlayers", "version":"0.1", "main": "main", "description": "", @@ -10,5 +10,5 @@ } ], "homepage": "https://github.com/SkyTruth/pelagos-client", - "dojoBuild": "CanvasLayer.profile.js" + "dojoBuild": "async.profile.js" } From 8f8db8054e17e355ee29feb305ec4ee1debab022 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Tue, 20 Jun 2017 14:11:51 +0200 Subject: [PATCH 09/11] Bugfix for build --- js/main.profile.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/main.profile.js b/js/main.profile.js index 8b4ce55e..cd8ea68c 100644 --- a/js/main.profile.js +++ b/js/main.profile.js @@ -1,6 +1,7 @@ dojoConfig = { isDebug: true, async: true, + layerOptimize: false, cssOptimize: "comments.keepLines", cssOptimize: "comments", selectorEngine: "lite", From 7aa30ea8ec17daed52ba3d69a6d385a4f326a9f3 Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Tue, 20 Jun 2017 14:41:49 +0200 Subject: [PATCH 10/11] Build bugfixes --- Makefile | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Makefile b/Makefile index f128f80d..64d2bbc5 100644 --- a/Makefile +++ b/Makefile @@ -59,14 +59,14 @@ js-build/build-succeded: js-dojo-build/build-succeded js-build/deps.js js-build/ (cd js-dojo-build; find . -type f \! -name "*.js") | while read name; do cp "js-dojo-build/$$name" "js-build/$$name"; done (cd js/libs; find . -type d) | while read name; do mkdir -p "js-build/libs/$$name"; done (cd js/libs; find . -type f \! -name "*.js") | while read name; do cp "js/libs/$$name" "js-build/libs/$$name"; done - cp js-dojo-build/app/app.js.uncompressed.js js-build/app/app.js.uncompressed.js + cp js-dojo-build/app/app.js js-build/app/app.js.uncompressed.js cp js-dojo-build/app/nls/* js-build/app/nls/ cp js-dojo-build/app/TabletMeta.js js-build/app/TabletMeta.js # Minify app.js node_modules/.bin/uglifyjs js-build/app/app.js.uncompressed.js --screw-ie8 --keep-fnames --stats -o js-build/app/app.js touch $@ -js-build/deps.js: $(JSDEPS) js/app/CanvasLayer.js +js-build/deps.js: $(JSDEPS) mkdir -p js-build for name in $^; do cat $$name; echo; done > $@ From b3da4f841c234232142dfc854fd427fa006e813c Mon Sep 17 00:00:00 2001 From: Egil Moeller Date: Thu, 22 Jun 2017 11:18:08 +0200 Subject: [PATCH 11/11] Bugfix for select --- js/app/Visualization/Animation/AnimationManager.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/js/app/Visualization/Animation/AnimationManager.js b/js/app/Visualization/Animation/AnimationManager.js index 7c6c0479..06dd5887 100644 --- a/js/app/Visualization/Animation/AnimationManager.js +++ b/js/app/Visualization/Animation/AnimationManager.js @@ -401,6 +401,10 @@ return; var x, y; + if (e.originalEvent) { + e = e.originalEvent; + } + if (e.pageX != undefined) { var offset = self.node.offset(); x = e.pageX - offset.left; @@ -431,7 +435,7 @@ return; ); if (type == "info" || type == "selected") { - self.closeInfoPopup(); + // self.closeInfoPopup(); } if (rowidx) {