Bootstrap 4

by jimkennelly

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<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">
<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">NYSAR Messaging</a>
        </div>
    </div>
    
    <div id="map"></div>
    
   <form>

  <div class="form-group">
    <label for="exampleFormControlSelect1">Miles</label>
    <input class="form-control" value="5" id="distanceMiles">

  </div>

  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
  <input type="submit" value="submit"  class="btn btn-primary">
</form>

</div>

CSS

body {
    margin: 10px;
}

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