jonathan-beebe/index.html

## index.html
<!doctype html>
<html>
<head>
  <title>Leaflet.js - Mark Radius</title>

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
  <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" /><![endif]-->
  <link rel="stylesheet" href="styles.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="map.js"></script>
</head>
<body>
  <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>
</body>
</html>

## map.js
// 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);
    }
};

Map.prototype.centerOnLocation = function(lat, lng) {

    var self = this;

    this.lat = lat;
    this.lng = lng;

    if(!this.marker) {
        this.marker = L.marker([this.lat, this.lng], {
            draggable: true
        });

        this.marker.on('drag', function(event) {
            self.setLatLng(event.target.getLatLng());
        });

        this.marker
            .animateDragging()
            .addTo(this.map);
    }

    this.map.setView([this.lat, this.lng], 16);
    this.setCircle([this.lat, this.lng], this.milesToMeters(5));
};

Map.prototype.getCurrentLocation = function(success, error) {

    var self = this;

    var onSuccess = function(lat, lng) {
        success(new L.LatLng(lat, lng));
    };

    // get location via geoplugin.net.
    // Typically faster than browser's geolocation, but less accurate.
    var geoplugin = function() {
        jQuery.getScript('http://www.geoplugin.net/javascript.gp', function() {
            onSuccess(geoplugin_latitude(), geoplugin_longitude());
        });
    };

    // get location via browser's geolocation.
    // Typically slower than geoplugin.net, but more accurate.
    var navGeoLoc = function() {
        navigator.geolocation.getCurrentPosition(function(position) {
            success(new L.LatLng(position.coords.latitude, position.coords.longitude));
        }, function(positionError) {
            geoplugin();
            //error(positionError.message);
        });
    };

    if(navigator.geolocation) {
        navGeoLoc();
    }
    else {
        geoplugin();
    }
};

// Overlay message methods

Map.prototype.dismissMessage = function() {
    this.$el.removeClass('show-message');
    this.$overlay.html('');
};

Map.prototype.showMessage = function(html) {
    this.$overlay.html('<div class="center"><div>' + html + '</div></div>');
    this.$el.addClass('show-message');
};

// Conversion Helpers

Map.prototype.milesToMeters = function(miles) {
    return miles * 1069;
};

jQuery(function($) {

    var map = new Map('#map', 51.505, -0.09);

    map.showMessage('<p><span>Acquiring Current Location.</span><br /><br />'
                    + '<span>Please ensure the app has permission to access your location.</span></p>');

    map.getCurrentLocation(function(latLng) {
        map.centerOnLocation(latLng.lat, latLng.lng);
        map.dismissMessage();
    }, function(errorMessage) {
        map.showMessage('<p><span>Location Error:</span><br /><br />'
                    + '<span>' + errorMessage + '</span></p>');
    });

    var s = $('select').on('change', function(e) {
        var value = $(this).val();
        var meters = map.milesToMeters(value);
        map.setCircle([map.lat, map.lng], meters);
    });

});

## styles.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;
}
	<!doctype html>
	<html>
	<head>
	<title>Leaflet.js - Mark Radius</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" /><![endif]-->
	<link rel="stylesheet" href="styles.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="map.js"></script>
	</head>
	<body>
	<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>
	</body>
	</html>
	// 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 © '
	+ '<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);
	}
	};

	Map.prototype.centerOnLocation = function(lat, lng) {

	var self = this;

	this.lat = lat;
	this.lng = lng;

	if(!this.marker) {
	this.marker = L.marker([this.lat, this.lng], {
	draggable: true
	});

	this.marker.on('drag', function(event) {
	self.setLatLng(event.target.getLatLng());
	});

	this.marker
	.animateDragging()
	.addTo(this.map);
	}

	this.map.setView([this.lat, this.lng], 16);
	this.setCircle([this.lat, this.lng], this.milesToMeters(5));
	};

	Map.prototype.getCurrentLocation = function(success, error) {

	var self = this;

	var onSuccess = function(lat, lng) {
	success(new L.LatLng(lat, lng));
	};

	// get location via geoplugin.net.
	// Typically faster than browser's geolocation, but less accurate.
	var geoplugin = function() {
	jQuery.getScript('http://www.geoplugin.net/javascript.gp', function() {
	onSuccess(geoplugin_latitude(), geoplugin_longitude());
	});
	};

	// get location via browser's geolocation.
	// Typically slower than geoplugin.net, but more accurate.
	var navGeoLoc = function() {
	navigator.geolocation.getCurrentPosition(function(position) {
	success(new L.LatLng(position.coords.latitude, position.coords.longitude));
	}, function(positionError) {
	geoplugin();
	//error(positionError.message);
	});
	};

	if(navigator.geolocation) {
	navGeoLoc();
	}
	else {
	geoplugin();
	}
	};

	// Overlay message methods

	Map.prototype.dismissMessage = function() {
	this.$el.removeClass('show-message');
	this.$overlay.html('');
	};

	Map.prototype.showMessage = function(html) {
	this.$overlay.html('<div class="center"><div>' + html + '</div></div>');
	this.$el.addClass('show-message');
	};

	// Conversion Helpers

	Map.prototype.milesToMeters = function(miles) {
	return miles * 1069;
	};

	jQuery(function($) {

	var map = new Map('#map', 51.505, -0.09);

	map.showMessage('<p><span>Acquiring Current Location.</span><br /><br />'
	+ '<span>Please ensure the app has permission to access your location.</span></p>');

	map.getCurrentLocation(function(latLng) {
	map.centerOnLocation(latLng.lat, latLng.lng);
	map.dismissMessage();
	}, function(errorMessage) {
	map.showMessage('<p><span>Location Error:</span><br /><br />'
	+ '<span>' + errorMessage + '</span></p>');
	});

	var s = $('select').on('change', function(e) {
	var value = $(this).val();
	var meters = map.milesToMeters(value);
	map.setCircle([map.lat, map.lng], meters);
	});

	});
	/* 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;
	}