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