Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AmMaps - Uncaught TypeError: Cannot read property '0' of undefined #40

Closed
AaronONeill opened this issue Apr 4, 2017 · 3 comments
Closed

Comments

@AaronONeill
Copy link

Hi,

I have been building a prototype for a drilldown map (continents -> world -> country) and I have added labels at each stage which is working correctly.

I am now trying to update the maps labels (images) via a button click. The button simply updates the state where the label text is coming from. This is working fine if I click the button on the "Continent" view however if I click on "North America" for example, the map switches to World view and if I now click on the Update Labels button, it causes the following error:

amcharts3-react.js:154 Uncaught TypeError: Cannot read property '0' of undefined
at update (amcharts3-react.js:154)
at updateArray (amcharts3-react.js:121)
at update (amcharts3-react.js:148)
at updateObject (amcharts3-react.js:210)
at update (amcharts3-react.js:154)
at updateObject (amcharts3-react.js:210)
at update (amcharts3-react.js:154)
at updateArray (amcharts3-react.js:121)
at update (amcharts3-react.js:148)
at updateObject (amcharts3-react.js:210)
update @ amcharts3-react.js:154
updateArray @ amcharts3-react.js:121
update @ amcharts3-react.js:148
updateObject @ amcharts3-react.js:210
update @ amcharts3-react.js:154
updateObject @ amcharts3-react.js:210
update @ amcharts3-react.js:154
updateArray @ amcharts3-react.js:121
update @ amcharts3-react.js:148
updateObject @ amcharts3-react.js:210
update @ amcharts3-react.js:154
updateObject @ amcharts3-react.js:210
componentDidUpdate @ amcharts3-react.js:260
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:729
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:206
perform @ Transaction.js:153
perform @ Transaction.js:140
perform @ ReactUpdates.js:89
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:206
perform @ Transaction.js:153
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147

Below is the React application so far:

import React from 'react';
import ReactDOM from 'react-dom';
import AmCharts from '@amcharts/amcharts3-react';
import 'ammap3/ammap/ammap.js';
import 'ammap3/ammap/maps/js/continentsLow.js';
import 'ammap3/ammap/maps/js/worldHigh.js';

import 'ammap3/ammap/maps/js/usa2High.js';
import 'ammap3/ammap/maps/js/canadaHigh.js';
import 'ammap3/ammap/maps/js/unitedKingdomHigh.js';
import 'ammap3/ammap/maps/js/switzerlandHigh.js';
import 'ammap3/ammap/maps/js/swedenHigh.js';
import 'ammap3/ammap/maps/js/spainHigh.js';
import 'ammap3/ammap/maps/js/singaporeHigh.js';
import 'ammap3/ammap/maps/js/norwayHigh.js';
import 'ammap3/ammap/maps/js/netherlandsHigh.js';
import 'ammap3/ammap/maps/js/newZealandHigh.js';
import 'ammap3/ammap/maps/js/luxembourgHigh.js';
import 'ammap3/ammap/maps/js/japanHigh.js';
import 'ammap3/ammap/maps/js/italyHigh.js';
import 'ammap3/ammap/maps/js/irelandHigh.js';
import 'ammap3/ammap/maps/js/hungaryHigh.js';
import 'ammap3/ammap/maps/js/germanyHigh.js';
import 'ammap3/ammap/maps/js/franceHigh.js';
import 'ammap3/ammap/maps/js/finlandHigh.js';
import 'ammap3/ammap/maps/js/denmarkHigh.js';
import 'ammap3/ammap/maps/js/czechRepublicHigh.js';
import 'ammap3/ammap/maps/js/chinaHigh.js';
import 'ammap3/ammap/maps/js/canadaHigh.js';
import 'ammap3/ammap/maps/js/belgiumHigh.js';
import 'ammap3/ammap/maps/js/austriaHigh.js';
import 'ammap3/ammap/maps/js/australiaHigh.js';
import 'ammap3/ammap/maps/js/southAfricaHigh.js';
import 'ammap3/ammap/maps/js/southKoreaHigh.js';
import 'ammap3/ammap/maps/js/chileHigh.js';

export default class Application extends React.Component {
	
	constructor(props) {
    super(props);
    
		this.state = {
			mapstyle: {
				width: '100%',
				height: '500px'
			},
			counts: {
				continents: {
					europe: 100,
					north_america: 400
				},
				countries: {
					US: 350,
					CA: 50
				}
			},
			defaultProvider: {},
			mapconfig: {
				type: "map",
				theme: "light",
				areasSettings: {
					autoZoom: true,
					rollOverOutlineColor: "#9a7bca",
					selectedColor: "#9a7bca",
					color: "#a791b4",
					rollOverColor: "#9a7bca"
				},
				dataProvider: {
					"map": "continentsLow",
				},
				listeners: [
					{
						event: "clickMapObject",
						method: this.onMapClick
					},
					{
						event: "dataUpdated",
						method: this.onDataUpdated
					}
				]
			},
			maps: [
				{country:'US', map:'usa2High'},
				{country:'GB', map:'unitedKingdomHigh'},
				{country:'CH', map:'switzerlandHigh'},
				{country:'SE', map:'swedenHigh'},
				{country:'ES', map:'spainHigh'},
				{country:'SG', map:'singaporeHigh'},
				{country:'NO', map:'norwayHigh'},
				{country:'NL', map:'netherlandsHigh'},
				{country:'NZ', map:'newZealandHigh'},
				{country:'LU', map:'luxembourgHigh'},
				{country:'JP', map:'japanHigh'},
				{country:'IL', map:'isrealHigh'},
				{country:'IT', map:'italyHigh'},
				{country:'IE', map:'irelandHigh'},
				{country:'HU', map:'hungaryHigh'},
				{country:'DE', map:'germanyHigh'},
				{country:'FR', map:'franceHigh'},
				{country:'FI', map:'finlandHigh'},
				{country:'DK', map:'denmarkHigh'},
				{country:'CZ', map:'czechRepublicHigh'},
				{country:'CN', map:'chinaHigh'},
				{country:'CA', map:'canadaHigh'},
				{country:'BE', map:'belgiumHigh'},
				{country:'AT', map:'austriaHigh'},
				{country:'AU', map:'australiaHigh'},
				{country:'ZA', map:'southAfricaHigh'},
				{country:'KR', map:'southKoreaHigh'},
				{country:'CL', map:'chileHigh'}
			]
		};
		
		this.renderMap 			= this.renderMap.bind(this);
		this.onDataUpdated 	= this.onDataUpdated.bind(this);
		this.onMapClick 		= this.onMapClick.bind(this);
		this.getLatLong 		= this.getLatLong.bind(this);
		this.changeLabel 		= this.changeLabel.bind(this);
		
  }
	
	changeLabel(event) {
		console.log("Changing Labels");
		
		//var mapConfig = this.state.mapconfig;
		//var defaultProvider = this.state.defaultProvider;
		//mapConfig.dataProvider = defaultProvider;
		
		this.setState({
			counts: {
				continents: {
					europe: 10,
					north_america: 100
				},
				countries: {
					US: 50,
					CA: 4
				}
			}
		}, function() {
			
			this.renderMap();
			
		});
	}
	
	onDataUpdated(event) {
		console.log("Data Updated!");
		console.log(event);
		
	}
	
	onMapClick(event) {
		//console.log(event);
	}
	
