Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 613
  • Last Modified:

AmCharts Maps Drill-Down

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
E-Dub
Asked:
E-Dub
  • 3
  • 3
1 Solution
 
Branislav BorojevicFounderCommented:
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
 
E-DubFrontend Web Developer & Graphic DesignerAuthor 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

0
 
Branislav BorojevicFounderCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
E-DubFrontend Web Developer & Graphic DesignerAuthor 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.
0
 
Branislav BorojevicFounderCommented:
<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
 
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
Thank you so much for all your help!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now