How to use Leaflet Map in Salesforce?

Leaflet Map:

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. The leaflet is designed with simplicity, performance, and usability in mind.

Let’s understand the use of Marker icons, Leaflet Bubble Map icons. To add marker icons in Leaflet Map, use the below snippet of code in a script tag in your Visualforce page:

var map = L.map('map').setView([28.38, 77.12], 10);
mapLink = '&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&amp;copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);
L.marker([51.509, -0.08],{color : 'red',fillColor : '#f03', fillOpacity: 0.5,radius :700}).addTo(map)
.bindPopup('A main message')
.openPopup();

Add the below CDN to your page to easily access the Stylesheets and scripts :

Content Delivery Network (CDN):

A Content Delivery Network (CDN) is a system of computers that exist all over the world and cache files for users to access. CDNs can greatly reduce the load time of a page by offering files at a higher bandwidth from a server that is physically closer to your visitor than your web server might be.

<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” />

Now, let focus on Bubble marker icon, here’s the snippet of code we can use to show bubble maker:

<apex:page>
    <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” />
    <div id=”map” style=”width: 600px; height: 400px”>
    </div>
    <head>
        <script>
            var jsondata=[ { ‘x’: ”, ‘y’: ”, ‘z’: ” } ];
            var arr4 = new Array(jsondata);
            <apex:repeat value=”{!listofAccount}” var=”accId”>
                arr4.push(‘{!accId.Latitude__c}’,'{!accId.Longitude__c}’,'{!accId.Circle_Size__c}’);
            </apex:repeat>
            var size = (arr4.length-1)/3 + 1;
            alert(‘#### elements : ‘ +size);
            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: ‘&copy; ‘ + mapLink + ‘ Contributors’, maxZoom: 18,}).addTo(map);
            for(var i=1; i<size; i++){
                L.circle([arr4[(i-1)*3 + 1],
                arr4[(i-1)*3 + 2]],
                color : ‘red’,fillColor : ‘#f03’, fillOpacity: 0.5,radius : arr4[(i-1)*3 + 3]}).addTo(map) .bindPopup(‘A main message’) .openPopup();
            }
        </script>
    </head>
</apex:page>

Below is the screenshot for bubble map :