We help IT Professionals succeed at work.

AmCharts Maps Drill-Down

E-Dub
E-Dub asked
on
The below demo map is perfect for what I need however there are 2 things that I've been trying to do and can't figure out how:

1.  I cannot figure out how to add another location in a different city. So the demo shows San Diego with 4 locations, I would also like to add New York with 3 locations and Florida with 2 locations. How do I can't figure out how to add that to the js code.  
http://www.amcharts.com/tips/map-marker-drill-down/

2.  Also, after the user drills down and sees the multiple locations within the city, I would like to add a URL that will take the user to a specific page, like this (http://www.amcharts.com/tips/map-zoom-first-click-marker-go-specific-url-next-click/) but I would like it to open in a new browser if possible.

Any help will be appreciated. Thanks!
Comment
Watch Question

1.  To add an additional location look at the code below:

<script>
// svg path for target icon
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";


var map = AmCharts.makeChart("chartdiv", {
	type: "map",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

	dataProvider: {
		map: "usa2Low",
        images: [{
			svgPath: targetSVG,
            label: "San Diego",
			zoomLevel: 14,
			scale: 1,
			title: "San Diego",
			latitude: 32.715738,
			longitude: -117.161084,
            images: [{
                svgPath: targetSVG,
                scale: 0.7,
                title: "Imperial Beach",
                latitude: 32.586299,
                longitude: -117.110481
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "El Cajon",
                latitude: 32.802417,
                longitude: -116.963539
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "University City",
                latitude: 32.861268,
                longitude: -117.210045
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "Poway",
                latitude: 32.969635,
                longitude: -117.036324
            }]
		},
    {
			svgPath: targetSVG,
            label: "New York",
			zoomLevel: 14,
			scale: 1,
			title: "New York",
			latitude: 40.7591704,
			longitude: -74.0392706,
            images: [{
                svgPath: targetSVG,
                scale: 0.7,
                title: "Hempstead",
                latitude: 40.7029647,
                longitude: -73.638341
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "Queens",
                latitude: 40.6511939,
                longitude: -74.0112748
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "Bronx",
                latitude: 40.8517687,
                longitude: -73.9109736
            }]
		}]
	},

	areasSettings: {
		autoZoom: false
	}

});
</script>

Open in new window


This would be your Javascript for the map that you want to have.

2. To include a link, you would need to add an ID to each location that you wish to link:

 
{
id:"Bronx",
svgPath: targetSVG,
                scale: 0.7,
                title: "Bronx",
                latitude: 40.8517687,
                longitude: -73.9109736,
 theUrl: "http://www.yourlinkhere.com/"
}

Open in new window


After you are done with the images for locations, add the following

 
map.addListener("clickMapObject", function (event) {
    // check if the map is already at target zoomLevel and go to the URL if it is
    if ( 'undefined' != typeof currentObject &&  event.mapObject.id == currentObject.id ) {
        window.location.href = event.mapObject.theUrl;
    }
    currentObject = event.mapObject;
});

function clickObject(id) {
    map.clickMapObject(map.getObjectById(id));
}

Open in new window

E-DubFrontend Web Developer & Graphic Designer

Author

Commented:
Thank you, everything works except I'm still unsure where to place the last piece of code to make the URL work. This is what I did using jfiddle. I'm sure I placed that last code in the wrong place

// svg path for target icon
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";


var map = AmCharts.makeChart("chartdiv", {
	type: "map",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

	dataProvider: {
		map: "usa2Low",
        images: [{
			svgPath: targetSVG,
            label: "San Diego",
			zoomLevel: 14,
			scale: 1,
			title: "San Diego",
			latitude: 32.715738,
			longitude: -117.161084,
            images: [{
                svgPath: targetSVG,
                scale: 0.7,
                title: "Imperial Beach",
                latitude: 32.586299,
                longitude: -117.110481
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "El Cajon",
                latitude: 32.802417,
                longitude: -116.963539
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "University City",
                latitude: 32.861268,
                longitude: -117.210045
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "Poway",
                latitude: 32.969635,
                longitude: -117.036324
            }]
  },
    {
			svgPath: targetSVG,
            label: "New York",
			zoomLevel: 14,
			scale: 1,
			title: "New York",
			latitude: 40.7591704,
			longitude: -74.0392706,
            images: [{
                svgPath: targetSVG,
                scale: 0.7,
                title: "Hempstead",
                latitude: 40.7029647,
                longitude: -73.638341
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "Queens",
                latitude: 40.6511939,
                longitude: -74.0112748
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "Bronx",
                latitude: 40.8517687,
                longitude: -73.9109736,
                theUrl: "http://www.google.com/"
            }]
		}]
	},
	areasSettings: {
		autoZoom: false
	}

});

map.addListener("clickMapObject", function (event) {
    // check if the map is already at target zoomLevel and go to the URL if it is
    if ( 'undefined' != typeof currentObject &&  event.mapObject.id == currentObject.id ) {
        window.location.href = event.mapObject.theUrl;
    }
    currentObject = event.mapObject;
});

function clickObject(id) {
    map.clickMapObject(map.getObjectById(id));
}

Open in new window

Please see attached for a working example with 2 different links on it. I put together the .html file with the working code.
map.html
E-DubFrontend Web Developer & Graphic Designer

Author

Commented:
Ok I'm sorry, I'm slow on this. That code works but now it doesn't have the the drill-down with multiple locations in a city. That's where I'm having the difficulty, incorporating the multiple city drill down along with each location having a URL link.
<html>
<head>
<style type="text/css">
    #chartdiv {
	width	: 100%;
	height	: 400px;
}		
  </style>

  <title>MAP</title>
