Skip to content
Collection of different environmental map layers in an easy to use Leaflet library
JavaScript HTML CSS
Branch: master
Clone or download
sagarpreet-chadha Merge pull request #264 from crisner/issue-250
Fires layer with data from Earth Observatory Natural Event Tracker
Latest commit 069ec41 Oct 13, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github added PR and issue templates (#160) Apr 9, 2019
dist Update file by running grunt build Oct 12, 2019
example Resolved merge conflicts by accepting incoming changes Oct 12, 2019
spec tests for mapknitter layer (#247) Aug 23, 2019
src Resolved merge conflicts by accepting incoming changes Oct 12, 2019
templates removed image and used image url. Also fixed the button on OPENAQ get… Jun 11, 2019
.gitignore gitignore dist files Jul 3, 2019
.travis.yml PLpeople layer added (#206) Jun 17, 2019
Gruntfile.js PLpeople layer added (#206) Jun 17, 2019
LICENSE Initial commit Apr 29, 2018 Update Oct 6, 2019
_SpecRunner.html Update build file and specrunner file Oct 11, 2019
package-lock.json Install grunt Oct 8, 2019
package.json Install grunt Oct 8, 2019

Leaflet Environmental Layers

Build Status npm version js-standard-style Code of Conduct License: GPL v3 Bower Version

Use cases

The library is integrated to following places


The information of each layer can be found here:


Layer Name Color
PurpleAirLayer-HeatMap #8b0000
PurpleAirLayer-Markers #800080
SkyTruth #ff0000
Fractracker #ffff00
ToxicRelease #008000
OdorReport #ff00ff
MapKnitter #D50039
OpenInfraMap_Power #ffc0cb
OpenInfraMap_Telecom #0000ff
OpenInfraMap_Petroleum #a52a2a
OpenInfraMap_Water #4B0082
Justicemap_income #006400
JusticeMap_americanIndian #800000
JusticeMap_asian #ffa500
JusticeMap_black #FFD700
JusticeMap_multi #ffc0cb
JusticeMap_hispanic #DCDCDC
JusticeMap_nonWhite #808080
JusticeMap_white #a52a2a
JusticeMap_plurality #800000
Clouds #80dfff
clouds (classic) #b3f0ff
precipitation #00ff55
precipitation (classic) #00008b
rain #8080ff
rain (classic) #1a1aff
snow #80ffe5
pressure #e62e00
pressure contour (zoom in) #ff3300
temp #ff3300
wind #00008b
Cities (zoom in) #b3ffff
windrose (zoom in) #008000

Quick Setup :

Installation Instructions:

  1. Clone this repository to your local environment.
  2. Run npm install to install all the necessary packages required.
  3. Open examples/index.html in your browser to look at the preview of the library.

Instructions for a developer:

  1. Install grunt -
  2. Make the changes you are working on in respective /src files.
  3. Run grunt build to generate files in the /dist directory.
  4. Run grunt jasmine to run tests on the LEL layers and ensure they pass.
  5. Test your changes on a browser by opening examples/index.html.

Demo :

Checkout this demo :

Features :

Zoom or Pan

Click and drag the map to pan it.

Change the Base Map and Overlay layers

Use the button on right-most corner to change the way the background of the map looks .

See More Data

Toggle certain layers on and off using the Layers button in the toolbar .

Click on a Point

Click on a point or marker on the map to learn more about it .

Add a legend

In src/legendCreation.js, add addLayerNameURLPair(layer_var, "img_url");, where layer_var is consistent with the variable used in example/index.html and img_url is the source of the image to be used as the legend.

Spreadsheet-based layers

We can source locations from a spreadsheet in a format like this:

Title Latitude Longitude Notes
First 29.671282 -95.17829 The first marker
Second 29.760371 -95.504828 The second marker
Third 29.917755 -95.283494 The third marker

The layer is constructed like this:

var layer = L.SpreadsheetLayer({
  url: '', // String url of data sheet
  lat: 'Latitude', // name of latitude column
  lon: 'Longitude', // name of longitude column
  columns: ['Title', 'Notes'], // Array of column names to be used
  generatePopup: function() {
    // function used to create content of popups
  // imageOptions: // optional, defaults to blank
  // sheetNum: // optional, defaults to 0 (first sheet)

Read more here:

We're going to try spinning this out into its own library; see:

Dependencies :

General (required for all layers) :

       <script src="../dist/LeafletEnvironmentalLayers.js"></script>
       <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet">
   <script src="../node_modules/leaflet-spin/example/spin/dist/spin.min.js"></script>  <!-- Compulsory to add -->
   <script src="../node_modules/leaflet-spin/example/leaflet.spin.min.js"></script>

To use Wind Rose Layer :

        <script src="../src/windRoseLayer.js"></script>
        <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet">

To use Wisconsin Non-Metallic Layer :

        <script src=""></script>
        <script src=""></script>

          var Wisconsin_NM = wisconsinLayer(map) ;

To use Fractracker Mobile Layer :

  • Same dependencies as of wisconsin Non-Metallic Layer .

            var FracTracker_mobile = fracTrackerMobileLayer(map) ;

To use Purple Layer :

		<script src="../node_modules/heatmap.js/build/heatmap.min.js"></script>
		<script src="../node_modules/leaflet-heatmap/leaflet-heatmap.js"></script>

Real Time Layers :

1.) city (by openWeather)

    var city = L.OWM.current({intervall: 15, minZoom: 3});

2.) WindRose (by openWeather)

    var windrose = L.OWM.current({intervall: 15, minZoom: 3, markerFunction: myWindroseMarker, popup: false, clusterSize:       50,imageLoadingBgUrl: '' });
windrose.on('owmlayeradd', windroseAdded, windrose);

Open Infra Map :

OpenInfraMap_Power Layer :
var OpenInfraMap_Power = L.tileLayer('https://tiles-{s}{z}/{x}/{y}.png',{
    maxZoom: 18,
    attribution: '&copy; <a href="">OpenStreetMap</a>, <a href="">About OpenInfraMap</a>'
OpenInfraMap_Petroleum Layer :
var OpenInfraMap_Petroleum = L.tileLayer('https://tiles-{s}{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="">OpenStreetMap</a>, <a href="">About OpenInfraMap</a>'
OpenInfraMap_Telecom Layer :
var OpenInfraMap_Telecom = L.tileLayer('https://tiles-{s}{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="">OpenStreetMap</a>, <a href="">About OpenInfraMap</a>'
OpenInfraMap_Water Layer :
var OpenInfraMap_Water = L.tileLayer('https://tiles-{s}{z}/{x}/{y}.png',{
  maxZoom: 18,
  attribution: '&copy; <a href="">OpenStreetMap</a>, <a href="">About OpenInfraMap</a>'

Add Leaflet-FullHash for easy sharing of map :

Steps To add :

1.) Add link :

<script src="../node_modules/leaflet-fullhash/leaflet-fullHash.js"></script>

2.) Once you have initialized the map (an instance of L.Map), add the following code :

// Assuming your map instance is in a variable called map
var hash = new L.Hash(map);    

Add all LEL Layers at once:


Add all layers except some layers:

        exclude: ['mapknitter', 'clouds'],

Add some layers only:

        include: ['mapknitter', 'clouds'],

Turn on Leaflet Hash in the URL:

        exclude: ['mapknitter', 'clouds'],
    hash: true,             // by default this is FALSE
You can’t perform that action at this time.