The following is a code listing that we will use to describe the required changes from our simple- map.html example to enable Leaflet.FileLayer. There is also an online version onbl.ocks.org⁸⁵and
GitHub⁸⁶.
<!DOCTYPE html>
<html> <head>
<title>LeafletFileLayer Plugin</title> <meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> <link rel="stylesheet" href="http://makinacorpus.github.io/Leaflet.FileLayer/Font-Awesome/cs\ s/font-awesome.min.css" /> </head> <body>
<div id="map" style="width: 600px; height: 400px"></div> <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script> <script src="http://makinacorpus.github.io/Leaflet.FileLayer/leaflet.filelaye\ r.js"> </script> <script src="http://makinacorpus.github.io/Leaflet.FileLayer/togeojson/togeoj\ ⁸³https://github.com/makinacorpus/Leaflet.FileLayer ⁸⁴https://github.com/makinacorpus/Leaflet.FileLayer/archive/master.zip ⁸⁵http://bl.ocks.org/d3noob/7752523 ⁸⁶https://gist.github.com/d3noob/7752523
Leaflet Plugins 57 son.js">
</script> <script>
var map = L.map('map').setView([-41.2858, 174.78682], 14); 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);
var style = {color:'red', opacity: 1.0, fillOpacity: 1.0, weight: 2, \ clickable: false};
L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>'; L.Control.fileLayerLoad({
fitBounds: true,
layerOptions: {style: style,
pointToLayer: function (data, latlng) {
return L.circleMarker(latlng, {style: style}); }},
}).addTo(map);
</script> </body> </html>
There are three ‘blocks’ that have changed in the code from our simple map example. The first is an additional link to load more CSS code;
<link
rel="stylesheet"
href="http://makinacorpus.github.io/Leaflet.FileLayer/Font-Awesome/css/fo\ nt-awesome.min.css"
/>
(Because of the length of the URL for the file, the formatting may make cutting and pasting from the ebook problematic. For a more reliable snippet of code,download the live version from GitHub⁸⁷)
This loads the css file directly from theLeaflet.FileLayer repository on GitHub⁸⁸, so if you are loading from a local file you will need to adjust the path appropriately.
⁸⁷https://gist.github.com/d3noob/7752523
Leaflet Plugins 58 The second is the block that loads the leaflet.filelayer.js script and an additional scripttogeojson.js that was written byTom MacWright⁸⁹to perform the internal conversion of the GPX and KML traces to GeoJSON. <script src="http://makinacorpus.github.io/Leaflet.FileLayer/leaflet.filelayer.js\ "> </script> <script src="http://makinacorpus.github.io/Leaflet.FileLayer/togeojson/togeojson.\ js"> </script>
(Again because of the length of the URL for the file, the formatting may make cutting and pasting from the ebook problematic. For a more reliable snippet of code,download the live version from GitHub⁹⁰).
leaflet.filelayer.jsexists as a separate block of JavaScript code and we are loading the file directly from the Leaflet.FileLayer repository on GitHub (as per the earlier advice, if you are loading from a local file you will need to adjust the path appropriately). Likewise we are also loading thetogeojson.jsfile from GitHub.
The last change to the file is the block of code that runs and configures Leaflet.FileLayer. var style = {color:'red', opacity: 1.0, fillOpacity: 1.0, weight: 2, clickabl\ e: false};
L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>'; L.Control.fileLayerLoad({
fitBounds: true,
layerOptions: {style: style,
pointToLayer: function (data, latlng) {
return L.circleMarker(latlng, {style: style}); }},
}).addTo(map);
The fist line (starting withvar style =) sets the styles for the control and the loaded gps traces. Then the icon to initiate the file opening process is declared (L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';).
The script then sets the options for Leaflet.FileLayer. The first is thefitBoundsoption which will present a loaded gps trace in a window that is zoomed to show its full extent. The second is the layerOptionsoption which will apply the styling to the trace based on our previously declared values (this included the shortpointToLayer function that makes circles from point values in the traces).
⁸⁹https://github.com/mapbox/togeojson ⁹⁰https://gist.github.com/d3noob/7752523
Leaflet Plugins 59 Lastly we add the layer to our map with.addTo(map).
So when we load our page we can see the folder icon in the top left hand corner.
Leaflet.FileLayer plugin
If we click on this folder we will be presented with a dialogue box where we can select a file to load and when we do…
Leaflet.FileLayer plugin with gps trace from Hanmer Springs
Our gps trace is automatically zoomed and panned to present our trace to its full extent.
A copy of this file and a copy of all the files that appear in the book can be downloaded (in a zip file) when youdownload the book from Leanpub⁹¹
Leaflet Plugins 60
Generate a heatmap with Leaflet.heat
A heatmap is a two dimensional representation of values encodes as colours. In our case these colours are superimposed over a map generated using leaflet.js.
The example here represents seismic activity in July / August of 2013 in central New Zealand, when they were unfortunate enough to experience a series of earthquakes.
Leaflet.heat representation of earthquakes in central New Zealand
In areas of greater intensity and density, the heatmap produces a gradient that varies from blue to red. This example shows a definite region of increased activity over the time in question. There are several variations on heatmap plugins for Leaflet. The one we are going to examine is calledLeaflet.heat⁹². It is fairly new (at time of writing), and it builds on a separate JavaScript library calledsimpleheat⁹³. Both of these have been developed by Vladimir Agafonkin (yes, the developer of Leaflet), so they come with a considerable pedigree.