[WIP] Feature es6

.babelrc

@@ -0,0 +1,4 @@
+// .babelrc
+{
+  "presets": ["env"]
+}

README.md

@@ -66,8 +66,9 @@ https://publiclab.org/notes/sagarpreet/06-06-2018/leaflet-environmental-layer-li
 1. Install grunt - https://gruntjs.com/installing-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`.
+4. Run `npm run build` to generate files in the /dist_es5 directory.
+5. Run `grunt jasmine` to run tests on the LEL layers and ensure they pass.
+6. Test your changes on a browser by opening `examples/index.html`.
 
 ## Demo :
 

example/layers.js

@@ -1,100 +1,100 @@
-var bounds = new L.LatLngBounds(
+const bounds = new L.LatLngBounds(
         new L.LatLng(84.67351257, -172.96875),
         new L.LatLng(-54.36775852, 178.59375)
       );
-      var map = L.map("map", {
+      const map = L.map("map", {
         maxBounds: bounds,
         maxBoundsViscosity: 0.75
       }).setView([43, -83], 3);
       map.options.minZoom = 3;
-      var baselayer1 = L.tileLayer(
+      const baselayer1 = L.tileLayer(
         "https://api.tiles.mapbox.com/v4/mapbox.emerald/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2FnYXJwcmVldDk3IiwiYSI6ImNqaXhlZjgwaDJtb3EzcW1zdDdwMzJkODcifQ.MA2YIv6VpGLLAo-QYUudTA",
         {
           attribution:
             '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }
       ).addTo(map);
-      var baselayer3 = L.tileLayer(
+      const baselayer3 = L.tileLayer(
         "https://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2FnYXJwcmVldDk3IiwiYSI6ImNqaXhlZjgwaDJtb3EzcW1zdDdwMzJkODcifQ.MA2YIv6VpGLLAo-QYUudTA",
         {
           attribution:
             '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }
       );
-      var baselayer2 = L.tileLayer(
+      const baselayer2 = L.tileLayer(
         "https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png",
         {
           attribution:
             '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }
       );
-      var baselayer4 = L.tileLayer(
+      const baselayer4 = L.tileLayer(
         "https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2FnYXJwcmVldDk3IiwiYSI6ImNqaXhlZjgwaDJtb3EzcW1zdDdwMzJkODcifQ.MA2YIv6VpGLLAo-QYUudTA",
         {
           attribution:
             '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }
       );
 
-    var PLpeople = L.layerGroup.pLpeopleLayer() ;
-    var PurpleLayer = L.layerGroup.purpleLayer() ;
-    var PurpleAirMarkerLayer = L.layerGroup.layerCode("purpleairmarker") ;
+    const PLpeople = L.layerGroup.pLpeopleLayer() ;
+    const PurpleLayer = L.layerGroup.purpleLayer() ;
+    const PurpleAirMarkerLayer = L.layerGroup.layerCode("purpleairmarker") ;
 
-    var Fractracker = L.layerGroup.layerCode("fractracker") ;
-    var SkyTruth = L.layerGroup.layerCode("skytruth") ;
-    var OdorReport = L.layerGroup.layerCode("odorreport") ;
-    var MapKnitter = L.layerGroup.layerCode("mapknitter") ;
+    const Fractracker = L.layerGroup.layerCode("fractracker") ;
+    const SkyTruth = L.layerGroup.layerCode("skytruth") ;
+    const OdorReport = L.layerGroup.layerCode("odorreport") ;
+    const MapKnitter = L.layerGroup.layerCode("mapknitter") ;
 
-    var ToxicRelease = L.layerGroup.toxicReleaseLayer() ;
+    const ToxicRelease = L.layerGroup.toxicReleaseLayer() ;
 
-    var PFASTracker = L.layerGroup.pfasLayer() ;
+    const PFASTracker = L.layerGroup.pfasLayer() ;
 
 
-    var OpenInfraMap_Power = L.tileLayer('https://tiles-{s}.openinframap.org/power/{z}/{x}/{y}.png',{
+    const OpenInfraMap_Power = L.tileLayer('https://tiles-{s}.openinframap.org/power/{z}/{x}/{y}.png',{
         maxZoom: 18,
         attribution: '&copy; <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', {
+    const OpenInfraMap_Petroleum = L.tileLayer('https://tiles-{s}.openinframap.org/petroleum/{z}/{x}/{y}.png', {
       maxZoom: 18,
       attribution: '&copy; <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', {
+    const OpenInfraMap_Telecom = L.tileLayer('https://tiles-{s}.openinframap.org/telecoms/{z}/{x}/{y}.png', {
       maxZoom: 18,
       attribution: '&copy; <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',{
+    const OpenInfraMap_Water = L.tileLayer('https://tiles-{s}.openinframap.org/water/{z}/{x}/{y}.png',{
       maxZoom: 18,
       attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
     });
 
-    var Justicemap_income = L.tileLayer.provider('JusticeMap.income') ;
-    var JusticeMap_americanIndian = L.tileLayer.provider('JusticeMap.americanIndian') ;
-    var JusticeMap_asian = L.tileLayer.provider('JusticeMap.asian') ;
-    var JusticeMap_black = L.tileLayer.provider('JusticeMap.black') ;
-    var JusticeMap_multi = L.tileLayer.provider('JusticeMap.multi') ;
-    var JusticeMap_hispanic = L.tileLayer.provider('JusticeMap.hispanic') ;
-    var JusticeMap_nonWhite = L.tileLayer.provider('JusticeMap.nonWhite') ;
-    var JusticeMap_white = L.tileLayer.provider('JusticeMap.white') ;
-    var JusticeMap_plurality = L.tileLayer.provider('JusticeMap.plurality') ;
+    const Justicemap_income = L.tileLayer.provider('JusticeMap.income') ;
+    const JusticeMap_americanIndian = L.tileLayer.provider('JusticeMap.americanIndian') ;
+    const JusticeMap_asian = L.tileLayer.provider('JusticeMap.asian') ;
+    const JusticeMap_black = L.tileLayer.provider('JusticeMap.black') ;
+    const JusticeMap_multi = L.tileLayer.provider('JusticeMap.multi') ;
+    const JusticeMap_hispanic = L.tileLayer.provider('JusticeMap.hispanic') ;
+    const JusticeMap_nonWhite = L.tileLayer.provider('JusticeMap.nonWhite') ;
+    const JusticeMap_white = L.tileLayer.provider('JusticeMap.white') ;
+    const JusticeMap_plurality = L.tileLayer.provider('JusticeMap.plurality') ;
 
-    var clouds = L.OWM.clouds({showLegend: true, opacity: 0.5});
-    var cloudscls = L.OWM.cloudsClassic({});
-    var precipitation = L.OWM.precipitation({});
-    var precipitationcls = L.OWM.precipitationClassic({});
-    var rain = L.OWM.rain({});
-    var raincls = L.OWM.rainClassic({});
-    var snow = L.OWM.snow({});
-    var pressure = L.OWM.pressure({});
-    var pressurecntr = L.OWM.pressureContour({});
-    var temp = L.OWM.temperature({});
-    var wind = L.OWM.wind({});
+    const clouds = L.OWM.clouds({showLegend: true, opacity: 0.5});
+    const cloudscls = L.OWM.cloudsClassic({});
+    const precipitation = L.OWM.precipitation({});
+    const precipitationcls = L.OWM.precipitationClassic({});
+    const rain = L.OWM.rain({});
+    const raincls = L.OWM.rainClassic({});
+    const snow = L.OWM.snow({});
+    const pressure = L.OWM.pressure({});
+    const pressurecntr = L.OWM.pressureContour({});
+    const temp = L.OWM.temperature({});
+    const wind = L.OWM.wind({});
 
-    var AQICNLayer = L.layerGroup.aqicnLayer();
-    var OpenAqLayer = L.layerGroup.layerCode("openaq");
-    var LuftdatenLayer = L.layerGroup.layerCode("luftdaten");
-    var OpenSenseLayer = L.layerGroup.layerCode("opensense");
-    var city = L.OWM.current({ intervall: 15, minZoom: 3 });
-    var windrose = L.OWM.current({
+    const AQICNLayer = L.layerGroup.aqicnLayer();
+    const OpenAqLayer = L.layerGroup.layerCode("openaq");
+    const LuftdatenLayer = L.layerGroup.layerCode("luftdaten");
+    const OpenSenseLayer = L.layerGroup.layerCode("opensense");
+    const city = L.OWM.current({ intervall: 15, minZoom: 3 });
+    const windrose = L.OWM.current({
         intervall: 15,
         minZoom: 3,
         markerFunction: myWindroseMarker,
@@ -104,22 +104,22 @@ var bounds = new L.LatLngBounds(
       });
       windrose.on("owmlayeradd", windroseAdded, windrose);
 
-    var IndigenousLandsTerritories = L.layerGroup.indigenousLayers("Territories");
-    var IndigenousLandsLanguages = L.layerGroup.indigenousLayers("Languages");
-    var IndigenousLandsTreaties = L.layerGroup.indigenousLayers("Treaties");
+    const IndigenousLandsTerritories = L.layerGroup.indigenousLayers("Territories");
+    const IndigenousLandsLanguages = L.layerGroup.indigenousLayers("Languages");
+    const IndigenousLandsTreaties = L.layerGroup.indigenousLayers("Treaties");
 
-    var OSMLandfillMineQuarryLayer = L.layerGroup.osmLandfillMineQuarryLayer();
-    var Wisconsin_NM = wisconsinLayer(map);
-    var FracTracker_mobile = fracTrackerMobileLayer(map);
+    const OSMLandfillMineQuarryLayer = L.layerGroup.osmLandfillMineQuarryLayer();
+    const Wisconsin_NM = wisconsinLayer(map);
+    const FracTracker_mobile = fracTrackerMobileLayer(map);
 
-    var baseMaps = {
+    const baseMaps = {
       "Standard": baselayer1 ,
       "Grey-scale": baselayer2 ,
       "Streets": baselayer3 ,
       "Dark": baselayer4
     };
 
-    var overlayMaps = {
+    const overlayMaps = {
     	 "PLpeople" : PLpeople,
          "Wisconsin Non-Metal" : Wisconsin_NM ,
          "FracTracker_mobile" : FracTracker_mobile ,
@@ -167,7 +167,7 @@ var bounds = new L.LatLngBounds(
          "<strong>OSM <span style='color: red'>Landfills</span>, <span style='color: blue'>Mines</span>, <span style='color: green'>Quarries</span></strong>": OSMLandfillMineQuarryLayer
     };
 
-    var allMapLayers = {
+    const allMapLayers = {
       "BL1": baselayer1,
       "BL2": baselayer2,
       "BL3": baselayer3,
@@ -220,8 +220,8 @@ var bounds = new L.LatLngBounds(
       "LSM": OSMLandfillMineQuarryLayer
     };
 
-    var hash = new L.Hash(map, allMapLayers);
-    var leafletControl = new L.control.layers(baseMaps,overlayMaps);
+    const hash = new L.Hash(map, allMapLayers);
+    const leafletControl = new L.control.layers(baseMaps,overlayMaps);
     leafletControl.addTo(map);