--- 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');
}
}