WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
AmCharts Maps Drill-Down
Posted on 2016-07-30
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/ti
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/ti
Any help will be appreciated. Thanks!
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/ti
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/ti
Any help will be appreciated. Thanks!
[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
1. To add an additional location look at the code below:
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:
After you are done with the images for locations, add the following
<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>
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/"
}
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));
}
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));
}
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>
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"
Featured Post
Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
When it comes to write a
Context Sensitive Help
(an online help that is obtained from a specific point in state of software to provide help with that state)
,
first we need to make the file that contains all topics, which are given exclusive IDs. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data. A form token is a tool that can be used to guard against request forgeries (CSRF). This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.
Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month3 days, 17 hours left to enroll
630 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.