SmartMap Fires, Danger & Modis w/cahcing

by spydmobile

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css">
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.3/leaflet.fullscreen.css">
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.3/Leaflet.fullscreen.min.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css">
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js"></script>
<p>
    <div id="map" style="height: 480px;"></div>
</p>

CSS

<style>
  body { margin:0; padding:0 !important; }
  #map { position:relative; top:0; bottom:0; width:100%!important; }
  .range {
  position:absolute!important;
  width:100%!important;
  }
.leaflet-top .leaflet-control-zoom {
  top:20px!important;
  }
  .attribution {
    background:rgba(255,255,255,0.5);
    position:absolute;
    bottom:0;right:0;
    display:inline-block;
    padding:2px 10px;
    font-size:11px;line-height:18px;
    z-index:1;
    }


  .modis-hot-icon {
  background:#ff8888;
  border:5px solid rgba(255,255,255,0.5);
  color:#fff;
  font-weight:bold;
  text-align:center;
  border-radius:50%;
  line-height:30px;
  }
.fwi {
  font-weight:bold;
  /* border:5px solid rgba(255,255,255,0.5);*/
  text-align:center;
  border-radius:50%;
  line-height:40px;
  }

.fwi-low {
  background:#00ff00;
   color:#000;
  }

.fwi-medium {
  background:#0000ff;
  color:#fff;
  }
.fwi-high {
  background:#ff0;
  color:#000;
  }
.fwi-extreme {
  background:#f00;
  color:#fff;
  }



.fire {
  font-weight:bold;
   border:1px solid rgba(0,0,0,0.5);
  text-align:center;
  border-radius:50%;
  line-height:40px;
  background:#FFA319;
  color:#F00;
  }

.fire-DO {
  border:1px solid #FFA319;
  background:#000!important;
   color:#000!important;
  }


.mpoint {
  border-radius:50%;
  line-height:40px;
  background:#930;
  
  }

JavaScript

console.clear();
// localStorage.clear();
var storage = false;
var map = L.mapbox.map('map', {
    crs: L.CRS.EPSG900913,
},{attributionControl: false,});
var sparcsLand = L.mapbox.tileLayer('sparcsadmin.j1gnkckh');
var sparcsSat = L.mapbox.tileLayer('sparcsadmin.j1mcp2a5');
var   lightningLayer = L.tileLayer.wms("http://gs2.vm.sparcsonline.com/geoserver/wms", {
    layers: 'LastStrike,ltg_last_24',
    format: 'image/png',
    transparent: true,
    version: '1.1.0',
    attribution: "SPARCS"
});


    
var fullscreenControl = new L.Control.Fullscreen().addTo(map);
var baseLayers = {
    'Smart Terrain': sparcsLand.addTo(map),
    'Smart Satellite': sparcsSat,
};
var mainOverlays = {
    '24hr Lightning': lightningLayer,
}
console.log('Creating the switcher object');  


var switcher = L.control.layers(baseLayers, mainOverlays).addTo(map);
map.setView([63, -118], 5);
 
var layerDataArray = [
    {
    "uri": 'http://www.sparcsonline.com/next/sparcs-geojson/danger', 
    "layerName": "dangerLayer",
    "layerLabel": 'Fire Danger',
    "styleFunction": dangerStyle,
    "ttl": 1800*1000
    },
    {
    "uri": 'http://www.sparcsonline.com/next/sparcs-geojson/fires', 
    "layerName": "fireLayer",
    "layerLabel": 'Wildfires',
    "styleFunction": fireStyle,
    "ttl": 1800*1000
    },
    {
    "uri": 'http://www.sparcsonline.com/next/sparcs-geojson/nwt-modis-points', 
    "layerName": "mpointLayer",
    "layerLabel": 'Hot Spots',
    "styleFunction": mpointStyle,
    "ttl": 10500*1000
    },
        {
    "uri": 'http://www.sparcsonline.com/next/sparcs-geojson/canada-modis-poly', 
    "layerName": "mpolyLayer",
    "layerLabel": 'Burned Areas',
    "styleFunction": mpolyStyle,
    "ttl": 10800*1000
    },
] ;

layerDataArray.forEach( function (dataLayer){
  window[dataLayer.layerName]  = new  L.mapbox.featureLayer();
    window[dataLayer.layerName] = getGeoDataOther(dataLayer.uri,   window[dataLayer.layerName], dataLayer.layerLabel, dataLayer.styleFunction,...