How to show multiple accounts of Salesforce on Leaflet Map?
Hi All, Here’s the step by step solution for the above question:
- For achieving the above scenario first we need to create two custom fields on Account Object i.e. Latitude and Longitude.
- We can also customize the size of the circle for Bubble that will be displayed in Leaflet by creating one more field on the account. (e.g. Circle Size)
- Here’s the snippet of controller code which we will use for showing account on Leaflet map and open a “Dialogue Box” on click of a button on a particular account.
public class AccDetailOnLeafletMulipleBubble {
public List<Account> listofAccount{get;set;}
public boolean displayPopup {get; set;}
public Event newEvent {get; set;}
public Id newId {get; set;}
public string newIdAcc {get;set;}
public AccDetailOnLeafletMulipleBubble(ApexPages.StandardController controller){
newEvent = new event();
newId = '0017F00000DvioF';
listofAccount = [Select id,Name,BillingCity,Circle_Size__c,Latitude__c,Longitude__c FROM Account where Phone = '9898989898' LIMIT 10];
}
public void closePopup() {
displayPopup = false;
}
public void showPopup() {
displayPopup = true;
}
public void saveEventToAccount(){
newEvent.whatId = newIdAcc;
newEvent.DurationInMinutes = 6;
newEvent.ActivityDateTime = System.today();
insert newEvent;
}
}
We can create a dialogue box by the use following snippet of code:
<style type=”text/css”>
.custPopup {
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
/* These are the 3 css properties you will need to change so the popup displays in the center of the screen. First set the width. Then set margin-left to negative half of what the width is. You can add the height property for a fixed size pop up if you want.*/
width: 500px;
margin-left: -250px;
top:100px;
}
.popupBackground {
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}
</style>
Here’s the complete code of the page:
<apex:page id="pageid" standardController="Account" extensions="AccDetailOnLeafletMulipleBubble">
<apex:form id="formid" >
<apex:actionFunction name="actionFunc" action="{!testAccId}" reRender="none">
<apex:param name="firstParam" value="" assignTo="{!newIdAcc}" />
</apex:actionFunction>
<apex:commandButton id="buttonId" value="Log a call" action="{!showPopup}" rerender="tstpopup"/>
<apex:outputPanel id="tstpopup">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
<apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
<apex:pageBlock title="Create New Event">
<apex:pageBlockSection >
<apex:inputField value="{!newEvent.Ownerid}" /><br/>
<apex:inputField value="{!newEvent.Subject}"/><br/>
<apex:inputField value="{!newEvent.Type}"/><br/>
<apex:inputField value="{!newEvent.StartDateTime}"/><br/>
<apex:inputField value="{!newEvent.EndDateTime}"/><br/>
</apex:pageBlockSection>
<apex:actionRegion >
<apex:commandButton value="Save" immediate="true" action="{!saveEventToAccount}" >
</apex:commandButton>
<apex:commandButton value="Cancel" action="{!Cancel}">
</apex:commandButton>
</apex:actionRegion>
</apex:pageBlock>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>
<style type="text/css">
.custPopup {
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
/* These are the 3 css properties you will need to change so the popup displays in the center of the screen. First set the width. Then set margin-left to negative half of what the width is. You can add the height property for a fixed size pop up if you want.*/
width: 500px;
margin-left: -250px;
top:100px;
}
.popupBackground {
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}
</style>
<apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<apex:includescript value="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js" />
<apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" />
<div id="map" style="width: 600px; height: 400px">
</div>
<head>
<script>
var cr;
var j$ = jQuery.noConflict();
var j$modalDialog;
var jsondata=[{'x': '','y': '','z': '','a': ''}];
var arr4 = new Array(jsondata);
<apex:repeat value="{!listofAccount}" var="accId">
arr4.push('{!accId.Latitude__c}','{!accId.Longitude__c}','{!accId.Circle_Size__c}','{!accId.Id}');
</apex:repeat>
var size = (arr4.length-1)/4 + 1;
var map = L.map('map').setView([28.38, 77.12], 10);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© ' + mapLink + ' Contributors',maxZoom: 18,}).addTo(map);
for(var i=1; i<size; i++) {
cr = L.circle([arr4[(i-1)*4 + 1], arr4[(i-1)*4 + 2]],{color : 'red',fillColor : '#f03', fillOpacity: 0.5,className : arr4[(i-1)*4 + 4], radius : arr4[(i-1)*4 + 3]}).addTo(map).on("click", circleClick1);
}
function circleClick1(e){
var clickedCircle = e.target;
var accid = clickedCircle.options.className;
actionFunc(accid);
clickedCircle.bindPopup(document.getElementById("pageid:formid:buttonId")).openPopup();
}
function circleClick(e, f ,j) {
document.getElementById("pageid:formid:paramId").value = e;
alert('#### e.target : ' +f);
}
function actionExample(){
methodOneInJavascript();
}
</script>
</head>
</apex:page>
