SmartMap 0.5.1

Fires, Danger & Modis w/cahcing and measuring and scale

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

.leaflet-control-measure {
    margin-left: 12px !important;
    margin-top: 12px !important;
}
.leaflet-control-measure a {
    display: block !important;
    text-align: center;
    text-decoration: none;
    width: 22px;
    height: 22px;
    text-align: center;
    color: #ccc;
    text-decoration: none;
    font: bold 16px/22px Arial,Helvetica,sans-serif;
    -webkit-border-radius: 4px;
            border-radius: 4px;
}
.leaflet-control-measure > .leaflet-control-measure-enabled {
    color: #000;
}
.leaflet-control-measure > .leaflet-control-measure-disabled {
    color: #ccc;
}
.leaflet-control {
position: static!important;
    ]

JavaScript

L.Control.Measure = L.Control.extend({
    options: {
        position: 'topleft'
    },

    initialize: function (options) {
        L.Util.setOptions(this, options);

        this._enabled = false;
        this._container = null;
        this._button = null;
        this._buttonD = null;
        this._map = null;

        this._features = new L.FeatureGroup();
        this._markerList = [];

        this._startPoint = null;
        this._endPoint = null;
        this._line = null;
    },

    onAdd: function (map) {
        this._map = map;
        this._features.addTo(map);

        this._container = L.DomUtil.create('div', 'leaflet-control-measure leaflet-bar leaflet-control');
        this._button = L.DomUtil.create('a', 'leaflet-bar-part', this._container);
        this._button.href = '#';
        this._button.innerHTML = 'M';
        this._button.title = 'Measure';

        L.DomEvent
            .on(this._button, 'click', L.DomEvent.stopPropagation)
            .on(this._button, 'mousedown', L.DomEvent.stopPropagation)
            .on(this._button, 'dblclick', L.DomEvent.stopPropagation)
            .on(this._button, 'click', L.DomEvent.preventDefault)
            .on(this._button, 'click', this._onClick, this);

        return this._container;
    },

    _enable: function() {
        this._startPoint = null;
        this._endPoint = null;
        this._line = null;

        this._features.clearLayers();
        this._markerList = [];

        this._enabled = true;
        L.DomUtil.addClass(this._button, 'leaflet-control-measure-enabled');
        this._map.on('click', this._onMapClick, this);
    },
    _disable: function() {
        this._enabled = false;
        L.DomUtil.removeClass(this._button, 'leaflet-control-measure-enabled');
        this._map.off('click', this._onMapClick, this);
    },

    _onClick: function() {
        if (this._enabled) this._disable();
        else               this._enable();
    },

    _onMapClick: function(e) {
   ...