	getLatLong(area) {

		var latlong = {};
		latlong["AD"] = {"latitude":42.5, "longitude":1.5};
		latlong["AE"] = {"latitude":24, "longitude":54};
		latlong["AF"] = {"latitude":33, "longitude":65};
		latlong["AG"] = {"latitude":17.05, "longitude":-61.8};
		latlong["AI"] = {"latitude":18.25, "longitude":-63.1667};
		latlong["AL"] = {"latitude":41, "longitude":20};
		latlong["AM"] = {"latitude":40, "longitude":45};
		latlong["AN"] = {"latitude":12.25, "longitude":-68.75};
		latlong["AO"] = {"latitude":-12.5, "longitude":18.5};
		latlong["AP"] = {"latitude":35, "longitude":105};
		latlong["AQ"] = {"latitude":-90, "longitude":0};
		latlong["AR"] = {"latitude":-34, "longitude":-64};
		latlong["AS"] = {"latitude":-14.3333, "longitude":-170};
		latlong["AT"] = {"latitude":47.3333, "longitude":13.3333};
		latlong["AU"] = {"latitude":-27, "longitude":133};
		latlong["AW"] = {"latitude":12.5, "longitude":-69.9667};
		latlong["AZ"] = {"latitude":40.5, "longitude":47.5};
		latlong["BA"] = {"latitude":44, "longitude":18};
		latlong["BB"] = {"latitude":13.1667, "longitude":-59.5333};
		latlong["BD"] = {"latitude":24, "longitude":90};
		latlong["BE"] = {"latitude":50.8333, "longitude":4};
		latlong["BF"] = {"latitude":13, "longitude":-2};
		latlong["BG"] = {"latitude":43, "longitude":25};
		latlong["BH"] = {"latitude":26, "longitude":50.55};
		latlong["BI"] = {"latitude":-3.5, "longitude":30};
		latlong["BJ"] = {"latitude":9.5, "longitude":2.25};
		latlong["BM"] = {"latitude":32.3333, "longitude":-64.75};
		latlong["BN"] = {"latitude":4.5, "longitude":114.6667};
		latlong["BO"] = {"latitude":-17, "longitude":-65};
		latlong["BR"] = {"latitude":-10, "longitude":-55};
		latlong["BS"] = {"latitude":24.25, "longitude":-76};
		latlong["BT"] = {"latitude":27.5, "longitude":90.5};
		latlong["BV"] = {"latitude":-54.4333, "longitude":3.4};
		latlong["BW"] = {"latitude":-22, "longitude":24};
		latlong["BY"] = {"latitude":53, "longitude":28};
		latlong["BZ"] = {"latitude":17.25, "longitude":-88.75};
		latlong["CA"] = {"latitude":54, "longitude":-100};
		latlong["CC"] = {"latitude":-12.5, "longitude":96.8333};
		latlong["CD"] = {"latitude":0, "longitude":25};
		latlong["CF"] = {"latitude":7, "longitude":21};
		latlong["CG"] = {"latitude":-1, "longitude":15};
		latlong["CH"] = {"latitude":47, "longitude":8};
		latlong["CI"] = {"latitude":8, "longitude":-5};
		latlong["CK"] = {"latitude":-21.2333, "longitude":-159.7667};
		latlong["CL"] = {"latitude":-30, "longitude":-71};
		latlong["CM"] = {"latitude":6, "longitude":12};
		latlong["CN"] = {"latitude":35, "longitude":105};
		latlong["CO"] = {"latitude":4, "longitude":-72};
		latlong["CR"] = {"latitude":10, "longitude":-84};
		latlong["CU"] = {"latitude":21.5, "longitude":-80};
		latlong["CV"] = {"latitude":16, "longitude":-24};
		latlong["CX"] = {"latitude":-10.5, "longitude":105.6667};
		latlong["CY"] = {"latitude":35, "longitude":33};
		latlong["CZ"] = {"latitude":49.75, "longitude":15.5};
		latlong["DE"] = {"latitude":51, "longitude":9};
		latlong["DJ"] = {"latitude":11.5, "longitude":43};
		latlong["DK"] = {"latitude":56, "longitude":10};
		latlong["DM"] = {"latitude":15.4167, "longitude":-61.3333};
		latlong["DO"] = {"latitude":19, "longitude":-70.6667};
		latlong["DZ"] = {"latitude":28, "longitude":3};
		latlong["EC"] = {"latitude":-2, "longitude":-77.5};
		latlong["EE"] = {"latitude":59, "longitude":26};
		latlong["EG"] = {"latitude":27, "longitude":30};
		latlong["EH"] = {"latitude":24.5, "longitude":-13};
		latlong["ER"] = {"latitude":15, "longitude":39};
		latlong["ES"] = {"latitude":40, "longitude":-4};
		latlong["ET"] = {"latitude":8, "longitude":38};
		latlong["EU"] = {"latitude":47, "longitude":8};
		latlong["FI"] = {"latitude":62, "longitude":26};
		latlong["FJ"] = {"latitude":-18, "longitude":175};
		latlong["FK"] = {"latitude":-51.75, "longitude":-59};
		latlong["FM"] = {"latitude":6.9167, "longitude":158.25};
		latlong["FO"] = {"latitude":62, "longitude":-7};
		latlong["FR"] = {"latitude":46, "longitude":2};
		latlong["GA"] = {"latitude":-1, "longitude":11.75};
		latlong["GB"] = {"latitude":54, "longitude":-2};
		latlong["GD"] = {"latitude":12.1167, "longitude":-61.6667};
		latlong["GE"] = {"latitude":42, "longitude":43.5};
		latlong["GF"] = {"latitude":4, "longitude":-53};
		latlong["GH"] = {"latitude":8, "longitude":-2};
		latlong["GI"] = {"latitude":36.1833, "longitude":-5.3667};
		latlong["GL"] = {"latitude":72, "longitude":-40};
		latlong["GM"] = {"latitude":13.4667, "longitude":-16.5667};
		latlong["GN"] = {"latitude":11, "longitude":-10};
		latlong["GP"] = {"latitude":16.25, "longitude":-61.5833};
		latlong["GQ"] = {"latitude":2, "longitude":10};
		latlong["GR"] = {"latitude":39, "longitude":22};
		latlong["GS"] = {"latitude":-54.5, "longitude":-37};
		latlong["GT"] = {"latitude":15.5, "longitude":-90.25};
		latlong["GU"] = {"latitude":13.4667, "longitude":144.7833};
		latlong["GW"] = {"latitude":12, "longitude":-15};
		latlong["GY"] = {"latitude":5, "longitude":-59};
		latlong["HK"] = {"latitude":22.25, "longitude":114.1667};
		latlong["HM"] = {"latitude":-53.1, "longitude":72.5167};
		latlong["HN"] = {"latitude":15, "longitude":-86.5};
		latlong["HR"] = {"latitude":45.1667, "longitude":15.5};
		latlong["HT"] = {"latitude":19, "longitude":-72.4167};
		latlong["HU"] = {"latitude":47, "longitude":20};
		latlong["ID"] = {"latitude":-5, "longitude":120};
		latlong["IE"] = {"latitude":53, "longitude":-8};
		latlong["IL"] = {"latitude":31.5, "longitude":34.75};
		latlong["IN"] = {"latitude":20, "longitude":77};
		latlong["IO"] = {"latitude":-6, "longitude":71.5};
		latlong["IQ"] = {"latitude":33, "longitude":44};
		latlong["IR"] = {"latitude":32, "longitude":53};
		latlong["IS"] = {"latitude":65, "longitude":-18};
		latlong["IT"] = {"latitude":42.8333, "longitude":12.8333};
		latlong["JM"] = {"latitude":18.25, "longitude":-77.5};
		latlong["JO"] = {"latitude":31, "longitude":36};
		latlong["JP"] = {"latitude":36, "longitude":138};
		latlong["KE"] = {"latitude":1, "longitude":38};
		latlong["KG"] = {"latitude":41, "longitude":75};
		latlong["KH"] = {"latitude":13, "longitude":105};
		latlong["KI"] = {"latitude":1.4167, "longitude":173};
		latlong["KM"] = {"latitude":-12.1667, "longitude":44.25};
		latlong["KN"] = {"latitude":17.3333, "longitude":-62.75};
		latlong["KP"] = {"latitude":40, "longitude":127};
		latlong["KR"] = {"latitude":37, "longitude":127.5};
		latlong["KW"] = {"latitude":29.3375, "longitude":47.6581};
		latlong["KY"] = {"latitude":19.5, "longitude":-80.5};
		latlong["KZ"] = {"latitude":48, "longitude":68};
		latlong["LA"] = {"latitude":18, "longitude":105};
		latlong["LB"] = {"latitude":33.8333, "longitude":35.8333};
		latlong["LC"] = {"latitude":13.8833, "longitude":-61.1333};
		latlong["LI"] = {"latitude":47.1667, "longitude":9.5333};
		latlong["LK"] = {"latitude":7, "longitude":81};
		latlong["LR"] = {"latitude":6.5, "longitude":-9.5};
		latlong["LS"] = {"latitude":-29.5, "longitude":28.5};
		latlong["LT"] = {"latitude":55, "longitude":24};
		latlong["LU"] = {"latitude":49.75, "longitude":6};
		latlong["LV"] = {"latitude":57, "longitude":25};
		latlong["LY"] = {"latitude":25, "longitude":17};
		latlong["MA"] = {"latitude":32, "longitude":-5};
		latlong["MC"] = {"latitude":43.7333, "longitude":7.4};
		latlong["MD"] = {"latitude":47, "longitude":29};
		latlong["ME"] = {"latitude":42.5, "longitude":19.4};
		latlong["MG"] = {"latitude":-20, "longitude":47};
		latlong["MH"] = {"latitude":9, "longitude":168};
		latlong["MK"] = {"latitude":41.8333, "longitude":22};
		latlong["ML"] = {"latitude":17, "longitude":-4};
		latlong["MM"] = {"latitude":22, "longitude":98};
		latlong["MN"] = {"latitude":46, "longitude":105};
		latlong["MO"] = {"latitude":22.1667, "longitude":113.55};
		latlong["MP"] = {"latitude":15.2, "longitude":145.75};
		latlong["MQ"] = {"latitude":14.6667, "longitude":-61};
		latlong["MR"] = {"latitude":20, "longitude":-12};
		latlong["MS"] = {"latitude":16.75, "longitude":-62.2};
		latlong["MT"] = {"latitude":35.8333, "longitude":14.5833};
		latlong["MU"] = {"latitude":-20.2833, "longitude":57.55};
		latlong["MV"] = {"latitude":3.25, "longitude":73};
		latlong["MW"] = {"latitude":-13.5, "longitude":34};
		latlong["MX"] = {"latitude":23, "longitude":-102};
		latlong["MY"] = {"latitude":2.5, "longitude":112.5};
		latlong["MZ"] = {"latitude":-18.25, "longitude":35};
		latlong["NA"] = {"latitude":-22, "longitude":17};
		latlong["NC"] = {"latitude":-21.5, "longitude":165.5};
		latlong["NE"] = {"latitude":16, "longitude":8};
		latlong["NF"] = {"latitude":-29.0333, "longitude":167.95};
		latlong["NG"] = {"latitude":10, "longitude":8};
		latlong["NI"] = {"latitude":13, "longitude":-85};
		latlong["NL"] = {"latitude":52.5, "longitude":5.75};
		latlong["NO"] = {"latitude":62, "longitude":10};
		latlong["NP"] = {"latitude":28, "longitude":84};
		latlong["NR"] = {"latitude":-0.5333, "longitude":166.9167};
		latlong["NU"] = {"latitude":-19.0333, "longitude":-169.8667};
		latlong["NZ"] = {"latitude":-41, "longitude":174};
		latlong["OM"] = {"latitude":21, "longitude":57};
		latlong["PA"] = {"latitude":9, "longitude":-80};
		latlong["PE"] = {"latitude":-10, "longitude":-76};
		latlong["PF"] = {"latitude":-15, "longitude":-140};
		latlong["PG"] = {"latitude":-6, "longitude":147};
		latlong["PH"] = {"latitude":13, "longitude":122};
		latlong["PK"] = {"latitude":30, "longitude":70};
		latlong["PL"] = {"latitude":52, "longitude":20};
		latlong["PM"] = {"latitude":46.8333, "longitude":-56.3333};
		latlong["PR"] = {"latitude":18.25, "longitude":-66.5};
		latlong["PS"] = {"latitude":32, "longitude":35.25};
		latlong["PT"] = {"latitude":39.5, "longitude":-8};
		latlong["PW"] = {"latitude":7.5, "longitude":134.5};
		latlong["PY"] = {"latitude":-23, "longitude":-58};
		latlong["QA"] = {"latitude":25.5, "longitude":51.25};
		latlong["RE"] = {"latitude":-21.1, "longitude":55.6};
		latlong["RO"] = {"latitude":46, "longitude":25};
		latlong["RS"] = {"latitude":44, "longitude":21};
		latlong["RU"] = {"latitude":60, "longitude":100};
		latlong["RW"] = {"latitude":-2, "longitude":30};
		latlong["SA"] = {"latitude":25, "longitude":45};
		latlong["SB"] = {"latitude":-8, "longitude":159};
		latlong["SC"] = {"latitude":-4.5833, "longitude":55.6667};
		latlong["SD"] = {"latitude":15, "longitude":30};
		latlong["SE"] = {"latitude":62, "longitude":15};
		latlong["SG"] = {"latitude":1.3667, "longitude":103.8};
		latlong["SH"] = {"latitude":-15.9333, "longitude":-5.7};
		latlong["SI"] = {"latitude":46, "longitude":15};
		latlong["SJ"] = {"latitude":78, "longitude":20};
		latlong["SK"] = {"latitude":48.6667, "longitude":19.5};
		latlong["SL"] = {"latitude":8.5, "longitude":-11.5};
		latlong["SM"] = {"latitude":43.7667, "longitude":12.4167};
		latlong["SN"] = {"latitude":14, "longitude":-14};
		latlong["SO"] = {"latitude":10, "longitude":49};
		latlong["SR"] = {"latitude":4, "longitude":-56};
		latlong["ST"] = {"latitude":1, "longitude":7};
		latlong["SV"] = {"latitude":13.8333, "longitude":-88.9167};
		latlong["SY"] = {"latitude":35, "longitude":38};
		latlong["SZ"] = {"latitude":-26.5, "longitude":31.5};
		latlong["TC"] = {"latitude":21.75, "longitude":-71.5833};
		latlong["TD"] = {"latitude":15, "longitude":19};
		latlong["TF"] = {"latitude":-43, "longitude":67};
		latlong["TG"] = {"latitude":8, "longitude":1.1667};
		latlong["TH"] = {"latitude":15, "longitude":100};
		latlong["TJ"] = {"latitude":39, "longitude":71};
		latlong["TK"] = {"latitude":-9, "longitude":-172};
		latlong["TM"] = {"latitude":40, "longitude":60};
		latlong["TN"] = {"latitude":34, "longitude":9};
		latlong["TO"] = {"latitude":-20, "longitude":-175};
		latlong["TR"] = {"latitude":39, "longitude":35};
		latlong["TT"] = {"latitude":11, "longitude":-61};
		latlong["TV"] = {"latitude":-8, "longitude":178};
		latlong["TW"] = {"latitude":23.5, "longitude":121};
		latlong["TZ"] = {"latitude":-6, "longitude":35};
		latlong["UA"] = {"latitude":49, "longitude":32};
		latlong["UG"] = {"latitude":1, "longitude":32};
		latlong["UM"] = {"latitude":19.2833, "longitude":166.6};
		latlong["US"] = {"latitude":38, "longitude":-97};
		latlong["UY"] = {"latitude":-33, "longitude":-56};
		latlong["UZ"] = {"latitude":41, "longitude":64};
		latlong["VA"] = {"latitude":41.9, "longitude":12.45};
		latlong["VC"] = {"latitude":13.25, "longitude":-61.2};
		latlong["VE"] = {"latitude":8, "longitude":-66};
		latlong["VG"] = {"latitude":18.5, "longitude":-64.5};
		latlong["VI"] = {"latitude":18.3333, "longitude":-64.8333};
		latlong["VN"] = {"latitude":16, "longitude":106};
		latlong["VU"] = {"latitude":-16, "longitude":167};
		latlong["WF"] = {"latitude":-13.3, "longitude":-176.2};
		latlong["WS"] = {"latitude":-13.5833, "longitude":-172.3333};
		latlong["YE"] = {"latitude":15, "longitude":48};
		latlong["YT"] = {"latitude":-12.8333, "longitude":45.1667};
		latlong["ZA"] = {"latitude":-29, "longitude":24};
		latlong["ZM"] = {"latitude":-15, "longitude":30};
		latlong["ZW"] = {"latitude":-20, "longitude":30};
		
		return latlong[area];
		
	}
	
