Skip to content

Instantly share code, notes, and snippets.

@msrivastav13

msrivastav13/DataWrapper.cls

Last active August 3, 2016 21:04
Show Gist options
  • Save msrivastav13/8c94a258ab83fc4ef79af4c9ffb90bdd to your computer and use it in GitHub Desktop.
Save msrivastav13/8c94a258ab83fc4ef79af4c9ffb90bdd to your computer and use it in GitHub Desktop.
Download ZIP
LeadHeat Map Controller
Raw
DataWrapper.cls
public with sharing class DataWrapper {
public integer zoomLevel {get;set;}
public decimal scale {get;set;}
public string title {get;set;}
public decimal latitude {get;set;}
public decimal longitude {get;set;}
public string url {get;set;}
public DataWrapper (integer zoomLevel,decimal scale,
string title,decimal latitude,decimal longitude
,string url){
this.zoomLevel = zoomLevel;
this.scale = scale;
this.title = title;
this.latitude = latitude;
this.longitude = longitude;
this.url = url;
}
}
Raw
LeadHeatMap.page
<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>
Raw
LeadHeatMapController.cls
public with sharing class LeadHeatMapController {
@RemoteAction
public static list<DataWrapper> getLeadData(){
list<DataWrapper> lstdataWrapper = new list<DataWrapper>();
for(Lead l : [Select Id,
Name,
Latitude,
Longitude
FROM Lead
WHERE Latitude != null
AND Longitude != null
order by CreatedDate DESC limit 100]){
DataWrapper dataWrap = new DataWrapper(5,0.5,l.Name,l.Latitude,l.Longitude,'/'+l.Id);
lstdataWrapper.add(dataWrap);
}
return lstdataWrapper;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment