Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" >
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" >
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" >
   <script src = "leaflet-search.js"></script>
     <link rel="stylesheet" href="leaflet-search.css" />

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal
</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p><div id="map" style="height:380px"></div></p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" onclick="saveLocation()">Save changes</button>
    </div>
    </div>


<script>

  var map = L.map('map', {
    // Set latitude and longitude of the map center (required)
    center: [50.7833, 30.4167],
    // Set the initial zoom level, values 0-18, where 0 is most zoomed-out (required)
    zoom: 12,
    minZoom: 3,
}).on('click', function(e) {
    if (marker)
            map.removeLayer(marker);
    marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
    map.panTo(e.latlng);
});

L.control.scale().addTo(map);

 L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
  attribution: ''
}).addTo(map);

var marker;

map.on('click', function(e) {
    if( !marker ) {

        marker = L.marker(e.latlng).addTo(map);

    }
});


  var searchControl = new L.esri.Controls.Geosearch().addTo(map);

  var results = new L.LayerGroup().addTo(map);


  searchControl.on('results', function(data){
    if(marker) {
        map.removeLayer(marker);
    }
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
        marker = L.marker([data.results[i].latlng.lat, data.results[i].latlng.lng]).addTo(map);
       map.panTo(data.results[i].latlng);
        //  map.flyTo([data.results[i].latlng.lat, data.results[i].latlng.lng],100);
        break;
    }

  });

$('#myModal').on('shown',function(){
    L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
      plotCurrentLocation(map);
});

$('#myModal').on('hidden',function(){
    if( marker ) {
        map.removeLayer(marker);
        marker = null;
    }
});


function plotCurrentLocation(map) {
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
         var currLocation = new L.latLng(position.coords.latitude,position.coords.longitude);

        if (marker)
            map.removeLayer(marker);
        marker = L.marker([position.coords.latitude,position.coords.longitude],{}).addTo(map);
         map.panTo(currLocation);
      });
   }
}

function saveLocation(){
    //alert(marker.getLatLng().lat);
    $('#myModal').modal('hide');
}

   $(document).ready(function() {
         plotCurrentLocation(map);
   })


</script>


</body>
</html>