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: "http://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/

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: "http://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();
} );

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: "http://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 9 years ago by martynasma.