	renderMap() {
		
		// Icons
		var icon = "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z";
		var backIconSVG = "M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466zM27.436,17.39c0.001,0.002,0.004,0.002,0.005,0.004c-0.022,0.187-0.054,0.37-0.085,0.554c-0.015-0.012-0.034-0.025-0.047-0.036c-0.103-0.09-0.254-0.128-0.318-0.115c-0.157,0.032,0.229,0.305,0.267,0.342c0.009,0.009,0.031,0.03,0.062,0.058c-1.029,5.312-5.709,9.338-11.319,9.338c-4.123,0-7.736-2.18-9.776-5.441c0.123-0.016,0.24-0.016,0.28-0.076c0.051-0.077,0.102-0.241,0.178-0.331c0.077-0.089,0.165-0.229,0.127-0.292c-0.039-0.064,0.101-0.344,0.088-0.419c-0.013-0.076-0.127-0.256,0.064-0.407s0.394-0.382,0.407-0.444c0.012-0.063,0.166-0.331,0.152-0.458c-0.012-0.127-0.152-0.28-0.24-0.318c-0.09-0.037-0.28-0.05-0.356-0.151c-0.077-0.103-0.292-0.203-0.368-0.178c-0.076,0.025-0.204,0.05-0.305-0.015c-0.102-0.062-0.267-0.139-0.33-0.189c-0.065-0.05-0.229-0.088-0.305-0.088c-0.077,0-0.065-0.052-0.178,0.101c-0.114,0.153,0,0.204-0.204,0.177c-0.204-0.023,0.025-0.036,0.141-0.189c0.113-0.152-0.013-0.242-0.141-0.203c-0.126,0.038-0.038,0.115-0.241,0.153c-0.203,0.036-0.203-0.09-0.076-0.115s0.355-0.139,0.355-0.19c0-0.051-0.025-0.191-0.127-0.191s-0.077-0.126-0.229-0.291c-0.092-0.101-0.196-0.164-0.299-0.204c-0.09-0.579-0.15-1.167-0.15-1.771c0-2.844,1.039-5.446,2.751-7.458c0.024-0.02,0.048-0.034,0.069-0.036c0.084-0.009,0.31-0.025,0.51-0.059c0.202-0.034,0.418-0.161,0.489-0.153c0.069,0.008,0.241,0.008,0.186-0.042C8.417,8.2,8.339,8.082,8.223,8.082S8.215,7.896,8.246,7.896c0.03,0,0.186,0.025,0.178,0.11C8.417,8.091,8.471,8.2,8.625,8.167c0.156-0.034,0.132-0.162,0.102-0.195C8.695,7.938,8.672,7.853,8.642,7.794c-0.031-0.06-0.023-0.136,0.14-0.153C8.944,7.625,9.168,7.708,9.16,7.573s0-0.28,0.046-0.356C9.253,7.142,9.354,7.09,9.299,7.065C9.246,7.04,9.176,7.099,9.121,6.972c-0.054-0.127,0.047-0.22,0.108-0.271c0.02-0.015,0.067-0.06,0.124-0.112C11.234,5.257,13.524,4.466,16,4.466c3.213,0,6.122,1.323,8.214,3.45c-0.008,0.022-0.01,0.052-0.031,0.056c-0.077,0.013-0.166,0.063-0.179-0.051c-0.013-0.114-0.013-0.331-0.102-0.203c-0.089,0.127-0.127,0.127-0.127,0.191c0,0.063,0.076,0.127,0.051,0.241C23.8,8.264,23.8,8.341,23.84,8.341c0.036,0,0.126-0.115,0.239-0.141c0.116-0.025,0.319-0.088,0.332,0.026c0.013,0.115,0.139,0.152,0.013,0.203c-0.128,0.051-0.267,0.026-0.293-0.051c-0.025-0.077-0.114-0.077-0.203-0.013c-0.088,0.063-0.279,0.292-0.279,0.292s-0.306,0.139-0.343,0.114c-0.04-0.025,0.101-0.165,0.203-0.228c0.102-0.064,0.178-0.204,0.14-0.242c-0.038-0.038-0.088-0.279-0.063-0.343c0.025-0.063,0.139-0.152,0.013-0.216c-0.127-0.063-0.217-0.14-0.318-0.178s-0.216,0.152-0.305,0.204c-0.089,0.051-0.076,0.114-0.191,0.127c-0.114,0.013-0.189,0.165,0,0.254c0.191,0.089,0.255,0.152,0.204,0.204c-0.051,0.051-0.267-0.025-0.267-0.025s-0.165-0.076-0.268-0.076c-0.101,0-0.229-0.063-0.33-0.076c-0.102-0.013-0.306-0.013-0.355,0.038c-0.051,0.051-0.179,0.203-0.28,0.152c-0.101-0.051-0.101-0.102-0.241-0.051c-0.14,0.051-0.279-0.038-0.355,0.038c-0.077,0.076-0.013,0.076-0.255,0c-0.241-0.076-0.189,0.051-0.419,0.089s-0.368-0.038-0.432,0.038c-0.064,0.077-0.153,0.217-0.19,0.127c-0.038-0.088,0.126-0.241,0.062-0.292c-0.062-0.051-0.33-0.025-0.367,0.013c-0.039,0.038-0.014,0.178,0.011,0.229c0.026,0.05,0.064,0.254-0.011,0.216c-0.077-0.038-0.064-0.166-0.141-0.152c-0.076,0.013-0.165,0.051-0.203,0.077c-0.038,0.025-0.191,0.025-0.229,0.076c-0.037,0.051,0.014,0.191-0.051,0.203c-0.063,0.013-0.114,0.064-0.254-0.025c-0.14-0.089-0.14-0.038-0.178-0.012c-0.038,0.025-0.216,0.127-0.229,0.012c-0.013-0.114,0.025-0.152-0.089-0.229c-0.115-0.076-0.026-0.076,0.127-0.025c0.152,0.05,0.343,0.075,0.622-0.013c0.28-0.089,0.395-0.127,0.28-0.178c-0.115-0.05-0.229-0.101-0.406-0.127c-0.179-0.025-0.42-0.025-0.7-0.127c-0.279-0.102-0.343-0.14-0.457-0.165c-0.115-0.026-0.813-0.14-1.132-0.089c-0.317,0.051-1.193,0.28-1.245,0.318s-0.128,0.19-0.292,0.318c-0.165,0.127-0.47,0.419-0.712,0.47c-0.241,0.051-0.521,0.254-0.521,0.305c0,0.051,0.101,0.242,0.076,0.28c-0.025,0.038,0.05,0.229,0.191,0.28c0.139,0.05,0.381,0.038,0.393-0.039c0.014-0.076,0.204-0.241,0.217-0.127c0.013,0.115,0.14,0.292,0.114,0.368c-0.025,0.077,0,0.153,0.09,0.14c0.088-0.012,0.559-0.114,0.559-0.114s0.153-0.064,0.127-0.166c-0.026-0.101,0.166-0.241,0.203-0.279c0.038-0.038,0.178-0.191,0.014-0.241c-0.167-0.051-0.293-0.064-0.115-0.216s0.292,0,0.521-0.229c0.229-0.229-0.051-0.292,0.191-0.305c0.241-0.013,0.496-0.025,0.444,0.051c-0.05,0.076-0.342,0.242-0.508,0.318c-0.166,0.077-0.14,0.216-0.076,0.292c0.063,0.076,0.09,0.254,0.204,0.229c0.113-0.025,0.254-0.114,0.38-0.101c0.128,0.012,0.383-0.013,0.42-0.013c0.039,0,0.216,0.178,0.114,0.203c-0.101,0.025-0.229,0.013-0.445,0.025c-0.215,0.013-0.456,0.013-0.456,0.051c0,0.039,0.292,0.127,0.19,0.191c-0.102,0.063-0.203-0.013-0.331-0.026c-0.127-0.012-0.203,0.166-0.241,0.267c-0.039,0.102,0.063,0.28-0.127,0.216c-0.191-0.063-0.331-0.063-0.381-0.038c-0.051,0.025-0.203,0.076-0.331,0.114c-0.126,0.038-0.076-0.063-0.242-0.063c-0.164,0-0.164,0-0.164,0l-0.103,0.013c0,0-0.101-0.063-0.114-0.165c-0.013-0.102,0.05-0.216-0.013-0.241c-0.064-0.026-0.292,0.012-0.33,0.088c-0.038,0.076-0.077,0.216-0.026,0.28c0.052,0.063,0.204,0.19,0.064,0.152c-0.14-0.038-0.317-0.051-0.419,0.026c-0.101,0.076-0.279,0.241-0.279,0.241s-0.318,0.025-0.318,0.102c0,0.077,0,0.178-0.114,0.191c-0.115,0.013-0.268,0.05-0.42,0.076c-0.153,0.025-0.139,0.088-0.317,0.102s-0.204,0.089-0.038,0.114c0.165,0.025,0.418,0.127,0.431,0.241c0.014,0.114-0.013,0.242-0.076,0.356c-0.043,0.079-0.305,0.026-0.458,0.026c-0.152,0-0.456-0.051-0.584,0c-0.127,0.051-0.102,0.305-0.064,0.419c0.039,0.114-0.012,0.178-0.063,0.216c-0.051,0.038-0.065,0.152,0,0.204c0.063,0.051,0.114,0.165,0.166,0.178c0.051,0.013,0.215-0.038,0.279,0.025c0.064,0.064,0.127,0.216,0.165,0.178c0.039-0.038,0.089-0.203,0.153-0.166c0.064,0.039,0.216-0.012,0.331-0.025s0.177-0.14,0.292-0.204c0.114-0.063,0.05-0.063,0.013-0.14c-0.038-0.076,0.114-0.165,0.204-0.254c0.088-0.089,0.253-0.013,0.292-0.115c0.038-0.102,0.051-0.279,0.151-0.267c0.103,0.013,0.243,0.076,0.331,0.076c0.089,0,0.279-0.14,0.332-0.165c0.05-0.025,0.241-0.013,0.267,0.102c0.025,0.114,0.241,0.254,0.292,0.279c0.051,0.025,0.381,0.127,0.433,0.165c0.05,0.038,0.126,0.153,0.152,0.254c0.025,0.102,0.114,0.102,0.128,0.013c0.012-0.089-0.065-0.254,0.025-0.242c0.088,0.013,0.191-0.026,0.191-0.026s-0.243-0.165-0.331-0.203c-0.088-0.038-0.255-0.114-0.331-0.241c-0.076-0.127-0.267-0.153-0.254-0.279c0.013-0.127,0.191-0.051,0.292,0.051c0.102,0.102,0.356,0.241,0.445,0.33c0.088,0.089,0.229,0.127,0.267,0.242c0.039,0.114,0.152,0.241,0.19,0.292c0.038,0.051,0.165,0.331,0.204,0.394c0.038,0.063,0.165-0.012,0.229-0.063c0.063-0.051,0.179-0.076,0.191-0.178c0.013-0.102-0.153-0.178-0.203-0.216c-0.051-0.038,0.127-0.076,0.191-0.127c0.063-0.05,0.177-0.14,0.228-0.063c0.051,0.077,0.026,0.381,0.051,0.432c0.025,0.051,0.279,0.127,0.331,0.191c0.05,0.063,0.267,0.089,0.304,0.051c0.039-0.038,0.242,0.026,0.294,0.038c0.049,0.013,0.202-0.025,0.304-0.05c0.103-0.025,0.204-0.102,0.191,0.063c-0.013,0.165-0.051,0.419-0.179,0.546c-0.127,0.127-0.076,0.191-0.202,0.191c-0.06,0-0.113,0-0.156,0.021c-0.041-0.065-0.098-0.117-0.175-0.097c-0.152,0.038-0.344,0.038-0.47,0.19c-0.128,0.153-0.178,0.165-0.204,0.114c-0.025-0.051,0.369-0.267,0.317-0.331c-0.05-0.063-0.355-0.038-0.521-0.038c-0.166,0-0.305-0.102-0.433-0.127c-0.126-0.025-0.292,0.127-0.418,0.254c-0.128,0.127-0.216,0.038-0.331,0.038c-0.115,0-0.331-0.165-0.331-0.165s-0.216-0.089-0.305-0.089c-0.088,0-0.267-0.165-0.318-0.165c-0.05,0-0.19-0.115-0.088-0.166c0.101-0.05,0.202,0.051,0.101-0.229c-0.101-0.279-0.33-0.216-0.419-0.178c-0.088,0.039-0.724,0.025-0.775,0.025c-0.051,0-0.419,0.127-0.533,0.178c-0.116,0.051-0.318,0.115-0.369,0.14c-0.051,0.025-0.318-0.051-0.433,0.013c-0.151,0.084-0.291,0.216-0.33,0.216c-0.038,0-0.153,0.089-0.229,0.28c-0.077,0.19,0.013,0.355-0.128,0.419c-0.139,0.063-0.394,0.204-0.495,0.305c-0.102,0.101-0.229,0.458-0.355,0.623c-0.127,0.165,0,0.317,0.025,0.419c0.025,0.101,0.114,0.292-0.025,0.471c-0.14,0.178-0.127,0.266-0.191,0.279c-0.063,0.013,0.063,0.063,0.088,0.19c0.025,0.128-0.114,0.255,0.128,0.369c0.241,0.113,0.355,0.217,0.418,0.367c0.064,0.153,0.382,0.407,0.382,0.407s0.229,0.205,0.344,0.293c0.114,0.089,0.152,0.038,0.177-0.05c0.025-0.09,0.178-0.104,0.355-0.104c0.178,0,0.305,0.04,0.483,0.014c0.178-0.025,0.356-0.141,0.42-0.166c0.063-0.025,0.279-0.164,0.443-0.063c0.166,0.103,0.141,0.241,0.23,0.332c0.088,0.088,0.24,0.037,0.355-0.051c0.114-0.09,0.064-0.052,0.203,0.025c0.14,0.075,0.204,0.151,0.077,0.267c-0.128,0.113-0.051,0.293-0.128,0.47c-0.076,0.178-0.063,0.203,0.077,0.278c0.14,0.076,0.394,0.548,0.47,0.638c0.077,0.088-0.025,0.342,0.064,0.495c0.089,0.151,0.178,0.254,0.077,0.331c-0.103,0.075-0.28,0.216-0.292,0.47s0.051,0.431,0.102,0.521s0.177,0.331,0.241,0.419c0.064,0.089,0.14,0.305,0.152,0.445c0.013,0.14-0.024,0.306,0.039,0.381c0.064,0.076,0.102,0.191,0.216,0.292c0.115,0.103,0.152,0.318,0.152,0.318s0.039,0.089,0.051,0.229c0.012,0.14,0.025,0.228,0.152,0.292c0.126,0.063,0.215,0.076,0.28,0.013c0.063-0.063,0.381-0.077,0.546-0.063c0.165,0.013,0.355-0.075,0.521-0.19s0.407-0.419,0.496-0.508c0.089-0.09,0.292-0.255,0.268-0.356c-0.025-0.101-0.077-0.203,0.024-0.254c0.102-0.052,0.344-0.152,0.356-0.229c0.013-0.077-0.09-0.395-0.115-0.457c-0.024-0.064,0.064-0.18,0.165-0.306c0.103-0.128,0.421-0.216,0.471-0.267c0.051-0.053,0.191-0.267,0.217-0.433c0.024-0.167-0.051-0.369,0-0.457c0.05-0.09,0.013-0.165-0.103-0.268c-0.114-0.102-0.089-0.407-0.127-0.457c-0.037-0.051-0.013-0.319,0.063-0.345c0.076-0.023,0.242-0.279,0.344-0.393c0.102-0.114,0.394-0.47,0.534-0.496c0.139-0.025,0.355-0.229,0.368-0.343c0.013-0.115,0.38-0.547,0.394-0.635c0.013-0.09,0.166-0.42,0.102-0.497c-0.062-0.076-0.559,0.115-0.622,0.141c-0.064,0.025-0.241,0.127-0.446,0.113c-0.202-0.013-0.114-0.177-0.127-0.254c-0.012-0.076-0.228-0.368-0.279-0.381c-0.051-0.012-0.203-0.166-0.267-0.317c-0.063-0.153-0.152-0.343-0.254-0.458c-0.102-0.114-0.165-0.38-0.268-0.559c-0.101-0.178-0.189-0.407-0.279-0.572c-0.021-0.041-0.045-0.079-0.067-0.117c0.118-0.029,0.289-0.082,0.31-0.009c0.024,0.088,0.165,0.279,0.19,0.419s0.165,0.089,0.178,0.216c0.014,0.128,0.14,0.433,0.19,0.47c0.052,0.038,0.28,0.242,0.318,0.318c0.038,0.076,0.089,0.178,0.127,0.369c0.038,0.19,0.076,0.444,0.179,0.482c0.102,0.038,0.444-0.064,0.508-0.102s0.482-0.242,0.635-0.255c0.153-0.012,0.179-0.115,0.368-0.152c0.191-0.038,0.331-0.177,0.458-0.28c0.127-0.101,0.28-0.355,0.33-0.444c0.052-0.088,0.179-0.152,0.115-0.253c-0.063-0.103-0.331-0.254-0.433-0.268c-0.102-0.012-0.089-0.178-0.152-0.178s-0.051,0.088-0.178,0.153c-0.127,0.063-0.255,0.19-0.344,0.165s0.026-0.089-0.113-0.203s-0.192-0.14-0.192-0.228c0-0.089-0.278-0.255-0.304-0.382c-0.026-0.127,0.19-0.305,0.254-0.19c0.063,0.114,0.115,0.292,0.279,0.368c0.165,0.076,0.318,0.204,0.395,0.229c0.076,0.025,0.267-0.14,0.33-0.114c0.063,0.024,0.191,0.253,0.306,0.292c0.113,0.038,0.495,0.051,0.559,0.051s0.33,0.013,0.381-0.063c0.051-0.076,0.089-0.076,0.153-0.076c0.062,0,0.177,0.229,0.267,0.254c0.089,0.025,0.254,0.013,0.241,0.179c-0.012,0.164,0.076,0.305,0.165,0.317c0.09,0.012,0.293-0.191,0.293-0.191s0,0.318-0.012,0.433c-0.014,0.113,0.139,0.534,0.139,0.534s0.19,0.393,0.241,0.482s0.267,0.355,0.267,0.47c0,0.115,0.025,0.293,0.103,0.293c0.076,0,0.152-0.203,0.24-0.331c0.091-0.126,0.116-0.305,0.153-0.432c0.038-0.127,0.038-0.356,0.038-0.444c0-0.09,0.075-0.166,0.255-0.242c0.178-0.076,0.304-0.292,0.456-0.407c0.153-0.115,0.141-0.305,0.446-0.305c0.305,0,0.278,0,0.355-0.077c0.076-0.076,0.151-0.127,0.19,0.013c0.038,0.14,0.254,0.343,0.292,0.394c0.038,0.052,0.114,0.191,0.103,0.344c-0.013,0.152,0.012,0.33,0.075,0.33s0.191-0.216,0.191-0.216s0.279-0.189,0.267,0.013c-0.014,0.203,0.025,0.419,0.025,0.545c0,0.053,0.042,0.135,0.088,0.21c-0.005,0.059-0.004,0.119-0.009,0.178C27.388,17.153,27.387,17.327,27.436,17.39zM20.382,12.064c0.076,0.05,0.102,0.127,0.152,0.203c0.052,0.076,0.14,0.05,0.203,0.114c0.063,0.064-0.178,0.14-0.075,0.216c0.101,0.077,0.151,0.381,0.165,0.458c0.013,0.076-0.279,0.114-0.369,0.102c-0.089-0.013-0.354-0.102-0.445-0.127c-0.089-0.026-0.139-0.343-0.025-0.331c0.116,0.013,0.141-0.025,0.267-0.139c0.128-0.115-0.189-0.166-0.278-0.191c-0.089-0.025-0.268-0.305-0.331-0.394c-0.062-0.089-0.014-0.228,0.141-0.331c0.076-0.051,0.279,0.063,0.381,0c0.101-0.063,0.203-0.14,0.241-0.165c0.039-0.025,0.293,0.038,0.33,0.114c0.039,0.076,0.191,0.191,0.141,0.229c-0.052,0.038-0.281,0.076-0.356,0c-0.075-0.077-0.255,0.012-0.268,0.152C20.242,12.115,20.307,12.013,20.382,12.064zM16.875,12.28c-0.077-0.025,0.025-0.178,0.102-0.229c0.075-0.051,0.164-0.178,0.241-0.305c0.076-0.127,0.178-0.14,0.241-0.127c0.063,0.013,0.203,0.241,0.241,0.318c0.038,0.076,0.165-0.026,0.217-0.051c0.05-0.025,0.127-0.102,0.14-0.165s0.127-0.102,0.254-0.102s0.013,0.102-0.076,0.127c-0.09,0.025-0.038,0.077,0.113,0.127c0.153,0.051,0.293,0.191,0.459,0.279c0.165,0.089,0.19,0.267,0.088,0.292c-0.101,0.025-0.406,0.051-0.521,0.038c-0.114-0.013-0.254-0.127-0.419-0.153c-0.165-0.025-0.369-0.013-0.433,0.077s-0.292,0.05-0.395,0.05c-0.102,0-0.228,0.127-0.253,0.077C16.875,12.534,16.951,12.306,16.875,12.28zM17.307,9.458c0.063-0.178,0.419,0.038,0.355,0.127C17.599,9.675,17.264,9.579,17.307,9.458zM17.802,18.584c0.063,0.102-0.14,0.431-0.254,0.407c-0.113-0.027-0.076-0.318-0.038-0.382C17.548,18.545,17.769,18.529,17.802,18.584zM13.189,12.674c0.025-0.051-0.039-0.153-0.127-0.013C13.032,12.71,13.164,12.725,13.189,12.674zM20.813,8.035c0.141,0.076,0.339,0.107,0.433,0.013c0.076-0.076,0.013-0.204-0.05-0.216c-0.064-0.013-0.104-0.115,0.062-0.203c0.165-0.089,0.343-0.204,0.534-0.229c0.19-0.025,0.622-0.038,0.774,0c0.152,0.039,0.382-0.166,0.445-0.254s-0.203-0.152-0.279-0.051c-0.077,0.102-0.444,0.076-0.521,0.051c-0.076-0.025-0.686,0.102-0.812,0.102c-0.128,0-0.179,0.152-0.356,0.229c-0.179,0.076-0.42,0.191-0.509,0.229c-0.088,0.038-0.177,0.19-0.101,0.216C20.509,7.947,20.674,7.959,20.813,8.035zM14.142,12.674c0.064-0.089-0.051-0.217-0.114-0.217c-0.12,0-0.178,0.191-0.103,0.254C14.002,12.776,14.078,12.763,14.142,12.674zM14.714,13.017c0.064,0.025,0.114,0.102,0.165,0.114c0.052,0.013,0.217,0,0.167-0.127s-0.167-0.127-0.204-0.127c-0.038,0-0.203-0.038-0.267,0C14.528,12.905,14.65,12.992,14.714,13.017zM11.308,10.958c0.101,0.013,0.217-0.063,0.305-0.101c0.088-0.038,0.216-0.114,0.216-0.229c0-0.114-0.025-0.216-0.077-0.267c-0.051-0.051-0.14-0.064-0.216-0.051c-0.115,0.02-0.127,0.14-0.203,0.14c-0.076,0-0.165,0.025-0.14,0.114s0.077,0.152,0,0.19C11.117,10.793,11.205,10.946,11.308,10.958zM11.931,10.412c0.127,0.051,0.394,0.102,0.292,0.153c-0.102,0.051-0.28,0.19-0.305,0.267s0.216,0.153,0.216,0.153s-0.077,0.089-0.013,0.114c0.063,0.025,0.102-0.089,0.203-0.089c0.101,0,0.304,0.063,0.406,0.063c0.103,0,0.267-0.14,0.254-0.229c-0.013-0.089-0.14-0.229-0.254-0.28c-0.113-0.051-0.241-0.28-0.317-0.331c-0.076-0.051,0.076-0.178-0.013-0.267c-0.09-0.089-0.153-0.076-0.255-0.14c-0.102-0.063-0.191,0.013-0.254,0.089c-0.063,0.076-0.14-0.013-0.217,0.012c-0.102,0.035-0.063,0.166-0.012,0.229C11.714,10.221,11.804,10.361,11.931,10.412zM24.729,17.198c-0.083,0.037-0.153,0.47,0,0.521c0.152,0.052,0.241-0.202,0.191-0.267C24.868,17.39,24.843,17.147,24.729,17.198zM20.114,20.464c-0.159-0.045-0.177,0.166-0.304,0.306c-0.128,0.141-0.267,0.254-0.317,0.241c-0.052-0.013-0.331,0.089-0.242,0.279c0.089,0.191,0.076,0.382-0.013,0.472c-0.089,0.088,0.076,0.342,0.052,0.482c-0.026,0.139,0.037,0.229,0.215,0.229s0.242-0.064,0.318-0.229c0.076-0.166,0.088-0.331,0.164-0.47c0.077-0.141,0.141-0.434,0.179-0.51c0.038-0.075,0.114-0.316,0.102-0.457C20.254,20.669,20.204,20.489,20.114,20.464zM10.391,8.802c-0.069-0.06-0.229-0.102-0.306-0.11c-0.076-0.008-0.152,0.06-0.321,0.06c-0.168,0-0.279,0.067-0.347,0C9.349,8.684,9.068,8.65,9.042,8.692C9.008,8.749,8.941,8.751,9.008,8.87c0.069,0.118,0.12,0.186,0.179,0.178s0.262-0.017,0.288,0.051C9.5,9.167,9.569,9.226,9.712,9.184c0.145-0.042,0.263-0.068,0.296-0.119c0.033-0.051,0.263-0.059,0.263-0.059S10.458,8.861,10.391,8.802z";		
		
		const mapConfig = this.state.mapconfig; 
		var maps = this.state.maps;
		var worldDataProviderAreas = [];
		const backToContinents = { 
			"svgPath": backIconSVG, 
			"id": "contBackButton", 
			"label": "Back to continent map", 
			"labelColor": "#fffdcf",
			"labelRollOverColor": "#fffdcf",
			"color": "#e49224",
			"rollOverColor": "#f2a43c",
			"useTargetsZoomValues": false, 
			"left": 30, 
			"bottom": 30, 
			"labelFontSize": 15, 
			"selectable": true
		};
		const backToWorld = { 
			"svgPath": backIconSVG, 
			"id": "worldBackButton", 
			"label": "Back to world map", 
			"labelColor": "#fffdcf",
			"labelRollOverColor": "#fffdcf",
			"color": "#e49224",
			"rollOverColor": "#f2a43c",
			"useTargetsZoomValues": false, 
			"left": 30, 
			"bottom": 30, 
			"labelFontSize": 15, 
			"selectable": true
		};
		
		Object.keys(maps).forEach(function(key) {
			var mapObj = maps[key];			
			var area = {
				"id": mapObj.country,
				"linkToObject": {
					"map": mapObj.map,
					"getAreasFromMap": true,
					"images": [
						{
							"svgPath": icon,
							"color": "#e49224",
							"latitude": 38.013476,
							"longitude": -121.26709,
							"title": "COMPANY NAME",
							"description": "DESCRIPTION GOES HERE PER COMPANY"
						},
						{
							"svgPath": icon,
							"color": "#e49224",
							"latitude": 38.272689,
							"longitude": -85.759277,
							"title": "COMPANY NAME 2",
							"description": "DESCRIPTION GOES HERE PER COMPANY"
						},
						backToWorld
					],
				},
				"color": "#605675",
			};
			
			worldDataProviderAreas.push(area);
			
		});
		
		var worldDataProvider = {
			"map": "worldHigh",
			"getAreasFromMap": true,
			"areas": worldDataProviderAreas,
			"images": [
				{
					"type": "circle",
					"label": this.state.counts.countries.US,
					"labelColor": "#fffdcf",
					"labelRollOverColor": "#fffdcf",
					"color": "#e49224",
					"rollOverColor": "#f2a43c",
					"latitude": this.getLatLong("US").latitude,
					"longitude": this.getLatLong("US").longitude,
					"scale": 4,
					"labelShiftX": -20,
					"linkToObject": "US",
				},
				{
					"type": "circle",
					"label": this.state.counts.countries.CA,
					"labelColor": "#fffdcf",
					"labelRollOverColor": "#fffdcf",
					"color": "#e49224",
					"rollOverColor": "#f2a43c",
					"latitude": this.getLatLong("CA").latitude,
					"longitude": this.getLatLong("CA").longitude,
					"scale": 4,
					"labelShiftX": -20,
					"linkToObject": "CA",
				},
				{
					"type": "circle",
					"label": "8",
					"labelColor": "#fffdcf",
					"labelRollOverColor": "#fffdcf",
					"color": "#e49224",
					"rollOverColor": "#f2a43c",
					"latitude": this.getLatLong("GB").latitude,
					"longitude": this.getLatLong("GB").longitude,
					"scale": 2,
					"labelShiftX": -12,
					"linkToObject": "GB",
				},
				{
					"type": "circle",
					"label": "2",
					"labelColor": "#fffdcf",
					"labelRollOverColor": "#fffdcf",
					"color": "#e49224",
					"rollOverColor": "#f2a43c",
					"latitude": this.getLatLong("FR").latitude,
					"longitude": this.getLatLong("FR").longitude,
					"scale": 2,
					"labelShiftX": -12,
					"linkToObject": "FR",
				},
				backToContinents
			],
		};
		
		var continentsDataProvider = {
			"map": "continentsLow",
			"areas": [ 
				{
					"id": "africa",
					"linkToObject": worldDataProvider,
					"color": "#605675",
					"passZoomValuesToTarget": true
				}, {
					"id": "asia",
					"linkToObject": worldDataProvider,
					"color": "#a791b4",
					"passZoomValuesToTarget": true
				}, {
					"id": "australia",
					"linkToObject": worldDataProvider,
					"color": "#7f7891",
					"passZoomValuesToTarget": true
				}, {
					"id": "europe",
					"linkToObject": worldDataProvider,
					"color": "#9186a2",
					"passZoomValuesToTarget": true
				}, {
					"id": "north_america",
					"linkToObject": worldDataProvider,
					"color": "#868191",
					"passZoomValuesToTarget": true
				}, {
					"id": "south_america",
					"linkToObject": worldDataProvider,
					"color": "#8f7ea9",
					"passZoomValuesToTarget": true
				} 
			],
			"images": [
				{
					"type": "circle",
					"label": this.state.counts.continents.north_america,
					"labelColor": "#fffdcf",
					"labelRollOverColor": "#fffdcf",
					"color": "#e49224",
					"rollOverColor": "#f2a43c",
					"latitude": this.getLatLong("US").latitude,
					"longitude": this.getLatLong("US").longitude,
					"scale": 4,
					"labelShiftX": -20,
					"linkToObject": "north_america",
				},
				{
					"type": "circle",
					"label": this.state.counts.continents.europe,
					"labelColor": "#fffdcf",
					"labelRollOverColor": "#fffdcf",
					"color": "#e49224",
					"rollOverColor": "#f2a43c",
					"latitude": this.getLatLong("DE").latitude,
					"longitude": this.getLatLong("DE").longitude,
					"scale": 4,
					"labelShiftX": -20,
					"linkToObject": "europe",
				},
			],
		};
		
		console.log(continentsDataProvider);
		
		mapConfig.dataProvider = continentsDataProvider;
		
		this.setState({
			mapconfig: mapConfig,
			defaultProvider: continentsDataProvider
		});
		
	}
	
