Leaflet.js - Mark Radius

Show your current location in Leaflet.js/OpenStreetMap and draw a circle around the point. Utilizes geoplugin.net & the browser's built in geolocation.

by Rolf Friedrich

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<script src="http://maps.stamen.com/js/tile.stamen.js"></script>
<div class="form">
    <label>Operating Radius: </label>
    <select name="radius">
        <option value="5">5 Miles</option>
        <option value="10">10 Miles</option>
        <option value="25">25 Miles</option>
    </select>
</div>
<div id="map">
    <div class="map-overlay"></div>
    <div class="map-container"></div>        
</div>

CSS

/* disable selection on all elements */                                                                                 
* {                                                                                                                     
    -webkit-user-select: none;                                                                                          
    user-select:none;                                                                                                   
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

#map {
    position: absolute;
    top: 35px;
    bottom: 25px;
    right: 25px;
    left: 25px;    
    box-shadow: 0 4px 16px 0 black;
}

#map > div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#map.show-message {
    pointer-events: none;
}

#map .map-overlay {
    display: none;
    z-index: 2;
}

#map.show-message .map-overlay {
    display: block;
    background: rgba(0,0,0,0.5);   
    text-align: center;
    color: #eee;
    text-shadow: 0 -1px 1px black;
}

.center {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

.center > div {
    padding: 20%;
    display: table-cell;
    vertical-align: middle;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
  -webkit-transition: margin 0.2s;
     -moz-transition: margin 0.2s;
       -o-transition: margin 0.2s;
          transition: margin 0.2s;
}

JavaScript

// Animated marker via http://bl.ocks.org/4284949
L.Marker.prototype.animateDragging = function () {
  
  var iconMargin, shadowMargin;
  
  this.on('dragstart', function () {
    if (!iconMargin) {
      iconMargin = parseInt(L.DomUtil.getStyle(this._icon, 'marginTop'));
      shadowMargin = parseInt(L.DomUtil.getStyle(this._shadow, 'marginLeft'));
    }
  
    this._icon.style.marginTop = (iconMargin - 15)  + 'px';
    this._shadow.style.marginLeft = (shadowMargin + 8) + 'px';
  });
  
  return this.on('dragend', function () {
    this._icon.style.marginTop = iconMargin + 'px';
    this._shadow.style.marginLeft = shadowMargin + 'px';
  });
};

var Map = function(elem, lat, lng) {
    this.$el = $(elem);
    this.$overlay = this.$el.find('.map-overlay');
    this.$map = this.$el.find('.map-container');
    this.init(lat, lng);
};

Map.prototype.init = function(lat, lng) {
    
    this.lat = lat;
    this.lng = lng;
    
    this.map = L.map(this.$map[0]).setView([lat, lng], 13);
    
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var mapTiles = new L.TileLayer(osmUrl, {
        attribution: 'Map data &copy; '
        + '<a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
        + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    });
    
    this.map.addLayer(mapTiles);
};

Map.prototype.setCircle = function(latLng, meters) {
    if(!this.circle) {
        this.circle = L.circle(latLng, meters, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.3
        }).addTo(this.map);
    }
    else {
        this.circle.setLatLng(latLng);
        this.circle.setRadius(meters);
        this.circle.redraw();
    }
    this.map.fitBounds(this.circle.getBounds());
};

Map.prototype.setLatLng = function(latLng) {
    this.lat = latLng.lat;
    this.lng = latLng.lng;
    
    if(this.circle) {
        this.circle.setLatLng(latLng);
    }          ...