https://www.npmjs.com/package/leaflet-environmental-layers
Search leaflet-environmental-layers here : https://bower.io/search/
The information of each layer can be found here : https://publiclab.org/notes/sagarpreet/06-06-2018/leaflet-environmental-layer-library
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 |
To set up the library -
- Clone this repo to your local environment.
- Run
npm install
to install all the neccessary packages required. - Open
examples/index.html
to look at the preview of the library.
Checkout this demo : https://publiclab.github.io/leaflet-environmental-layers/example/index.html#3/43.00/-46.23
Click and drag the map to pan it.
Use the button on right-most corner to change the way the background of the map looks .
Toggle certain layers on and off using the Layers button in the toolbar .
Click on a point or marker on the map to learn more about it .
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.
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: 'https://docs.google.com/spreadsheets/d/14BvU3mEqvI8moLp0vANc7jeEvb0mnmYvH4I0GkwVsiU/edit?usp=sharing', // 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)
});
layer.addTo(map);
Read more here: https://github.com/publiclab/leaflet-environmental-layers/blob/master/src/util/googleSpreadsheetLayer.js
We're going to try spinning this out into its own library; see: publiclab#121
<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>
<script src="../src/windRoseLayer.js"></script>
<link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
var Wisconsin_NM = wisconsinLayer(map) ;
-
Same dependencies as of wisconsin Non-Metallic Layer .
var FracTracker_mobile = fracTrackerMobileLayer(map) ;
<script src="../node_modules/heatmap.js/build/heatmap.min.js"></script>
<script src="../node_modules/leaflet-heatmap/leaflet-heatmap.js"></script>
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: 'https://openweathermap.org/img/w0/iwind.png' });
windrose.on('owmlayeradd', windroseAdded, windrose);
var OpenInfraMap_Power = L.tileLayer('https://tiles-{s}.openinframap.org/power/{z}/{x}/{y}.png',{
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
});
var OpenInfraMap_Petroleum = L.tileLayer('https://tiles-{s}.openinframap.org/petroleum/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
});
var OpenInfraMap_Telecom = L.tileLayer('https://tiles-{s}.openinframap.org/telecoms/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
});
var OpenInfraMap_Water = L.tileLayer('https://tiles-{s}.openinframap.org/water/{z}/{x}/{y}.png',{
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
});
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);