Leaflet SelectLayers plugin for Leaflet powered maps

This post will demonstrate how to add Leaflet SelectLayers plugin with leaflet powered maps. The SelectLayers Plugin is an extended version of the Leaflet Layers Control which is used to switch between different tile and vector layers on a leaflet powered map.

 

Download the plugin at https://github.com/vogdb/SelectLayersControl

 

//LayerGroup for the geojson features

var sites = L.layerGroup();
var points = [{
"type":"Feature","properties":{"name_1":"Sokoto","ph":6},"geometry":{"type":"Point","coordinates":[5.266603333,13.23052555]}},{"type":"Feature","properties":{"name_1":"Zamfara","ph": 5},"geometry":{"type":"Point","coordinates":[6.3891224,11.62692688]}},
{"type":"Feature","properties":{"name_1":"Niger","ph": 4},"geometry":{"type":"Point","coordinates":[6.208717551,10.06341818]}},{"type":"Feature","properties":{"name_1":"Niger","ph":2},"geometry":{"type":"Point","coordinates":[5.0661535,9.943148283]}},{"type":"Feature","properties":{"name_1":"Niger","ph":2},"geometry":{"type":"Point","coordinates":[6.369077417,9.261618849]}},
{"type":"Feature","properties":{"name_1":"Kaduna","ph":2},"geometry":{"type":"Point","coordinates":[7.9526311,9.642473533]}},{"type":"Feature","properties":{"name_1":"Kaduna","ph":2},"geometry":{"type":"Point","coordinates":[7.611866384,10.5244528]}},
{"type":"Feature","properties":{"name_1":"Kano","ph":7},"geometry":{"type":"Point","coordinates":[8.433710701,11.66701685]}},{"type":"Feature","properties":{"name_1":"Jigawa","ph":9},"geometry":{"type":"Point","coordinates":[9.556229767,12.0879615]}},{"type":"Feature","properties":{"name_1":"Bauchi","ph":7},"geometry":{"type":"Point","coordinates":[10.5985689,11.68706183]}},
{"type":"Feature","properties":{"name_1":"Bauchi","ph":7},"geometry":{"type":"Point","coordinates":[10.19766923,10.30395798]}},{"type":"Feature","properties":{"name_1":"Bauchi","ph":7},"geometry":{"type":"Point","coordinates":[9.295644984,10.54449778]}},{"type":"Feature","properties":{"name_1":"Plateau","ph":5},"geometry":{"type":"Point","coordinates":[9.57627475,9.001034067]}},
{"type":"Feature","properties":{"name_1":"Plateau","ph":5},"geometry":{"type":"Point","coordinates":[9.055105183,9.4420237]}},{"type":"Feature","properties":{"name_1":"Nassarawa","ph":5},"geometry":{"type":"Point","coordinates":[8.393620734,8.499909483]}},{"type":"Feature","properties":{"name_1":"Benue","ph":5},"geometry":{"type":"Point","coordinates":[8.714340467,7.317255466]}},
{"type":"Feature","properties":{"name_1":"Cross River","ph":5},"geometry":{"type":"Point","coordinates":[8.714340467,6.234826366]}},
{"type":"Feature","properties":{"name_1":"Taraba","ph":10},"geometry":{"type":"Point","coordinates":[10.29789415,8.038874867]}},{"type":"Feature","properties":{"name_1":"Taraba","ph":10},"geometry":{"type":"Point","coordinates":[11.34023328,7.377390417]}},{"type":"Feature","properties":{"name_1":"Taraba","ph":3},"geometry":{"type":"Point","coordinates":[11.24000837,8.680314333]}},
{"type":"Feature","properties":{"name_1":"Adamawa","ph":2},"geometry":{"type":"Point","coordinates":[12.48279733,9.522203633]}},{"type":"Feature","properties":{"name_1":"Borno","ph":2},"geometry":{"type":"Point","coordinates":[12.90374198,10.94539745]}}];

//Style the geojson features
var style = {fillColor: 'yellow', color: 'red', weight: 3, opacity: 0.6};

//Convert the features to appear as circular markers, add the style 
and add to LayerGroup –sites
L.geoJson(points, { pointToLayer: function(feature, latlng){marker = L.circleMarker(latlng, style); return marker;}}).addTo(sites);

//Create another variable object LayerGroup –points
var points = new L.LayerGroup();

//Create markers, bind popup display to them and add to 
LayerGroup-points
L.circleMarker([9.00,7.00]).bindPopup("<strong><em style='color:red;'>Red labelled marker</strong></em>").addTo(points),
L.circleMarker([6.00,7.00]).bindPopup("<h4><em style='color:bakground;yellow'>Name: Point<br>Salinity is very high here</h4></em>").addTo(points),
L.circleMarker([10.00,6.00]).bindPopup("<h4 style='padding: 20px;background:yellow; border 2px black;'>Title</h4>").addTo(points),
L.circleMarker([6.00,5.00]).bindPopup("<img src='image.jpg' width=80, height=80/><br>Picture in popup").addTo(points),
L.circleMarker([3.50,7.50]).bindPopup("Source: <a href='https://mapsnigeriainitiative.wordpress.com'>mapsnigeriainitiative</a>").addTo(points);

//Create the attribution for the map display
var mapLink = 'map data &copy;<a href="http://openstreetmap.org">openstreetmap</a>,'+
		 '<a href="https://mapsnigeriainitiative.wordpress.com">mapsnigeriainitiative</a>';

//Create and load tile layers in the variable object –base. 
The tile layers will be the basemaps in the Leaflet map. 
Tiles provided by OpenStreetmap and Stamen
var base = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: mapLink}),
	Toner = L.tileLayer('http://tile.Stamen.com/toner/{z}/{x}/{y}.png', {attribution: mapLink});
//Create the variable map, set the center of the map, layers and zoom.
var map = L.map('map', {center:[9.0, 8.0], zoom: 7, layers: [base, points, sites]});

// Create a variable basemap that will contain the tile layers 
var basemap = {"basemap": base, "Toner": Toner};

//Create a variable object-overlay for the vector layers
var overlay = {"points": points, "sites": sites};


//Add the variables basemap (tile layers) and overlay (vector layers) 
to the Leaflet selectLayers control feature and add to the map
var control = L.control.selectLayers(basemap, overlay, {collapsed: false}).addTo(map);
     

Screenshots of the example showing the Leaflet selectLayers control. 
The screenshot displays when user clicks on basemap-Openstreetlayer 
and vector layer sites, while the lower screenshot displays a Stamen 
basemap and vector layer-points.
Capture-6  

   Capture-4 
 See live map at this link:
http://mayotunde.github.io/selectlayers
Download the plain text version of the source code here - 
https://www.dropbox.com/s/t6dfv4dv3bx0djp/adding%20leaflet%20selectlayer%20plugin%20to%20leaflet%20powered%20maps.txt?dl=0
The source code is below:
nnn-001


Check further documentation for this plugin at 
https://github.com/vogdb/SelectLayersControl

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