Untitled

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

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
    <script src = "https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"> </script>
    <link rel="stylesheet" href="../src/leaflet-search.css" />
    <script src = "leaflet-search.js"></script>
     <link rel="stylesheet" href="leaflet-search.css" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<style>
    body,
html {
  height: 100%;
  font-family:Arial;
}

#map {
  width: 100%;
  height: 100%;
  z-index:100;
}
#mapSearchContainer{
  position:fixed;
  top:20px;
  right: 40px;
  height:30px;
  width:180px;
  z-index:110;
  font-size:10pt;
  color:#5d5d5d;
  border:solid 1px #bbb;
  background-color:#f8f8f8;
}
.pointer{
  position:absolute;
  top:86px;
  left:60px;
  z-index:99999;
}
    </style>
<body>
    <div id="map"></div>
<div class='pointer'></div>

<script>
// Initialize the map and assign it to a variable for later use
var marker;
var start;
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);
});

function u(){
    if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(displayLocationInfo);
        }
    return [50.7833, 30.4167];
}
L.control.scale().addTo(map);

// Create a Tile Layer and add it to the map
//var tiles = new L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png').addTo(map);
 //L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
   //  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 //}).addTo(map);

 L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
  attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
}).addTo(map);
  var searchControl = new L.esri.Controls.Geosearch().addTo(map);

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

    async function getLocation() {
      if (navigator.geolocation) {
         await navigator.geolocation.getCurrentPosition(await function (data) {
             //alert("fwe")
             start = [data.coords.latitude ,data.coords.longitude]});
               // alert(start)
      } else {
          start = [41.575730,13.002411]
      }
    }

    function showPosition(position) {
      start = [position.coords.latitude ,position.coords.longitude];
    }


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

     //alert(start)
       // getLocation();
      //  alert(start)
   /* results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
    alert(results.length)*/
  });

function getPosition() {
    return new Promise((res, rej) => {
        navigator.geolocation.getCurrentPosition(res, rej)
    });
}


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

         // plot the currLocation on Google Maps, or handle accordingly:

         //new google.maps.Marker({ title: 'Current Location',
           //                       map: map,
             //                     position: currLocation });
        if (marker)
            map.removeLayer(marker);
        marker = L.marker([position.coords.latitude,position.coords.longitude],{}).addTo(map);
         map.panTo(currLocation);
      });
   }
}

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

setTimeout(function(){$('.pointer').fadeOut('slow');},3400);


    </script>
</body>
</html>