Kurze Scripte und Codeschnipsel ,tourenplaner mit strassenangabe

tourenplaner-mit-strassenangabe.php

Quell Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Leaflet Routing Machine Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  <style>
     #map{
    height: 500px;
 }
 .map{
    height: 500px;
 }
nav{
  display:flex;
}
nav .text{
  width:46%;
}
#bbu{
  display:flex;
}
#locate-position{
  position:absolute;
  top:140px;
  left:25px;
  z-index:9999;
  height:30px;
  width:30px;
  overflow:hidden;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
#locate-position img{
  width:100%;
}
    
  </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
	<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
</head>
<body>
<div id="data"></div> 
<nav>
    <span class="text">Start Adresse 
          <input type="text" id="start">
    </span>
    <span class="text">End Adresse 
          <input type="text" id="ende">
    </span>
  <span id="bbu">
    <button id="reset">Reset</button>
    <button id="route">Route</button>
  </span>
</nav>
    <div id="map" class="map">
    </div>
          <button id="locate-position" class="uk-button uk-button-success"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSoUPaqMbZ2oCU92b6RTlTMIfQuYfVMW2WKpl4IwdsJQbp5n6u"></button>
  
  <!--
    <script src="leaflet.js"></script>
-->
  <script>
    
    
lat=8.9596;
ing=53.3456;
lat1=8.9500;
ing1=53.3400;
se=0;

 var map = L.map('map').setView([ing,lat], 10);

 
function onLocationFound(e){

  console.log(e)
  cord=e.latlng;
  latti=cord.lat;
  ingi=cord.lng;
  console.log(latti+'-'+ingi)
  if(se==2){
    se=0;
  }
  if(se==0){
      $('#start').val(latti+'-'+ingi);
         ing2=latti;
         lat3=ingi;
    
  }
  if(se==1){
      $('#ende').val(latti+'-'+ingi);

      ing4=latti;
      lat5=ingi;
  }
  se++
    //  var radius = e.accuracy / 2;
   // L.marker(e.latlng).addTo(map)
      //  .on('click', function(){
     //     alert(e.latIng);
     //   }) 
  //alert(radius)
       L.marker(e.latlng).addTo(map).bindPopup('Kordinaten '+latti+'-'+ingi).openPopup();
   // L.circle(e.latlng, radius).addTo(map);
}

map.on('click', onLocationFound);

$('#locate-position').on('click', function(){
     map.locate({setView: true, maxZoom: 15});
});
 



L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);
/*
L.Routing.control({
    waypoints: [
        L.latLng(ing, lat),
        L.latLng(ing1, lat1)
    ],
    routeWhileDragging: false
}).addTo(map);
*/
/*
		L.circle([ing,lat], 500, {
			color: 'red',
			fillColor: '#f03',
			fillOpacity: 0.5
		}).addTo(map).bindPopup("I am a circle.");

		L.circle([ing1,lat1], 500, {
			color: 'red',
			fillColor: '#f03',
			fillOpacity: 0.5
		}).addTo(map).bindPopup("I am a circle.");
*/
/*
 L.marker([52.20,58.21]).addTo(map).bindPopup("<b>1Hello world!</b><br>I am a popup1.").openPopup();
*/



function onLocationError(e) {
    alert(e.message);
}
map.on('locationerror', onLocationError);

$('#route').click(function(){
L.Routing.control({
    waypoints: [
        L.latLng(ing2, lat3),
        L.latLng(ing4, lat5)
    ],
    routeWhileDragging: false
}).addTo(map);
})


$('#reset').click(function(){
  $('#start').val('');
  $('#ende').val('');
  se=0;
})




 
map.on('move', function(){
  var zm = map.getZoom();
  var ctr = map.getCenter(); 
  var ll = 'ZOOM:' + zm + ' | MAPCENTER: Lat: '+ ctr['lat'].toFixed(4) + ' Lng: '+ ctr['lng'].toFixed(4) + ' | <span id="recenter">Re-center</span>';
   $('#data').html(ll); 
});

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