Link Map Areas

Hi there,

Setting autoZoom to false should disable zooming upon clicking of the area. I just tried it and it doesn’t zoom with your code.

That being said there are a few issues with your code.

1) areas should go into dataProvider. (you now have it in areasSettings.
2) areas is an array of objects. You currently have a single area object assigned to areas.

Here’s your code updated, which works as expected:

var $CHART$ = AmCharts.makeChart("$CHART$", {
  type: "map",
  dataProvider: {
    map: "pakistanHigh",
    getAreasFromMap: true,
    areas: [{
      id: "PK-GB",
      showAsSelected: true,
      url: "https://google.com",
      urlTarget: "_blank"
    }]
  },
  areasSettings: {
    autoZoom: false,
    selectedColor: "#CC0000"
  },
  zoomControl: {
    zoomControlEnabled: false
  },
  smallMap: {}
});

As for activating titles without mouse over, there’s not setting for that.

It is possible by using a bit of a custom code.

Take a look at this example here:

https://www.amcharts.com/kbase/display-state-abbreviations-as-labels-over-us-map/

Thanks for your response code. `I extend code by adding label function by on log I am getting. “Uncaught SyntaxError: Missing catch or finally after try” Am I missing any variable over here ?

var $CHART$ = AmCharts.makeChart(“$CHART$”, {
type: “map”,
dataProvider: {
map: “usaLow”,
getAreasFromMap: true,
areas: [{
id: “US-AK”,
showAsSelected: false,
url: “https://google.com”,
urlTarget: “_blank”
}]
},
areasSettings: {
autoZoom: false
},
zoomControl: {
zoomControlEnabled: false
},
imagesSettings: {
labelPosition: “middle”,
labelFontSize: 8
},

smallMap: {}
});

setTimeout(function () {
// iterate through areas and put a label over center of each
map.dataProvider.images = [];
for( x in map.dataProvider.areas ) {
var area = map.dataProvider.areas[ x ];
area.groupId = area.id;
var image = new AmCharts.MapImage();
image.latitude = latitude[ area.id ] || map.getAreaCenterLatitude( area );
image.longitude = longitude[ area.id ] || map.getAreaCenterLongitude( area );
image.label = area.id.split(‘-‘).pop();
image.title = area.title;
image.linkToObject = area;
image.groupId = area.id;
map.dataProvider.images.push( image );
}
map.validateData();
console.log(map.dataProvider);
}, 100)
});`

Seem like you have an extra }); at the end. Also there are some other issues.

Try this code instead:

var $CHART$ = AmCharts.makeChart( "$CHART$", {
	type: "map",
	dataProvider: {
		map: "usaLow",
		getAreasFromMap: true,
		areas: [ {
			id: "US-AK",
			showAsSelected: false,
			url: "https://google.com",
			urlTarget: "_blank"
		} ]
	},
	areasSettings: {
		autoZoom: false
	},
	zoomControl: {
		zoomControlEnabled: false
	},
	imagesSettings: {
		labelPosition: "middle",
		labelFontSize: 8
	},

	smallMap: {}
} );

$CHART$.addListener( "init", function( e ) {
	// iterate through areas and put a label over center of each
	var map = e.chart;
	map.dataProvider.images = [];
	for ( x in map.dataProvider.areas ) {
		var area = map.dataProvider.areas[ x ];
		area.groupId = area.id;
		var image = new AmCharts.MapImage();
		image.latitude = latitude[ area.id ] || map.getAreaCenterLatitude( area );
		image.longitude = longitude[ area.id ] || map.getAreaCenterLongitude( area );
		image.label = area.id.split( ‘-‘ ).pop();
		image.title = area.title;
		image.linkToObject = area;
		image.groupId = area.id;
		map.dataProvider.images.push( image );
	}
	map.validateData();
} );

after using above code

“Uncaught SyntaxError: Invalid or unexpected token”

Looks like it’s failing on the quote symbol. The code was also not ported fully from the example.

Here’s a complete working code: (verified)

var $CHART$ = AmCharts.makeChart( "$CHART$", {
	type: "map",
	dataProvider: {
		map: "usaLow",
		getAreasFromMap: true,
		areas: [ {
			id: "US-AK",
			showAsSelected: false,
			url: "https://google.com",
			urlTarget: "_blank"
		} ]
	},
	areasSettings: {
		autoZoom: false
	},
	zoomControl: {
		zoomControlEnabled: false
	},
	imagesSettings: {
		labelPosition: "middle",
		labelFontSize: 8
	},

	smallMap: {}
} );

$CHART$.addListener( "init", function(e) {

	var map = e.chart;

	// set up a longitude exceptions for certain areas
	var longitude = {
		"US-CA": -130,
		"US-FL": 120,
		"US-TX": 1,
		"US-LA": 40
	};

	var latitude = {
		"US-AK": -85
	};

	setTimeout( function() {
		// iterate through areas and put a label over center of each
		map.dataProvider.images = [];
		for ( x in map.dataProvider.areas ) {
			var area = map.dataProvider.areas[ x ];
			area.groupId = area.id;
			var image = new AmCharts.MapImage();
			image.latitude = latitude[ area.id ] || map.getAreaCenterLatitude( area );
			image.longitude = longitude[ area.id ] || map.getAreaCenterLongitude( area );
			image.label = area.id.split( '-' ).pop();
			image.title = area.title;
			image.linkToObject = area;
			image.groupId = area.id;
			map.dataProvider.images.push( image );
		}
		map.validateData();
		console.log( map.dataProvider );
	}, 100 )
} );

• This reply was modified 7 years, 6 months ago by martynasma.

Sorry. Disregard the code above. Here’s a correct one:

var $CHART$ = AmCharts.makeChart( "$CHART$", {
	type: "map",
	dataProvider: {
		map: "usaLow",
		getAreasFromMap: true,
		areas: [ {
			id: "US-AK",
			showAsSelected: false,
			url: "https://google.com",
			urlTarget: "_blank"
		} ]
	},
	areasSettings: {
		autoZoom: false
	},
	zoomControl: {
		zoomControlEnabled: false
	},
	imagesSettings: {
		labelPosition: "middle",
		labelFontSize: 8
	},

	smallMap: {}
} );

$CHART$.addListener( "init", function(e) {

	var map = e.chart;

	// set up a longitude exceptions for certain areas
	var longitude = {
		"US-CA": -130,
		"US-FL": 120,
		"US-TX": 1,
		"US-LA": 40
	};

	var latitude = {
		"US-AK": -85
	};

	setTimeout( function() {
		// iterate through areas and put a label over center of each
		map.dataProvider.images = [];
		for ( x in map.dataProvider.areas ) {
			var area = map.dataProvider.areas[ x ];
			area.groupId = area.id;
			var image = new AmCharts.MapImage();
			image.latitude = latitude[ area.id ] || map.getAreaCenterLatitude( area );
			image.longitude = longitude[ area.id ] || map.getAreaCenterLongitude( area );
			image.label = area.id.split( '-' ).pop();
			image.title = area.title;
			image.linkToObject = area;
			image.groupId = area.id;
			map.dataProvider.images.push( image );
		}
		map.validateData();
		console.log( map.dataProvider );
	}, 100 )
} );

Its Working Now.

Thank You so much for quick support.

You’re welcome!