Support » Plugin: amCharts: Charts and Maps » Link Map Areas

  • Resolved stunomatic

    (@stunomatic)


    Thanks for this awesome plugin I really liked playing with SVGs.
    I am trying to link map areas to custom url please check my code. When I click on area it ZOOM that portion even after disabling auto-zoom. How I can link area or city/state it to custom url.

    Titles are active on mouse-hover. Is it possible to active title without mouse-hover

    Please check my code.

    var $CHART$ = AmCharts.makeChart( “$CHART$”, {
    “type”: “map”,
    “dataProvider”: {
    “map”: “pakistanHigh”,
    “getAreasFromMap”: true,
    },
    “areasSettings”: {
    “autoZoom”: false,
    “selectedColor”: “#CC0000”,
    “areas”:
    {
    “id”: “PK-GB”,
    “showAsSelected”: true,
    “url”: “http://google.com”,
    “urlTarget”: “_blank”
    },

    },
    “zoomControl”: {
    “zoomControlEnabled”: false
    },
    “smallMap”: {}
    } );

    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author martynasma

    (@martynasma)

    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/

    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: “http://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)
    });`

    Plugin Author martynasma

    (@martynasma)

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

    after using above code

    “Uncaught SyntaxError: Invalid or unexpected token”

    Plugin Author martynasma

    (@martynasma)

    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 2 years, 6 months ago by martynasma.
    Plugin Author martynasma

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

    Its Working Now.

    Thank You so much for quick support.

    Plugin Author martynasma

    (@martynasma)

    You’re welcome!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Link Map Areas’ is closed to new replies.