</head>
<body>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/usa2Low.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>

    <div id="chartdiv" style="overflow: hidden; text-align: left;"> </div>
<script>
// svg path for target icon
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";


var map = AmCharts.makeChart("chartdiv", {
	type: "map",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",
imagesSettings: {
		rollOverColor: "#282828",
		rollOverScale: 2,
		selectedScale: 2,
		selectedColor: "#282828",
color:"#000000"
	},

zoomControl:{buttonFillColor:"#15A892"},

areasSettings:{unlistedAreasColor:"#1d93ce"},
	dataProvider: {
		map: "usa2Low",
        images: [{
			svgPath: targetSVG,
            label: "San Diego",
			zoomLevel: 14,
			scale: 1,
			title: "San Diego",
			latitude: 32.715738,
			longitude: -117.161084,
            images: [{
                svgPath: targetSVG,
                scale: 0.7,
                title: "Imperial Beach",
                latitude: 32.586299,
                longitude: -117.110481
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "El Cajon",
                latitude: 32.802417,
                longitude: -116.963539
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "University City",
                latitude: 32.861268,
                longitude: -117.210045
            }, {
                svgPath: targetSVG,
                scale: 0.7,
                title: "Poway",
                latitude: 32.969635,
                longitude: -117.036324
            }]
		},
    {
        label:"New York",
			svgPath: targetSVG,
			zoomLevel: 22,
			scale: 1,
			title: "New York",
			latitude: 40.7591704,
			longitude: -74.0392706,
            images: [
                {
                label:"Hempstead",
                id:"Hempstead",
                svgPath: targetSVG,
                scale: 0.7,
                title: "Hempstead",
                latitude: 40.7029647,
                longitude: -73.638341,
                url: "http://www.testing.com/"
            }, { 
                label:"Queens",
                id:"Queens",
                svgPath: targetSVG,
                scale: 0.7,
                title: "Queens",
                latitude: 40.6511939,
                longitude: -74.0112748,
                url: "http://www.testing.com/"
            }, {
                label:"Bronx",
                id:"Bronx",
                svgPath: targetSVG,
                scale: 0.7,
                title: "Bronx",
                latitude: 40.8517687,
                longitude: -73.9109736,
                url: "http://www.testing.com/"
            }]
		}]
	}

});
    map.addListener("clickMapObject", function (event) {
    if ( 'undefined' != typeof currentObject &&  event.mapObject.id == currentObject.id ) {
       window.location.href = event.mapObject.linkToObject;
    }
           currentObject = event.mapObject;
 
});
 function clickObject(id) {
    map.clickMapObject(map.getObjectById(id));
}

//]]> 
</script>
</body></html>

Open in new window


Do not forget to add ID to each link you want to add to a location. The code should work, you can change the colors for the map and the markers, and the rollover/selected marker scale here:

rollOverColor: "#282828",
		rollOverScale: 2,
		selectedScale: 2,
		selectedColor: "#282828",
color:"#000000"

Open in new window

E-DubFrontend Web Developer & Graphic Designer

Author

Commented:
Thank you so much for all your help!!