Leaflet Env w/jq 10

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>
<div id="map"></div>

CSS

body { margin:0; padding:0 !important; }
  #map { position:relative;
        top:0;
        bottom:0;
        width:100%!important;
         height: 500px;
         }



.leaflet-top .leaflet-control-zoom {
  top:30px!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;
  }


  .reticle {
 opacity: 0.2;
    filter: alpha(opacity=20); /* For IE8 and earlier */
  }

.wildfires {
  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;
  }

.wildfires-EX {
  border:1px solid #FFA319;
  background:#000!important;
   color:#000!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) {
   ...