Salesforce For YOU: Leaflet: Make a web map In Salesforce with multiple Markers icon based on range and Use of Fitbound

Before copy and Paste below Visualforce page code and Controller code make sure you have done
below things which I have detailed explained in my Previous blog.

1) Downloaded All thee and saved them in Static Resource
1) Download leaflet
2) Download Leaflet markercluster
3) Download Jquery

2) Download the CSV file and Import them in Pinpint Custom object.
1)Download Lat Long Coordinate File

3) You have made three custom label and fill the value in them which I have explained above.

Label 1:- FeatureCollection

1
2
3

{
   "type": "FeatureCollection",
   "features": [

Label 2:- LatlongName

{
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ longitude,latitude ]
    },
    "properties": {
    "LOCATION_STREET_NAME":"streetName",
    "Range":"RangeValue"
    }
  },

Lable 3:- last

1
2

]
}

4) Download Below Icons and save them in Static Resource . We will use as Custom Marker Icons .
1) GreenLeaf
2) YellowLeaf
3) Redleaf
4) Rat

Now if you have done all Four points above you are ready to go .You can now Copy and Paste below visualforce page and Controller code.

Controller Code :-

public class DemoLeafletClass {
    
    public list<pinpoint__c> pinList{get;set;}
    
    public String FinalStr{get;set;}
    public String HunRec{get;set;}
    
    String[] stringListmiddle = new String[0];
    
    public DemoLeafletClass (){
        
        
        pinlist = [select id,name,latitude__c,longitude__c,Pop_up__c,Range__c from pinpoint__c ];
        
        string middle ;
        
        for(pinpoint__c p:pinlist){
                        
            middle = System.Label.latlongname;
            middle = middle .replace('longitude', string.valueof(p.longitude__c));
            middle = middle .replace('latitude', String.valueof(p.latitude__c));
            middle = middle .replace('streetName', p.name);
            
            middle = middle .replace('RangeValue',string.valueof( p.range__c));            
            stringListmiddle.add(middle);            
        }
        
        FinalStr = String.join(stringListmiddle, ' ');        
        FinalStr = System.Label.FeatureCollection+FinalStr +System.Label.last;                
    }                
}

Visualforce Page Code :-

<apex:page controller="DemoLeafletClass" >
<apex:form style="width:900px">
<apex:pageblock >
<div align="center" draggable="false" >
        <apex:commandButton value="Reload"  onclick="load();" reRender="map"  styleClass="myClass"/>    
        &nbsp;&nbsp;&nbsp;&nbsp;
        <apex:commandButton value="Clear Marker"  onclick="clearmarker();" reRender="map" styleClass="myClass" />                 
   </div>
 </apex:pageblock>
  </apex:form>
<html>
<head>
  <title>A Leaflet map!</title>
 <title>A Leaflet map!</title>

  <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.leaflet, '/leaflet.css')}"/>  
  <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.MarkerCluster, 'markercluster/dist/MarkerCluster.css')}"/>  
  <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.MarkerCluster, 'src/MarkerClusterGroup.Refresh.js')}"/> 
  <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.MarkerCluster, 'markercluster/dist/MarkerCluster.Default.css')}"/> 

  <script type="text/javascript" src="{!URLFOR($Resource.leaflet, '/leaflet.js')}"></script>  
  <script type="text/javascript" src="{!URLFOR($Resource.MarkerCluster, 'markercluster/dist/leaflet.markercluster.js')}"></script>  
  <script type="text/javascript" src="{!URLFOR($Resource.jquery, '/jquery-2.1.1.min.js')}"></script>
  
  <style type="text/css">
.myClass{
padding: 10px;
color:white !important;
background:#00CC00 !important;

            
}
</style>
    <style>
    #map{ width: 900px; height: 600px; }
  </style>
</head>
<body>

  <div id="map"></div>

     <script>
  var rodents;

  var clusters;
  
  var markIcon = L.icon({
                    iconUrl: '{!$Resource.Greenleaf}',
                    iconSize: [25,35]
                });
                
                var markIconRed = L.icon({
                    iconUrl: '{!$Resource.redleaf}',
                    iconSize: [25,35]
                });
                
                var markIconyellow = L.icon({
                    iconUrl: '{!$Resource.yellowleaf}',
                    iconSize: [25,35]
                });
  

  // initialize the map
  var map = L.map('map').setView([42.35, -71.08], 13);
// load a tile layer
  L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);
  
  function load(){        
      rodents = L.geoJson({!FinalStr} ,{
     pointToLayer: function(feature,latlng){
     
     console.log(feature.properties.Range);
     debugger;    
     
     if(feature.properties.Range == 15){
      var marker = L.marker(latlng,{icon: markIconRed });   
        }    
        
        if(feature.properties.Range == 5){
      var marker = L.marker(latlng,{icon: markIconyellow });   
        } 
        
        if(feature.properties.Range == 25){
      var marker = L.marker(latlng,{icon: markIcon });   
        }      
        
              
        marker.bindPopup(feature.properties.LOCATION_STREET_NAME+ '<br/>' + feature.geometry.type);
        return marker;
    }
  });
     
     clusters = L.markerClusterGroup();
       clusters.addLayer(rodents);
     var showAllPoint =  map.addLayer(clusters);   
     
       map.fitBounds(showAllPoint.getBounds(), {
            padding: [50, 50]
        });                          
    }
    
    function clearmarker(){    
        map.removeLayer(clusters);
    }                      
  
  </script>
</body>
</html>

</apex:page>