Solved

How to get AmCharts Maps Drill-Down To Work

Posted on 2016-07-30
2
83 Views
Last Modified: 2016-08-15
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.
  2. http://www.amcharts.com/tips/map-marker-drill-down/
[list=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.[/list]

Any help will be appreciated. Thanks!
0
Comment
Question by:E-Dub
2 Comments
 
LVL 4

Accepted Solution

by:
Branislav Borojevic earned 500 total points
ID: 41736082
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

0
 
LVL 1

Author Closing Comment

by:E-Dub
ID: 41756302
Thanks!
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question