Merge branch 'release/v1.1.0'

CHANGELOG.md

@@ -1,3 +1,22 @@
+# 1.1.0 (9/03/2016)
+
+* Tropics overlay
+* Fixes to the homepage
+* Several bug fixes since last release
+
+# 1.0.1 (1/12/2015)
+
+* Unbroken links
+* Quicker timeline
+
+# 1.0 (1/12/2015)
+
+* Map with timeline
+* Static pages
+* Pantropical view + Pantropical view embed
+* Compare countries
+* Inspect Country
+
 # 0.5.1
 
 * New data on countries endpoints
@@ -26,4 +45,4 @@
 
 # 0.1.0
 
-* Initial release
+* Initial release

app/assets/javascripts/home/views/sliderView.js

@@ -21,24 +21,63 @@ define([
     events: {
       'click #get-started' : 'getStarted',
       'click #go-to-apps' : 'goToApps',
-      'click .gotomap' : 'gotoMap'
+      'click .gotomap' : 'gotoMap',
+      'click .feature-slider .slick-dots li': '_onSliderClick',
+      'mouseenter .feature-slider .slick-dots li': '_onSliderFeatureHighlight',
+      'mouseleave .feature-slider .slick-dots li': '_onSliderFeatureUnHighlight'
     },
 
     initialize: function() {
       //Init
       this.$getStarted = $('#get-started');
 
       //Inits
-      this.slickSlider();
+      this._slickSliderMain();
+      this._slickSliderFeature();
     },
 
-    slickSlider: function(){
-      //INIT
-      $('.main-slider-viewport').slick({
+    _slickSliderMain: function() {
+      this.mainSlider = this._initSlick('.home-slider', 500, 3000);
+    },
+
+    _slickSliderFeature: function() {
+      this.featureSliderStopped = false;
+      this.featureSlider = this._initSlick('.feature-slider', 500, 8000);
+    },
+
+    /**
+     * Pauses the feature slider when the mouse
+     * its on top of a slick dot
+     */
+    _onSliderFeatureHighlight: function() {
+      this.featureSlider.slick('slickPause');
+    },
+
+    /**
+     * Plays the feature slider when the mouse
+     * leaves a slick dot
+     */
+    _onSliderFeatureUnHighlight: function() {
+      if (!this.featureSliderStopped) {
+        this.featureSlider.slick('slickPlay');
+      }
+    },
+
+    /**
+     * Pauses the feature slider when the mouse
+     * its on top of a slick dot
+     */
+    _onSliderClick: function() {
+      this.featureSliderStopped = true;
+      this.featureSlider.slick('slickPause');
+    },
+
+    _initSlick: function(el, speed, autoSpeed) {
+      var slick = $(el).slick({
         infinite: true,
-        speed: 500,
+        speed: speed,
         autoplay: true,
-        autoplaySpeed: 3000,
+        autoplaySpeed: autoSpeed,
         slide: 'li',
         fade: true,
         cssEase: 'linear',
@@ -59,6 +98,7 @@ define([
         ]
       });
 
+      return slick;
     },
 
     getStarted: function(e){

app/assets/javascripts/map/geojson_overlays/tropics.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"polyType":"tropics"},"geometry":{"type":"Polygon","coordinates":[[[-180,90],[0,90],[0,30],[-180,30],[-180,90]]]}},{"type":"Feature","properties":{"polyType":"tropics"},"geometry":{"type":"Polygon","coordinates":[[[-180,-90],[-180,-30],[0,-30],[0,-90],[-180,-90]]]}},{"type":"Feature","properties":{"polyType":"tropics"},"geometry":{"type":"Polygon","coordinates":[[[180,90],[0,90],[0,30],[180,30],[180,90]]]}},{"type":"Feature","properties":{"polyType":"tropics"},"geometry":{"type":"Polygon","coordinates":[[[180,-90],[180,-30],[0,-30],[0,-90],[180,-90]]]}}]}

app/assets/javascripts/map/views/GeoStylingView.js

@@ -0,0 +1,102 @@
+/**
+ * GeoJSON Styling
+ * Applies styles for different types
+ * of geojson. 
+ */
+define([
+  'underscore',
+  'handlebars',
+], function(_, Handlebars) {
+
+  'use strict';
+
+  var GeoStylingView = Backbone.View.extend({
+
+    defaults: {
+      styles: {
+        tropics: {
+          strokeWeight: 0,
+          fillOpacity: 0.3,
+          fillColor: '#000',
+          strokeColor: "#000",
+          strokeOpacity: 0
+        },
+        analysis: {
+          strokeWeight: 2,
+          fillOpacity: 0,
+          fillColor: '#FFF',
+          strokeColor: '#5B80A0', 
+          strokeOpacity: 1,
+          icon: {
+            url: '/assets/icons/marker_exclamation.png',
+            size: [36, 36],
+            offset: [0, 0],
+            anchor: [18, 18]
+          }
+        },
+        country: {
+          strokeWeight: 2,
+          fillOpacity: 0,
+          fillColor: '#FFF',
+          strokeColor: '#5B80A0',
+          strokeOpacity: 1,
+          icon: {
+            url: '/assets/icons/marker_exclamation.png',
+            size: [36, 36],
+            offset: [0, 0],
+            anchor: [18, 18]
+          }
+        }
+      }
+    },
+
+    initialize: function(params) {
+      this.options = _.extend({}, this.defaults, params || {});
+      this.styles = this.options.styles;
+      this.map = this.options.map;
+    },
+
+    setStyles: function() {
+      this.map.data.setStyle(_.bind(function(feature){
+        for (var current in this.styles) {
+          var style = this.styles[current];
+
+          if (style && feature.getProperty('polyType') === current) {
+            if (style.icon) {
+              style.icon = this._getIcon(style.icon);
+            }
+            return style;
+          }
+        }
+      }, this )); 
+    },
+
+    getStyles: function(type) {
+      var style = this.styles[type];
+
+      if (style.icon) {
+        style.icon = this._getIcon(style.icon);
+      }
+
+      return style;
+    },
+
+    _getIcon: function(params) {
+      var icon;
+      var iconData = params;
+
+      if (iconData.size && iconData.offset) {
+        icon = new google.maps.MarkerImage(
+          iconData.url,
+          new google.maps.Size(iconData.size[0], iconData.size[1]), // Size
+          new google.maps.Point(iconData.offset[0], iconData.offset[1]), // Offset
+          new google.maps.Point(iconData.anchor[0], iconData.anchor[1]) // Anchor
+        );
+      }
+      return icon;
+    }
+
+  });
+  return GeoStylingView;
+
+});

app/assets/javascripts/map/views/MapView.js

@@ -14,8 +14,12 @@ define([
   'map/views/maptypes/darkMaptype',
   'map/views/maptypes/positronMaptype',
   'map/views/maptypes/landsatMaptype',
-  'map/helpers/layersHelper'
-], function(Backbone, _, mps, Presenter, grayscaleMaptype, treeheightMaptype, darkMaptype, positronMaptype, landsatMaptype, layersHelper) {
+  'map/views/GeoStylingView',
+  'map/helpers/layersHelper',
+  'text!map/geojson_overlays/tropics.json'
+], function(Backbone, _, mps, Presenter, grayscaleMaptype, treeheightMaptype,
+  darkMaptype, positronMaptype, landsatMaptype, GeoStylingView, layersHelper, 
+  tropicsOverlay) {
 
   'use strict';
 
@@ -86,15 +90,14 @@ define([
          new google.maps.LatLng(85, 180)
       ); // why (-85, -180)? Well, because f*ck you, Google: http://stackoverflow.com/questions/5405539/google-maps-v3-why-is-latlngbounds-contains-returning-false
       this.lastValidCenter = this.map.getCenter();
-
       this._checkDialogs();
 
       this.resize();
       this._setMaptypes();
       this._addListeners();
+      this._setGeoStyles();
       // Node
       this.createMaptypeNode();
-
     },
 
     /**
@@ -434,9 +437,9 @@ define([
       for (var i = 1999; i < 2013; i++) {
         this.map.mapTypes.set('landsat{0}'.format(i), landsatMaptype([i]));
       }
+      this.map.data.addGeoJson(JSON.parse(tropicsOverlay));
     },
 
-
     /**
      * Crosshairs when analysis is activated
      */
@@ -538,7 +541,18 @@ define([
           }, this )
         );
       }
-    }
+    },
+
+    /**
+     * This method will set the global styles
+     * for all geojson features
+     */
+    _setGeoStyles: function() {
+      this.geoStyles = new GeoStylingView({
+        map: this.map
+      });
+      this.geoStyles.setStyles();
+    } 
   });
 
   return MapView;

