将鼠标悬停在一个点上以获得弹出图像
Hover over a dot for a popup image
我最近从 amcharts.com 下载了一个模板代码，这样我就可以在我的网站上放一张地图。代码会在我设置纬度和经度的任何位置上放置一些脉动的小点，我还可以为每个点添加一个标题。但是，每当我尝试添加另一个参数（如 URL）时，我都会收到错误消息。在这一点上，我试图做到这一点，以便将鼠标悬停在每个点上会创建该位置的弹出图像。我无法弄清楚如何让弹出窗口工作，并确保每个点都有不同的弹出图像。这是我一直在使用的代码笔的 link。
https://codepen.io/ZoeyEllen/pen/yvXvZX?editors=1111
我进行了大量谷歌搜索，发现了 javascript、html 和 css 的几个不同建议，但我尝试过的似乎都没有工作了。这是我到目前为止的代码：
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>
好的，我希望这就是您要找的。我添加了弹出窗口以显示在地图的中心。您可以为弹出窗口添加您的 css，但这会展示您想要的内容。
说明
HTML
在 HTML 的底部将每个弹出窗口添加为 <div>。它们具有在图像对象和它们的 class popup 中引用的个人价值，以提供您想要的样式
<div id="pop0" class="popup">A</div>
CSS
添加了两个类
popup: 设置弹出窗口的整体样式
.popup {
显示：none；
位置：绝对；
顶部：0；
底部：0；
右：0；
左：0；
保证金：自动；
背景：红色；
宽度：50px；
高度：50px；
}
popon: 与听众一起打开弹出窗口
.popon {
显示：块；
}
JS
在这里添加了两个不同的东西
首先，我在每个元素中添加了 pop 值，以引用每个点
所需弹出窗口的 id
其次我添加了两个事件监听器
MouseOver - 这会将 class popon 添加到点
的弹出元素
holder.onmouseover = 函数() {
popup.classList.add('popon');
}
MouseLeave - 这将删除 class popon 到点
的弹出元素
holder.onmouseleave = 函数() {
popup.classList.remove('popon');
}
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,
"pop": "pop0"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Galápagos Islands",
"latitude": -0.8675,
"longitude": -89.4364,
"pop": "pop1"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Italy",
"latitude": 41.9028,
"longitude": 12.4964,
"pop": "pop2"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Greece",
"latitude": 37.9838,
"longitude": 23.7275,
"pop": "pop3"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "The Bahamas",
"latitude": 24.9314,
"longitude": -76.1900,
"pop": "pop4"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "South Florida, USA",
"latitude": 26.1224,
"longitude": -80.1373,
"pop": "pop5"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Canada",
"latitude": 45.5017,
"longitude": -73.5673,
"pop": "pop6"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Washington State, USA",
"latitude": 47.6062,
"longitude": -122.3321,
"pop": "pop7"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "California, USA",
"latitude": 34.0522,
"longitude": -118.2437,
"pop": "pop8"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Illinois, USA",
"latitude": 41.8781,
"longitude": -87.6298,
"pop": "pop9"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Costa Rica",
"latitude": 9.7489,
"longitude": -83.7534,
"pop": "pop10"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "North Carolina, USA",
"latitude": 35.7596,
"longitude": -79.0193,
"pop": "pop11"
}]
}
});
// 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);
//Mouseover listener
var popup = document.getElementById(image.pop);
holder.onmouseover = function() {
popup.classList.add('popon');
}
holder.onmouseleave = function() {
popup.classList.remove('popon');
}
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;
}
.popup {
display: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background: red;
width: 50px;
height: 50px;
}
.popon {
display: block;
}
@-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;
}
<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>
<div id="pop0" class="popup">A</div>
<div id="pop1" class="popup">B</div>
<div id="pop2" class="popup">C</div>
<div id="pop3" class="popup">D</div>
<div id="pop4" class="popup">E</div>
<div id="pop5" class="popup">F</div>
<div id="pop6" class="popup">G</div>
<div id="pop7" class="popup">H</div>
<div id="pop8" class="popup">I</div>
<div id="pop9" class="popup">J</div>
<div id="pop10" class="popup">K</div>
<div id="pop11" class="popup">L</div>
我最近从 amcharts.com 下载了一个模板代码，这样我就可以在我的网站上放一张地图。代码会在我设置纬度和经度的任何位置上放置一些脉动的小点，我还可以为每个点添加一个标题。但是，每当我尝试添加另一个参数（如 URL）时，我都会收到错误消息。在这一点上，我试图做到这一点，以便将鼠标悬停在每个点上会创建该位置的弹出图像。我无法弄清楚如何让弹出窗口工作，并确保每个点都有不同的弹出图像。这是我一直在使用的代码笔的 link。
https://codepen.io/ZoeyEllen/pen/yvXvZX?editors=1111
我进行了大量谷歌搜索，发现了 javascript、html 和 css 的几个不同建议，但我尝试过的似乎都没有工作了。这是我到目前为止的代码：
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>
好的，我希望这就是您要找的。我添加了弹出窗口以显示在地图的中心。您可以为弹出窗口添加您的 css，但这会展示您想要的内容。
说明
HTML
在 HTML 的底部将每个弹出窗口添加为 <div>。它们具有在图像对象和它们的 class popup 中引用的个人价值，以提供您想要的样式
<div id="pop0" class="popup">A</div>
CSS
添加了两个类
popup: 设置弹出窗口的整体样式
.popup { 显示：none； 位置：绝对； 顶部：0； 底部：0； 右：0； 左：0； 保证金：自动； 背景：红色； 宽度：50px； 高度：50px； }
popon: 与听众一起打开弹出窗口
.popon { 显示：块； }
JS
在这里添加了两个不同的东西
首先，我在每个元素中添加了 pop 值，以引用每个点
id
其次我添加了两个事件监听器
MouseOver - 这会将 class
的弹出元素popon添加到点holder.onmouseover = 函数() { popup.classList.add('popon'); }
MouseLeave - 这将删除 class
的弹出元素popon到点holder.onmouseleave = 函数() { popup.classList.remove('popon'); }
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,
"pop": "pop0"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Galápagos Islands",
"latitude": -0.8675,
"longitude": -89.4364,
"pop": "pop1"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Italy",
"latitude": 41.9028,
"longitude": 12.4964,
"pop": "pop2"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Greece",
"latitude": 37.9838,
"longitude": 23.7275,
"pop": "pop3"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "The Bahamas",
"latitude": 24.9314,
"longitude": -76.1900,
"pop": "pop4"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "South Florida, USA",
"latitude": 26.1224,
"longitude": -80.1373,
"pop": "pop5"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Canada",
"latitude": 45.5017,
"longitude": -73.5673,
"pop": "pop6"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Washington State, USA",
"latitude": 47.6062,
"longitude": -122.3321,
"pop": "pop7"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "California, USA",
"latitude": 34.0522,
"longitude": -118.2437,
"pop": "pop8"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Illinois, USA",
"latitude": 41.8781,
"longitude": -87.6298,
"pop": "pop9"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "Costa Rica",
"latitude": 9.7489,
"longitude": -83.7534,
"pop": "pop10"
}, {
"zoomLevel": 5,
"scale": 0.5,
"title": "North Carolina, USA",
"latitude": 35.7596,
"longitude": -79.0193,
"pop": "pop11"
}]
}
});
// 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);
//Mouseover listener
var popup = document.getElementById(image.pop);
holder.onmouseover = function() {
popup.classList.add('popon');
}
holder.onmouseleave = function() {
popup.classList.remove('popon');
}
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;
}
.popup {
display: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
background: red;
width: 50px;
height: 50px;
}
.popon {
display: block;
}
@-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;
}
<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>
<div id="pop0" class="popup">A</div>
<div id="pop1" class="popup">B</div>
<div id="pop2" class="popup">C</div>
<div id="pop3" class="popup">D</div>
<div id="pop4" class="popup">E</div>
<div id="pop5" class="popup">F</div>
<div id="pop6" class="popup">G</div>
<div id="pop7" class="popup">H</div>
<div id="pop8" class="popup">I</div>
<div id="pop9" class="popup">J</div>
<div id="pop10" class="popup">K</div>
<div id="pop11" class="popup">L</div>