|
<apex:page showHeader="false" sidebar="false" applyHtmlTag="false" controller="LeadHeatMapController"> |
|
<html> |
|
<head> |
|
<style> |
|
#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: 5px solid #f7f14c; |
|
-webkit-border-radius: 30px; |
|
-moz-border-radius: 30px; |
|
border-radius: 30px; |
|
background-color: #716f42; |
|
z-index: 10; |
|
position: absolute; |
|
} |
|
.map-marker .dot { |
|
border: 10px solid #fff601; |
|
background: transparent; |
|
-webkit-border-radius: 60px; |
|
-moz-border-radius: 60px; |
|
border-radius: 60px; |
|
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: -25px; |
|
left: -25px; |
|
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> |
|
</head> |
|
<apex:includeScript value="{!URLFOR($Resource.amMaps,'amMaps/ammap.js')}"/> |
|
<apex:includeScript value="{!URLFOR($Resource.amMaps,'amMaps/worldLow.js')}"/> |
|
<body> |
|
<div id="chartdiv" ></div> |
|
</body> |
|
|
|
<script> |
|
var images = []; |
|
|
|
Visualforce.remoting.Manager.invokeAction( |
|
'{!$RemoteAction.LeadHeatMapController.getLeadData}', |
|
handleResult |
|
); |
|
|
|
function handleResult(result, event) { |
|
if(event.status){ |
|
for(var i=0;i<result.length;i++){ |
|
images.push(result[i]); |
|
} |
|
window.map = AmCharts.makeChart("chartdiv", { |
|
type: "map", |
|
"theme": "none", |
|
"projection":"miller", |
|
path: "http://www.amcharts.com/lib/3/", |
|
"backgroundColor" : "#13564e", |
|
|
|
imagesSettings: { |
|
rollOverColor: "#089282", |
|
rollOverScale: 3, |
|
selectedScale: 3, |
|
selectedColor: "#089282", |
|
color: "#13564e" |
|
}, |
|
|
|
dataProvider: { |
|
map: "worldLow", |
|
images: images |
|
}, |
|
|
|
listeners: [ { |
|
"event": "drawn", |
|
"method": updateCustomMarkers |
|
}], |
|
|
|
areasSettings: { |
|
"autoZoom": true, |
|
unlistedAreasColor: "#15A892", |
|
selectedColor: "#CC0000" |
|
}, |
|
|
|
}); |
|
// add events to recalculate map position when the map is moved or zoomed |
|
map.addListener("positionChanged", updateCustomMarkers); |
|
|
|
}else{ |
|
alert(event.message); |
|
} |
|
|
|
} |
|
|
|
|
|
// 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); |
|
|
|
return holder; |
|
} |
|
</script> |
|
</html> |
|
</apex:page> |