	componentDidMount() {
		
		this.renderMap();
		
	}
	
  render() {
		
    return (
			<div style={this.state.mapstyle}>
				<AmCharts.React
					ref="reactmap"
					{...this.state.mapconfig}
				/>
				<button onClick={()=> this.changeLabel()}>Change Labels</button>
			</div>
    );
  }
	
}

Here is the HTML page which displays the map (attached is the index.html with JS):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React Map</title>
	
	<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

	<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
	<script src="https://www.amcharts.com/lib/3/serial.js"></script>
	<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
	<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
	
</head>
<body>
	<h1>React AmCharts Map</h1>
	
	<!-- React element goes here -->
	<div id="react-map"></div>
	
	<script src="./js/jquery-3.1.1.min.js"></script>
	
	<!-- one script to rule them all (in production) -->
	<script src="js/tracker-map/tracker-map.js"></script>
	<script src="js/tracker-map/tracker-map-bundled.js"></script>
</body>
</html>

app.zip

@joesken
Copy link

joesken commented Apr 5, 2017

I've done a bit more investigations on this and have narrowed it down a bit.

For the scenario (based on the example code above) where you go from Continent View to Worldview and then try to change the state via the "Change Labels" button the issue is in line 150 of amcharts3-react.js.

It is trying to access a key which the object does not have:

            if (updateArray(obj[key], x, y)) {
              didUpdate = true;
            }

This was easily fixed by checking obj.hasOwnProperty(key)).

The second scenario is in the same area but a different issue. Under the scenario of going from Worldview to Country view and then updating the state the issue arises when setting the key for 'images'. The object is undefined. However it is an array of objects and the comparison on line 144 if (x !== y) is failing. (They are the same). Thus if this check was working correctly then it would never get to call updateArray(obj..).

Hope this helps.

Joe

@Pauan
Copy link
Collaborator

Pauan commented Apr 24, 2017

@AaronONeill Thanks for reporting this!

@joesken Thanks for the detailed information!

I'll look into fixing this ASAP.

Pauan added a commit that referenced this issue May 8, 2017
@Pauan
Copy link
Collaborator

Pauan commented May 8, 2017

@AaronONeill Sorry for the wait, I have fixed this in version 2.0.3

@Pauan Pauan closed this as completed May 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants