I recently downloaded a template code from amcharts.com so that I could put a map on my website. The code puts little pulsating dots on whatever location I set the latitude and longitude, and I can also include a title for each dot. However whenever I try to add another parameter, like a URL, I get an error. At this point I am trying to make it so that the mouse hovering over each dot will create a popup image of that location. I'm having trouble figuring out how to get the popup to work, and to make sure that each dot has a different popup image. Here is a link to the codepen I've been using.
https://codepen.io/ZoeyEllen/pen/yvXvZX?editors=1111
I have done quite a bit of googling and I've found several different suggestions for javascript, html, and css, but nothing I've tried seems to have worked. Here is the code that I have so far:
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"projection": "mercator",
"imagesSettings": {
"rollOverColor": "#089282",
"rollOverScale": 5,
"selectedScale": 5,
"selectedColor": "#089282",
"color": "#13564e"
},
"areasSettings": {
"unlistedAreasColor": "#15A892"
},
"dataProvider": {
"map": "worldLow",
"images": [ {
"zoomLevel": 5,
"scale": 0.5,
"title": "Hawaii, USA",
"latitude": 19.8968,
"longitude": -155.5828
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Galápagos Islands",
"latitude": -0.8675,
"longitude": -89.4364
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Italy",
"latitude": 41.9028,
"longitude": 12.4964
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Greece",
"latitude": 37.9838,
"longitude": 23.7275
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "The Bahamas",
"latitude": 24.9314,
"longitude": -76.1900
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "South Florida, USA",
"latitude": 26.1224,
"longitude": -80.1373
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Canada",
"latitude": 45.5017,
"longitude": -73.5673
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Washington State, USA",
"latitude": 47.6062,
"longitude": -122.3321
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "California, USA",
"latitude": 34.0522,
"longitude": -118.2437
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Illinois, USA",
"latitude": 41.8781,
"longitude": -87.6298
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Costa Rica",
"latitude": 9.7489,
"longitude": -83.7534
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "North Carolina, USA",
"latitude": 35.7596,
"longitude": -79.0193
} ]
}
} );
// add events to recalculate map position when the map is moved or zoomed
map.addListener( "positionChanged", updateCustomMarkers );
// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers( event ) {
// get map object
var map = event.chart;
// go through all of the images
for ( var x in map.dataProvider.images ) {
// get MapImage object
var image = map.dataProvider.images[ x ];
// check if it has corresponding HTML element
if ( 'undefined' == typeof image.externalElement )
image.externalElement = createCustomMarker( image );
// reposition the element accoridng to coordinates
var xy = map.coordinatesToStageXY( image.longitude, image.latitude );
image.externalElement.style.top = xy.y + 'px';
image.externalElement.style.left = xy.x + 'px';
}
}
// this function creates and returns a new marker element
function createCustomMarker( image ) {
// create holder
var holder = document.createElement( 'div' );
holder.className = 'map-marker';
holder.title = image.title;
holder.style.position = 'absolute';
// maybe add a link to it?
if ( undefined != image.url ) {
holder.onclick = function() {
window.location.href = image.url;
};
holder.className += ' map-clickable';
}
// create dot
var dot = document.createElement( 'div' );
dot.className = 'dot';
holder.appendChild( dot );
// create pulse
var pulse = document.createElement( 'div' );
pulse.className = 'pulse';
holder.appendChild( pulse );
// append the marker to the map container
image.chart.chartDiv.appendChild( holder );
holder.onmouseover = function(){
console.log(image.title);
}
return holder;
}#chartdiv {
width: 100%;
height: 500px;
}
.map-marker {
/* adjusting for the marker dimensions
so that it is centered on coordinates */
margin-left: -8px;
margin-top: -8px;
}
.map-marker.map-clickable {
cursor: pointer;
}
.pulse {
width: 10px;
height: 10px;
border: 3px solid #FFB6C1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #ff69b4;
z-index: 10;
position: absolute;
}
.map-marker .dot {
border: 3px solid #ff69b4;
background: transparent;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
height: 50px;
width: 50px;
-webkit-animation: pulse 3s ease-out;
-moz-animation: pulse 3s ease-out;
animation: pulse 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -20px;
left: -20px;
z-index: 1;
opacity: 0;
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
</style><script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
