Map Warning System

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Here data is provided by OpenStreetMap

by jimkennelly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://raw.githubusercontent.com/SamWM/jQuery-Plugins/master/numeric/jquery.numeric.js"></script>
<div id="map"></div>
<h3>
Messaging system
</h3>
Distance (in miles)<input type="text" value="5" id="distanceMiles" />

CSS

#map {
  height: 400px;
}

JavaScript

// center of the map
var center = [42.65260, -73.7562];
var distance;
var map = L.map("map").setView(center, 10);
var currentMarker;
var currentCircle;



L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);



map.on("click", function (event) {
	distance = getDistance()
	if (currentMarker) {
        currentMarker._icon.style.transition = "transform 0.3s ease-out";
        currentMarker._shadow.style.transition = "transform 0.3s ease-out";
     		map.removeLayer(currentCircle);
        
    		currentMarker.setLatLng(event.latlng);
        currentCircle =  L.circle(event.latlng, distanceMeters).addTo(map);
       
         
        setTimeout(function () {
            currentMarker._icon.style.transition = null;
            currentMarker._shadow.style.transition = null;
        }, 300);
        return;
    }
    
    currentCircle =  L.circle(event.latlng, distanceMeters).addTo(map);
    currentMarker = L.marker(event.latlng, {
    	draggable: true
    }).addTo(map).on("click", function () {
    	event.originalEvent.stopPropagation();
    });
    
   
    
});

document.getElementById("done").addEventListener("click", function () {
	currentMarker = null;
});


$(document).ready(function(){
    $(".numeric").numeric();
});

function getDistance(){
  var milesToMeters = 1609.34
	distanceMeters = $("#distanceMiles").val() * milesToMeters;
}