--- a/cms/app-client/app/components/visu-carto.js	Thu Sep 22 15:42:12 2016 +0200
+++ b/cms/app-client/app/components/visu-carto.js	Thu Sep 22 22:57:06 2016 +0200
@@ -13,9 +13,9 @@
     franceMapVar: AmCharts.maps.france2016Low,
     franceAreas: [],
 
-    color: 'rgba(113,132,141,.2)',
+    locationQueryParam: 'world',
 
-    locationId: 'world',
+    color: 'rgba(113,132,141,.2)',
 
     filter: Ember.inject.service(),
     locationObserver: Ember.observer('filter.location', function() {
@@ -72,9 +72,12 @@
                 'passZoomValuesToTarget': false,
                 'autoZoom': false
             };
-            if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) {
+            var departments = self.get('geostats').find(geostat => geostat.id === area.id);
+            if(typeof departments === 'undefined') {
                 object['mouseEnabled'] = false,
                 object['color'] = self.get('color');
+            } else {
+                object['value'] = departments.get('count');
             }
             france2016LowAreas.push(object);
         });
@@ -85,7 +88,8 @@
         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) {
+            var countries = self.get('geostats').find(geostat => geostat.id === area.id);
+            if(typeof countries === 'undefined') {
                 worldLowAreas.push({
                     'id': area.id,
                     'mouseEnabled': false,
@@ -95,7 +99,8 @@
                 if(typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') {
                     var object = {
                         'id': area.id,
-                        'selectable': true
+                        'selectable': true,
+                        'value': countries.get('count')
                     };
                     if(area.id === 'FR') {
                         object['autoZoom'] = true;
@@ -118,9 +123,12 @@
                 'mouseEnabled': true,
                 'autoZoom': true
             };
-            if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) {
+            var continent = self.get('geostats').find(geostat => geostat.id === area.id);
+            if(typeof continent === 'undefined') {
                 object['mouseEnabled'] = false,
                 object['color'] = self.get('color');
+            } else {
+                object['value'] = continent.get('count');
             }
             continentsLowAreas.push(object);
         });
@@ -133,9 +141,7 @@
     },
 
     createAmMap: function() {
-        console.log('createAmMap');
         var self = this;
-
         this.setContinentsAreas();
         this.set('map', AmCharts.makeChart('mapdiv', {
             'type': 'map',
@@ -144,30 +150,26 @@
             'dragMap': false,
             'zoomOnDoubleClick': false,
             'language': 'fr',
-
             'areasSettings': {
                 'autoZoom': false,
                 'selectable': true,
                 'color': '#becfd4',
+                'colorSolid': '#71848d',
                 'colorOutline': '#253946',
                 'selectedColor': '#253946',
                 'rollOverOutlineColor': '#253946'
             },
-
             'zoomControl': {
                 'zoomControlEnabled': false,
             },
-
             'dataProvider': {
                 'mapVar': this.get('continentsMapVar'),
                 'areas': this.get('continentsAreas')
             },
-
             listeners: [{
                 'event':'clickMapObject',
                 'method': Ember.run.bind(this, 'clickMapObject')
-            },
-            {
+            }, {
                 'event':'homeButtonClicked',
                 'method': Ember.run.bind(this, 'homeButtonClicked')
             }]
@@ -175,14 +177,14 @@
     },
 
     clickMapObject: function(event) {
-        this.set('locationId', event.mapObject.id);
-        this.sendAction('area', event.mapObject.id);
+        this.set('locationQueryParam', event.mapObject.id);
+        this.sendAction('setLocation', event.mapObject.id);
         this.get('filter').set('location', event.mapObject.title);
     },
 
     homeButtonClicked: function(event) {
         if(event.chart.dataProvider.map !== 'continentsLow') {
-            this.sendAction('area', 'world');
+            this.sendAction('setLocation', 'world');
         }
     }
 

--- a/cms/app-client/app/routes/tabs/carto.js	Thu Sep 22 15:42:12 2016 +0200
+++ b/cms/app-client/app/routes/tabs/carto.js	Thu Sep 22 22:57:06 2016 +0200
@@ -2,22 +2,19 @@
 
 export default Ember.Route.extend({
 
-    area: 'world',
+    locationQueryParam: 'world',
 
-    model: Ember.observer('area', function() {
-        var self = this;
-        var promise = this.store.query('geostat', {
-            'areas': self.get('area')
+    model: function() {
+        return this.store.query('geostat', {
+            'areas': this.get('locationQueryParam')
         });
-        promise.then(function(value) {
-            self.controllerFor('tabs/carto').set('areas', value.get('content'));
-        });
-        return promise;
-    }),
+    },
 
     actions: {
-        setAreaParameter: function(id) {
-            this.set('area', id);
+        setlocationQueryParam: function(id) {
+            this.set('locationQueryParam', id);
+            this.refresh();
+            
         }
     }
 

--- a/cms/app-client/app/templates/tabs/carto.hbs	Thu Sep 22 15:42:12 2016 +0200
+++ b/cms/app-client/app/templates/tabs/carto.hbs	Thu Sep 22 22:57:06 2016 +0200
@@ -1,3 +1,3 @@
 <div id="tabs-carto">
-    {{ visu-carto geostats=areas area='setAreaParameter' }}
+    {{ visu-carto geostats=model setLocation='setlocationQueryParam' }}
 </div>
\ No newline at end of file