diff -r 53a6985443f8 -r f2c2c80a49f7 cms/app-client/app/components/visu-carto.js
--- a/cms/app-client/app/components/visu-carto.js	Mon Sep 05 18:45:47 2016 +0200
+++ b/cms/app-client/app/components/visu-carto.js	Thu Sep 22 15:34:10 2016 +0200
@@ -1,11 +1,21 @@
 import Ember from 'ember';
 import AmCharts from 'ammaps';
+import ENV from 'app-client/config/environment';
 
 export default Ember.Component.extend({
 
+    map: null,
+
     continentsMapVar: AmCharts.maps.continentsLow,
+    continentsAreas: [],
     countriesMapVar: AmCharts.maps.worldLow,
+    countriesAreas: [],
     franceMapVar: AmCharts.maps.france2016Low,
+    franceAreas: [],
+
+    color: 'rgba(113,132,141,.2)',
+
+    locationId: 'world',
 
     filter: Ember.inject.service(),
     locationObserver: Ember.observer('filter.location', function() {
@@ -16,53 +26,117 @@
 
     geostats: [],
     observerGeostats: Ember.observer('geostats', function() {
-        //console.log(this.get('geostats'));
+        if(this.get('map')) {
+            if(this.get('map').selectedObject.id) {
+                if(this.get('map').selectedObject.parentObject.mapVar === this.get('countriesMapVar')) {
+                    if(this.get('map').selectedObject.id === 'FR') {
+                        this.setFranceAreas();
+                        this.get('map')['dataProvider'] = {
+                            'mapVar': this.get('franceMapVar'),
+                            'getAreasFromMap': true,
+                            'areas': this.get('franceAreas')
+                        };
+                        this.get('map').validateData();
+                    }
+                } else if(this.get('map').selectedObject.parentObject.mapVar === this.get('continentsMapVar')) {
+                    this.setCountriesAreas();
+                    this.get('map')['dataProvider'] = {
+                        'mapVar': this.get('countriesMapVar'),
+                        'getAreasFromMap': true,
+                        'areas': this.get('countriesAreas'),
+                        'zoomLevel': this.get('map').zoomLevel(),
+                        'zoomLatitude': this.get('map').zoomLatitude(),
+                        'zoomLongitude': this.get('map').zoomLongitude()
+                    };
+                    this.get('map').validateData();
+                }
+            } else {
+                this.createAmMap();
+            }
+        }
     }),
 
+    init: function() {
+        this._super(...arguments);
+        if (ENV.environment === 'development') {
+            this.set('color', 'rgba(141,113,113,.2)');
+        }
+    },
+
+    setFranceAreas: function() {
+        var self = this;
+        var france2016LowAreas = [];
+        this.get('franceMapVar')['svg']['g']['path'].forEach(function(area) {
+            var object = {
+                'id': area.id,
+                'passZoomValuesToTarget': false,
+                'autoZoom': false
+            };
+            if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) {
+                object['mouseEnabled'] = false,
+                object['color'] = self.get('color');
+            }
+            france2016LowAreas.push(object);
+        });
+        this.set('franceAreas', france2016LowAreas);
+    },
+
+    setCountriesAreas: function() {
+        var self = this;
+        var worldLowAreas = [];
+        this.get('countriesMapVar')['svg']['g']['path'].forEach(function(area) {
+            if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) {
+                worldLowAreas.push({
+                    'id': area.id,
+                    'mouseEnabled': false,
+                    'color': self.get('color')
+                });
+            } else {
+                if(typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') {
+                    var object = {
+                        'id': area.id,
+                        'selectable': true
+                    };
+                    if(area.id === 'FR') {
+                        object['autoZoom'] = true;
+                    }
+                    worldLowAreas.push(object);
+                }
+            }
+        });
+        this.set('countriesAreas', worldLowAreas);
+    },
+
+    setContinentsAreas: function() {
+        var self = this;
+        var continentsLowAreas = [];
+        this.get('continentsMapVar')['svg']['g']['path'].forEach(function(area) {
+            var object = {
+                'id': area.id,
+                'passZoomValuesToTarget': true,
+                'selectable': true,
+                'mouseEnabled': true,
+                'autoZoom': true
+            };
+            if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) {
+                object['mouseEnabled'] = false,
+                object['color'] = self.get('color');
+            }
+            continentsLowAreas.push(object);
+        });
+        this.set('continentsAreas', continentsLowAreas);
+    },
+
     didInsertElement: function(){
         this.$('#mapdiv').height(Ember.$('.corpus-app-container').height());
         this.createAmMap();
     },
 
     createAmMap: function() {
+        console.log('createAmMap');
         var self = this;
 
-        var france2016LowAreas = [];
-        this.get('franceMapVar')['svg']['g']['path'].forEach(function(area) {
-            france2016LowAreas.push({
-                'id': area.id,
-                'passZoomValuesToTarget': false,
-                'autoZoom': false,
-                'selectable': true
-            })
-        });
-
-        var continentsLowAreas = [];
-        this.get('continentsMapVar')['svg']['g']['path'].forEach(function(area) {
-            var object = {
-                'id': area.id,
-                'linkToObject': {
-                    'mapVar': self.get('countriesMapVar'),
-                    'getAreasFromMap': true
-                },
-                'passZoomValuesToTarget': true,
-                'autoZoom': true
-            };
-            if(area.id === 'europe') {
-                object['linkToObject']['areas'] = [{
-                    'id': 'FR',
-                    'linkToObject': {
-                        'mapVar': self.get('franceMapVar'),
-                        'getAreasFromMap': true,
-                        'areas': france2016LowAreas
-                    },
-                    'autoZoom': true,
-                    'selectable': true
-                }];
-            }
-            continentsLowAreas.push(object);
-        });
-
+        this.setContinentsAreas();
         this.set('map', AmCharts.makeChart('mapdiv', {
             'type': 'map',
             'fontFamily': 'sans-serif',
@@ -86,7 +160,7 @@
 
             'dataProvider': {
                 'mapVar': this.get('continentsMapVar'),
-                'areas': continentsLowAreas
+                'areas': this.get('continentsAreas')
             },
 
             listeners: [{
@@ -101,16 +175,14 @@
     },
 
     clickMapObject: function(event) {
+        this.set('locationId', event.mapObject.id);
+        this.sendAction('area', event.mapObject.id);
         this.get('filter').set('location', event.mapObject.title);
-
-        /*this.get('geostats').forEach( function (geostat) {
-            console.log('geostat', geostat.get('id'), geostat.get('count'));
-        });*/
     },
 
     homeButtonClicked: function(event) {
         if(event.chart.dataProvider.map !== 'continentsLow') {
-            this.createAmMap();
+            this.sendAction('area', 'world');
         }
     }