Leaflet EasyButton plugin

Download the plugin at GITHUB – https://github.com/CliffCloud/Leaflet.EasyButton

 

free-001

– We create a layerGroup object to house the features –school. We create a variable to define the icon type, color and size and use the Jquery to load the geojson file. The default markers are converted to the defined awesome icons- university using the function ’pointToLayer’. We add the features into the layerGroup-school.

 

var school = L.layerGroup();

var icon = L.AwesomeMarkers.icon({icon: ‘university’,markerColor: ‘green’,prefix: ‘fa’});

$.getJSON(‘schools.geojson’, function(data) {
L.geoJson(data, {pointToLayer: function(feature, latlng){
marker = L.marker(latlng, {icon: icon});
marker.bindPopup(feature.properties.Type +'<br>’ + feature.properties.Settlement)
return marker;
}}).addTo(school);
});

 

– We create the second layerGroup object to house the features – clinic. We create a variable to define the icon type, color and size and use the Jquery to load the geojson file. The default markers are converted to the defined awesome icons- ambulance using the function ’pointToLayer’. We add the features into the layerGroup-clinic.

 

var clinic = L.layerGroup();

var icon2 = L.AwesomeMarkers.icon({icon: ‘ambulance’,markerColor: ‘green’,prefix: ‘fa’});

$.getJSON(‘clinic.geojson’, function(data) {
L.geoJson(data, {pointToLayer: function(feature, latlng){
marker =  L.marker(latlng, {icon: icon2});
return marker;
}}).addTo(clinic);
});

 

– We activate the buttons using the control L.easyButton and define events that the buttons will perform using the ‘states’ options.

 

var button1 = L.easyButton({
states: [{
stateName: ‘add-markers’,  icon:  ‘fa-university’, title:     ‘add school layer’,
onClick: function(btn, map) { map.addLayer(school);
btn.state(‘remove-markers’);
}
}, {
stateName: ‘remove-markers’, icon:  ‘fa-undo’, title:     ‘remove layer’,
onClick: function(btn, map) {map.removeLayer(school);
btn.state(‘add-markers’);
}}]
}).addTo(map);
var button2 = L.easyButton({
states: [{
stateName: ‘add-markers’, icon: ‘fa-ambulance’, title:     ‘add clinic layer’,
onClick: function(btn, map) {map.addLayer(clinic);
btn.state(‘remove-markers’);
}
}, {
stateName: ‘remove-markers’, icon:  ‘fa-undo’, title:  ‘remove layer’,
onClick: function(btn, map) {map.removeLayer(clinic);
btn.state(‘add-markers’);
}}]
}).addTo(map);

 

Screenshot of the example above showing the two buttons rep school and clinic.  Click on the add school layer button to display the markers representing schools on the map.

Capture-1

The school layer is added to the map. The icons are defined with the symbol-university. Note that the button has changed label to ‘undo’ and is labeled ‘remove marker’. Clicking on the button will remove the markers from the map.

Capture-3

 

Download the plain text version of the source code –https://www.dropbox.com/s/i1iw9gr1qpuk1t1/Leaflet%20easyButton%20plugin.txt?dl=0

Find Source code  below:

 

gree-001

Look up further documentation at https://github.com/CliffCloud/Leaflet.EasyButton

 

Thank you for following the blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s