Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

AmCharts Maps Drill-Down

Posted on 2016-07-30
6
Medium Priority
?
298 Views
Last Modified: 2016-08-03
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!
0
Comment
Question by:E-Dub
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 4

Expert Comment

by:Branislav Borojevic
ID: 41736087
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 3

Author Comment

by:E-Dub
ID: 41736100
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

0
 
LVL 4

Expert Comment

by:Branislav Borojevic
ID: 41736501
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
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 3

Author Comment

by:E-Dub
ID: 41740523
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.
0
 
LVL 4

Accepted Solution

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

0
 
LVL 3

Author Closing Comment

by:E-Dub
ID: 41740871
Thank you so much for all your help!!
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

705 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