SmartMap

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;
  }

JavaScript

console.clear()
var serverUrl = 'http://localhost:88';
var storage = false;
if (supports_html5_storage()){
storage = true;

function finishedLoading(e){
  var foo = e.layer;
//  console.log('done loading...');
//  console.log(foo);
}

var map = L.mapbox.map('map', {
    crs: L.CRS.EPSG900913,

},{attributionControl: false,});

//var credits = L.control.attribution().addTo(map);
//credits.addAttribution('Credits: Penny Dog Mapping Co.');

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 dangerData = serverUrl + '/sparcs-geojson/danger';
var dangerLayer = new  L.mapbox.featureLayer();
    dangerLayer.loadURL(dangerData)
    .on('layeradd', dangerConfig);


var fireData = serverUrl + '/sparcs-geojson/fires';
var fireLayer = new  L.mapbox.featureLayer();
    fireLayer.loadURL(fireData)
    .on('ready', refreshFires)
    .on('layeradd', fireConfig);



var modisPointData = serverUrl + '/sparcs-geojson/nwt-modis-points';
var modisPointLayer = new  L.mapbox.featureLayer();
    modisPointLayer.loadURL(modisPointData)
    .on('ready', refreshModisPoint)
    .on('layeradd', modisPointConfig);
//    .on('click', function(e) {
//        map.panTo(e.layer.getLatLng());
//    })
    //.addTo(map)
//    .on('load', finishedLoading);





var modisPolyData = serverUrl + '/sparcs-geojson/canada-modis-poly';
var modisPolyLayer = new  L.mapbox.featureLayer();
    modisPolyLayer.loadURL(modisPolyData)
    .on('ready', refreshModisPoly)
    .on('layeradd', modisPolyConfig)
    .on('load', finishedLoading);

var fullscreenControl = new L.Control.Fullscreen().addTo(map);


// We use this jQurey trick to wait until the DOM is fully loaded before we try to connect with external...