app/assets/javascripts/map/views/tabs/AnalysisView.js

@@ -10,9 +10,11 @@ define([
   'chosen',
   'map/presenters/tabs/AnalysisPresenter',
   'map/services/CountriesService',
+  'map/views/GeoStylingView',
   'text!map/templates/tabs/analysis.handlebars',
   'text!map/templates/tabs/analysis-mobile.handlebars'
-], function(_, Handlebars, amplify, chosen, Presenter, CountriesService, tpl, tplMobile) {
+], function(_, Handlebars, amplify, chosen, Presenter, CountriesService, 
+  GeoStylingView, tpl, tplMobile) {
 
   'use strict';
 
@@ -53,6 +55,8 @@ define([
       this.presenter = new Presenter(this);
       this.model = new AnalysisModel();
       this.countriesService = CountriesService;
+      this.geoStyles = new GeoStylingView();
+
       enquire.register("screen and (min-width:"+window.gfw.config.GFW_MOBILE+"px)", {
         match: _.bind(function(){
           this.mobile = false;
@@ -187,39 +191,15 @@ define([
      * Set geojson style.
      */
     setStyle: function() {
-      this.style = {
-        strokeWeight: 2,
-        fillOpacity: 0,
-        fillColor: '#FFF',
-        strokeColor: '#5B80A0',
-        icon: new google.maps.MarkerImage(
-          '/assets/icons/marker_exclamation.png',
-          new google.maps.Size(36, 36), // size
-          new google.maps.Point(0, 0), // offset
-          new google.maps.Point(18, 18) // anchor
-        )
-      };
-
-      this.map.data.setStyle(_.bind(function(feature){
-        var strokeColor = (feature.getProperty('color')) ? feature.getProperty('color') : '#5B80A0';
-        return ({
-          strokeWeight: 2,
-          fillOpacity: 0,
-          fillColor: '#FFF',
-          strokeColor: strokeColor
-        });
-      }, this ));
+      this.style = this.geoStyles.getStyles('analysis');
     },
 
     setGeojson: function(geojson, color) {
+      geojson.properties.polyType = 'country';
       geojson.properties.color = color;
       return geojson;
     },
 
-
-
-
-
     /**
      * COUNTRY
      */
@@ -329,14 +309,6 @@ define([
       }
     },
 
-
-
-
-
-
-
-
-
     /**
      * DRAWING
      */
@@ -481,22 +453,6 @@ define([
       this.presenter.setMultipolygon(multipolygon, geojson);
     },
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
     // COUNTRY MASK
     drawMaskCountry: function(geojson, iso){
       this.mask = cartodb.createLayer(this.map, {