Mapbox (electricitymaps#958)

* Add mapbox in package

* Basic mapbox

* Fix id, center, zoom

* Mouseover and tentatively connect to canvas and arrows

* Disable zoom handlers

* Basic wind drawing

* Basic wind/arrow panzoom with arrow re-render at each dragend

* Fix windy bug

* Add comments

* Fix iPad view bug

* Fix windy frame duration

* Fix wind ipad

* Fix solar

* Fix windy frame duration

* Cleanup and remove d3 from maplayer

* Minor fixes

* Cleanup DOM

* Faster rendering by putting wind/solar canvas with display none

* Disable touchrotate

* CSS animations arrows

* Fix iOS mobile view

* Add small loading indicator

* Clean up style, works on Safari mobile (ipad/iphone)

* Fix overflow of arrow layer

* Add arrows

* Use ES constructor

* Cleanup

* Add seaclick

* Set arrow center

* Fix proper projections and dragging

* Fixes

* Fix webpack production

* Clean up

* Clean up

* Disable animations on drag

* Fix multiple zoom start calls

* Fix d3 event

* Rewrite wind layer

* Rewrite solar with new API

* Fix d3 imports

* Proper mouseover

* Fix tooltip position

* Set proper debounce on map drag and hide arrows when not needed

* Optimise rendering, disable touch rotation

* Fix race condition and update pinch zoom

* Remove geostitch process

* Fix loading indicator

* Arrows only show up when map has loaded

* Better loading

* Revert arrows to GIF as wind performances are better

* Resize map

* Remove orange border on tap

* Faster mouseover

* Fix mouseleave/enter

* Fix tooltip opacity bug

* Fix header for Safari

* Disable double click zoom

* Fix arrow size

* CSS hover on exchanges (instead of d3)

* Cleanup and resize arrows using GPU (higher quality)

* Typo

* Restore meta tags

* Fix arrow hover zone

* Fix color scale changes

* Remove transitions in mapboxgl as they are not supported yet

* Fix arrow sizes

* Try with crisp-edges

* Fix stops

* Fix low flow

* Fix height

* Add frame-src

* fix webpack prod

* Fix touch

* fix

* Map removed on mobile when webgl not available

.dockerignore

@@ -3,6 +3,8 @@
 *.json
 *secrets*
 *.env
+*.mp4
+*.mkv
 
 mobileapp
 

docker-compose.yml

@@ -12,6 +12,7 @@ services:
       dockerfile: web/Dockerfile
       cache_from:
         - eu.gcr.io/tmrow-152415/electricitymap_web:production
+        - eu.gcr.io/tmrow-152415/electricitymap_web:staging
     command: npm run server-dev
     depends_on: ['mockserver']
     environment:

mobileapp/config.xml

@@ -59,12 +59,12 @@
         <host name="www.electricitymap.org" scheme="https" />
         <host name="www.electricitymap.org" scheme="http" />
     </universal-links>
-    <engine name="android" spec="^6.3.0" />
-    <engine name="ios" spec="^4.5.0" />
     <plugin name="cordova-plugin-whitelist" spec="1" />
     <plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
     <plugin name="cordova-plugin-globalization" spec="~1.0.6" />
     <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
     <plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
     <plugin name="cordova-plugin-code-push" spec="^1.10.1" />
+    <engine name="android" spec="^6.3.0" />
+    <engine name="ios" spec="^4.5.0" />
 </widget>

web/Dockerfile

@@ -2,6 +2,7 @@ FROM node:8.5.0
 WORKDIR /home/web
 
 ADD web/package.json /home/web/package.json
+ADD web/package-lock.json /home/web/package-lock.json
 RUN npm install
 
 ADD web /home/web

web/app/components/areagraph.js

@@ -1,6 +1,16 @@
 'use strict'
 
-var d3 = require('d3');
+const d3 = Object.assign(
+  {},
+  require('d3-array'),
+  require('d3-axis'),
+  require('d3-collection'),
+  require('d3-selection'),
+  require('d3-scale'),
+  require('d3-shape'),
+);
+// see https://stackoverflow.com/questions/36887428/d3-event-is-null-in-a-reactjs-d3js-component
+import {event as currentEvent} from 'd3-selection';
 var moment = require('moment');
 
 function AreaGraph(selector, modeColor, modeOrder) {
@@ -199,7 +209,7 @@ AreaGraph.prototype.render = function() {
 
     var datetimes = this._datetimes;
     function detectPosition(d3Event) {
-        if (!d3Event) { d3Event = d3.event; }
+        if (!d3Event) { d3Event = currentEvent; }
         if (!datetimes.length) return;
         var dx = d3Event.pageX ? (d3Event.pageX - this.parentNode.getBoundingClientRect().left) :
             (d3.touches(this)[0][0]);
@@ -278,7 +288,7 @@ AreaGraph.prototype.render = function() {
         .on('mouseout', function () {
             if (!data.length) { return; }
             var innerThis = this;
-            var d3Event = d3.event;
+            var d3Event = currentEvent;
             mouseOutTimeout = setTimeout(function() {
                 var i = detectPosition.call(innerThis, d3Event);
                 that.selectedIndex(i);

web/app/components/countrytable.js

@@ -1,4 +1,12 @@
-var d3 = require('d3');
+const d3 = Object.assign(
+  {},
+  require('d3-array'),
+  require('d3-axis'),
+  require('d3-collection'),
+  require('d3-format'),
+  require('d3-selection'),
+  require('d3-scale'),
+);
 var getSymbolFromCurrency = require('currency-symbol-map').getSymbolFromCurrency;
 var moment = require('moment');
 

web/app/components/horizontalcolorbar.js

@@ -70,8 +70,10 @@ function HorizontalColorbar(selector, d3ColorScale, d3TickFormat, d3TickValues)
 }
 
 HorizontalColorbar.prototype.render = function() {
-    this.width = this.root.node().getBoundingClientRect().width;
-    this.height = this.root.node().getBoundingClientRect().height;
+    const rootNode = this.root.node();
+    if (!rootNode) { return; }
+    this.width = rootNode.getBoundingClientRect().width;
+    this.height = rootNode.getBoundingClientRect().height;
     if (!this.width || !this.height) return this;
 
     this.colorbarWidth = this.width - 2 * this.PADDING_X;