# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1472493673 -7200
# Node ID a719b2dcea346cf8a97f2d421e13fbc96aa236af
# Parent  97c06607949b3e1f0af4a53eda8b3e9dcea64af1
Cartography on 3 levels (continents/countries/france) and backToContinents button

diff -r 97c06607949b -r a719b2dcea34 cms/app-client/app/components/visu-carto.js
--- a/cms/app-client/app/components/visu-carto.js	Fri Aug 26 13:32:48 2016 +0200
+++ b/cms/app-client/app/components/visu-carto.js	Mon Aug 29 20:01:13 2016 +0200
@@ -3,133 +3,204 @@
 
 export default Ember.Component.extend({
 
-  filter: Ember.inject.service(),
-
-  didInsertElement: function(){
-    var _this = this;
-
-    this.$('#mapdiv').height(Ember.$('.corpus-app-container').height());
+    filter: Ember.inject.service(),
+    locationObserver: Ember.observer('filter.location', function() {
+        if(!this.get('filter').get('location')) {
+            this.get('map').selectObject();
+        }
+    }),
 
-    var franceDataProvider = {
-        mapVar: AmCharts.maps.france2016Low,
-        getAreasFromMap:true,
-
-        areas: this.initArea(AmCharts.maps.france2016Low)
-    };
+    didInsertElement: function(){
+        this.$('#mapdiv').height(Ember.$('.corpus-app-container').height());
+        this.createAmMap();
+    },
 
-    var worldDataProvider = {
-        map: "worldLow",
-        getAreasFromMap: true,
-        images: [{
-            id: "backButton",
-            label: "Back to continents map",
-            rollOverColor: "#CC0000",
-            labelRollOverColor: "#CC0000",
-            useTargetsZoomValues: true,
-            left: 30,
-            bottom: 30,
-            labelFontSize: 15,
-            selectable: true
-        }],
-        areas: this.initArea(AmCharts.maps.worldLow, franceDataProvider)
-    };
+    createAmMap: function() {
+        this.set('map', AmCharts.makeChart('mapdiv', {
+            'type': 'map',
+            'fontFamily': 'sans-serif',
+            'fontSize': '12px',
+            'dragMap': false,
+            'zoomOnDoubleClick': false,
+            'language': 'fr',
 
+            'areasSettings': {
+                'autoZoom': false,
+                'selectable': true,
+                'color': '#becfd4',
+                'colorOutline': '#253946',
+                'selectedColor': '#253946',
+                'rollOverOutlineColor': '#253946'
+            },
 
-    var continentsDataProvider = {
-        map: "continentsLow",
+            'zoomControl': {
+                'zoomControlEnabled': false,
+            },
 
-        areas: [{
-            id: "africa",
-            linkToObject: worldDataProvider,
-            color: "#373737",
-            passZoomValuesToTarget: true
-        }, {
-            id: "asia",
-            linkToObject: worldDataProvider,
-            color: "#515151",
-            selectable: false,
-            passZoomValuesToTarget: true
-        }, {
-            id: "australia",
-            linkToObject: worldDataProvider,
-            color: "#6c6c6c",
-            selectable: false,
-            passZoomValuesToTarget: true
-        }, {
-            id: "europe",
-            linkToObject: worldDataProvider,
-            color: "#888888",
-            passZoomValuesToTarget: true
-        }, {
-            id: "north_america",
-            linkToObject: worldDataProvider,
-            color: "#a2a2a2",
-            passZoomValuesToTarget: true
-        }, {
-            id: "south_america",
-            linkToObject: worldDataProvider,
-            color: "#f1f1f1",
-            selectable: false,
-            passZoomValuesToTarget: true
-        }]
+            'dataProvider': {
+                'map': 'continentsLow',
+                'areas': [{
+                    'id':'south_america',
+                    'linkToObject': {
+                        'map': 'worldLow',
+                        'getAreasFromMap': true
+                    },
+                    'passZoomValuesToTarget': true,
+                    'autoZoom': true
+                },
+                {
+                    'id':'north_america',
+                    'linkToObject': {
+                        'map': 'worldLow',
+                        'getAreasFromMap': true
+                    },
+                    'passZoomValuesToTarget': true,
+                    'autoZoom': true
+                },
+                {
+                    'id':'asia',
+                    'linkToObject': {
+                        'map': 'worldLow',
+                        'getAreasFromMap': true
+                    },
+                    'passZoomValuesToTarget': true,
+                    'autoZoom': true
+                },
+                {
+                    'id':'europe',
+                    'linkToObject': {
+                        'map': 'worldLow',
+                        'getAreasFromMap': true,
+                        'areas': [{
+                            'id': 'FR',
+                            'linkToObject': {
+                                'map': 'france2016Low',
+                                'getAreasFromMap': true,
+                                'areas': [{
+                                    'id': 'FR-A',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-B',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-C',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-D',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-E',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-F',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-G',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-H',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-I',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-J',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-K',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-L',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                },
+                                {
+                                    'id': 'FR-M',
+                                    'passZoomValuesToTarget': false,
+                                    'autoZoom': false,
+                                    'selectable': true
+                                }]
+                            },
+                            'autoZoom': true,
+                            'selectable': true
+                        }]
+                    },
+                    'passZoomValuesToTarget': true,
+                    'autoZoom': true
+                },
+                {
+                    'id':'australia',
+                    'linkToObject': {
+                        'map': 'worldLow',
+                        'getAreasFromMap': true
+                    },
+                    'passZoomValuesToTarget': true,
+                    'autoZoom': true
+                },
+                {
+                    'id':'africa',
+                    'linkToObject': {
+                        'map': 'worldLow',
+                        'getAreasFromMap': true
+                    },
+                    'passZoomValuesToTarget': true,
+                    'autoZoom': true
+                }]
+            },
 
-    };
-
-
-    var map = AmCharts.makeChart("mapdiv", {
-        type: "map",
-
-
-        areasSettings: {
-            autoZoom: true,
-            rollOverOutlineColor: "#000000",
-            selectedOutlineColor: "#CC0000",
-            selectedColor: "green",
-            color: "#fff"
-        },
+            listeners: [{
+                'event':'clickMapObject',
+                'method': Ember.run.bind(this, 'clickMapObject')
+            },
+            {
+                'event':'homeButtonClicked',
+                'method': Ember.run.bind(this, 'homeButtonClicked')
+            }]
+        }));
+    },
 
-        dataProvider: continentsDataProvider,
-
-        listeners: [{event:"clickMapObject", method:handleMapObjectClick}]
-
-    });
+    clickMapObject: function(event) {
+        this.get('filter').set('location', event.mapObject.title);
+    },
 
-    function handleGoHome() {
-        map.dataProvider = continentsDataProvider;
-        map.validateNow();
-    }
-    function handleMapObjectClick (event) {
-        if (event.mapObject.id === "backButton") {
-            handleGoHome();
+    homeButtonClicked: function(event) {
+        if(event.chart.dataProvider.map !== 'continentsLow') {
+            this.createAmMap();
         }
-        _this.get('filter').set('location', event.mapObject.title);
     }
 
-    // monitor when home icon was clicked and also go to continents map
-    map.addListener("homeButtonClicked", handleGoHome);
-  },
-  initArea: function(area, dataProvider){
-    var _this = this;
-
-    var areaList = [];
-    var count = {};
-    area.svg.g.path.map(function(elt){
-      var length = _this.get("documents").filterBy("spatial", elt.title).toArray().length;
-      if (length > 0){
-        count[elt.id]= length;
-      }
-    });
-    area.svg.g.path.map(function(elt){
-
-      areaList.push({
-        id: elt.id,
-        linkToObject: (elt.id === "FR" ? dataProvider : ""),
-        color: ((typeof(count[elt.id]) === "undefined") ? "#fff" : "#2D7073"),
-        autoZoom: (elt.id === "FR" ? true : false),
-        selectable: true,
-        passZoomValuesToTarget: false
-      });
-    });
-    return areaList;
-  }
 });