01.08.2022

function.js

@@ -110,79 +110,46 @@ function show_position(position){
     console.log("Länge: " + position.coords.longitude);
     console.log("Genauigkeit: " + position.coords.accuracy);*/
     let marker = L.marker([position.coords.latitude, position.coords.longitude]).addTo(map);
+    //fetched coordinates get pushed in the Array of coordinates
     latlngs.push(marker.getLatLng());
+    // create a red polyline from an arrays of LatLng points
     let polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
+    // zoom the map to the polyline
     map.fitBounds(polyline.getBounds());
-    distance();
+    //the function is called where the distance is shown in the browser
+    distanceto();
 }
 
 
-function distance(){
-    //console.log(latlngs);
-    var distance = 0;
+function distanceto(){
+    //function wich calculates whole poyline
+    let distance = 0;
     for(let i = 0; i < latlngs.length - 1; i++)
     {
         distance += (latlngs[i].distanceTo(latlngs[i + 1]))/1000;
         console.log(distance);
     }
-    let rounddistance = distance.toFixed(1);
+     //rounds up the number
+    let rounddistance = distance.toFixed(4);
     document.getElementById("case").innerHTML = rounddistance + " km";
+    document.getElementById("distance").value = rounddistance;
+
     //console.log(rounddistance);
 }
-//marker1.addTo(map); ---> wie kann ich eine Variable definieren, 
-//------------------------die auch außerhalb einer Funktion gilt?
-
-
-
-
- //Marker get added
- /*var koordinaten = ["53.468336", "9.960204"];
- var marker1 = L.marker(koordinaten).addTo(map);
- var marker2 = L.marker([53.459333, 10.017835]).addTo(map);
- var marker3 = L.marker([53.444, 9.947]).addTo(map);
- var marker4 = L.marker([53.452, 10.020]).addTo(map);
 
- console.log(marker1.getLatLng());
- let latlngs = Array()
+function list_coordinates(){
+    //document.getElementById(distance).innerHTML = rounddistance;
+}
 
+setInterval(get_coordinates, 1000);
 
- //Get latlng from a marker and push it in the Array "latlngs" ----> durch eine for-Schleife realisierbar?
- latlngs.push(marker1.getLatLng());
- latlngs.push(marker2.getLatLng());
- latlngs.push(marker3.getLatLng());
- latlngs.push(marker4.getLatLng());*/
  
-
- //From documentation http://leafletjs.com/reference.html#polyline
- // create a red polyline from an arrays of LatLng points
- //let polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
-
- // zoom the map to the polyline
- //map.fitBounds(polyline.getBounds());
-
- //calculate the distance between two points
- //var dist = (marker1.getLatLng().distanceTo(marker2.getLatLng()) /*+ marker2.getLatLng().distanceTo(marker3.getLatLng())*/)/1000;
-
- //rounds up the number
- //let rounddist = dist.toFixed(1);
-
- //show this distance in the browser
- //document.getElementById("case").innerHTML = rounddist + " km";
+ 
+ 
 
  
  
  
- //----------- Method for calculating whole polyline ()
-
- /*let distance = 0;
- console.log(latlngs);
+ 
+ 
+ 
\ No newline at end of file
- for(var i = 0; i < latlngs.length - 1; i++)
- {
-    //text += latlngs[i];
-    //distance += ((latlngs[i].distanceTo(latlngs[i + 1]))/1000);
-    distance += (latlngs[i].getLatLng()).distanceTo(latlngs[i + 1].getLatLng());
- }
- let rounddistance = distance.toFixed(1);
- document.getElementById("case").innerHTML = rounddistance + " km";
-
- let distance2 = L.getLatLng.marker1.distanceTo(latlngs[i + 1]);*/
\ No newline at end of file

index.html

@@ -23,7 +23,7 @@
           <ul>
             <li class=""><a class="nav-item" href="#home">Home</a></li>
             <li class=""><a class="nav-item" href="#eintrag">Laufeintrag</a></li>
-            
+            <li class=""><a class="nav-item" href="#messung">Streckenbemessung</a></li>
           </ul>
         </nav>
     </header>
@@ -81,11 +81,15 @@
             <button onclick="deleteEntries()" type="button" id="red-button">Einträge löschen</button>
         </div>
     </section>
-    <section>
+    <section id="messung">
         <div class="section-container">
+            <h2 class="h-underline">
+                Streckenbemessung
+            </h2>
             <form>
                 <!--<input type="text" id="coordinates" name="koordinaten" placeholder="Gib hier deine Koordinaten ein">-->
-                <button onclick="get_coordinates()" id="buttoncoordinates" type="button">Standort ermitteln</button>
+                <button onclick="get_coordinates()" id="buttoncoordinates" type="button">Punkt hinzufügen</button>
+                <!--<button onclick="list_coordinates()" id="buttoncoordinates" type="button">Strecke übermitteln in Lauf-Eintrag</button>-->
             </form>
             <div class="coordinates_output">
             </div>

style.css

@@ -20,10 +20,15 @@ Dies ist eine CSS-Datei für die index.html vom Lauftracker-Projekt
     --footer-color: #969696;
 }
 html{
-    font-size: 10px;
+    font-size: 8px;
     line-height: 1.4;
     scroll-behavior: smooth;
 }
+@media (min-width: 576px){
+    html{
+        font-size: 10px;    
+    }
+}
 body{
     font-size: 1.6rem;
     position: relative;
@@ -33,6 +38,7 @@ ul {
 }
 h1 {
     font-size: 3.8rem;
+    text-transform: uppercase;
     font-weight: 700;
     color: var(--primary);
     width: auto;
@@ -216,7 +222,7 @@ header{
     size: 5;
 }
 .h-underline{
-    width: 80%;
+    /*width: 80%;*/
     text-align: center;
     border-bottom: solid 4px var(--primary);
 }
@@ -228,31 +234,33 @@ form{
     text-align: center;
     padding-top: 30px;
     margin-bottom: 50px;
+    width: 100%;
 }
 input{
     padding: 10px 18px;
     margin: 8px 0;
     box-sizing: border-box;
     font-size: 1.5rem;
-    width: 450px;
-    /*max-width: 90%;*/
+    width: 100%;
+    max-width: 450px;
 }
 textarea{
     padding: 10px 18px;
     margin: 8px 0;
     box-sizing: border-box;
     font-size: 1.5rem;
-    width: 450px;
-    /*max-width: 90%;*/
+    width: 100%;
+    max-width: 450px;
 }
 button{
     padding: 10px 18px;
     margin: 8px 0;
     box-sizing: border-box;
     font-size: 1.5rem;
-    width: 450px;
-    /*max-width: 90%;*/
+    width: 100%;
+    max-width: 450px;
 }
+
 #red-button{
     background-color: rgb(172, 69, 55);
     color: white;
@@ -276,6 +284,9 @@ button{
     flex-direction: column;
 }
 
+
+
+
 /* Distance Value --------------------------------------*/
 .distance-value{
     margin-bottom: 70px;