add generate behaviour

Author: emamut

app.js

@@ -1,14 +1,14 @@
 var map = L.map('map').setView([-0.2200455, -78.5009917], 10),
   wayPoints = [
-    L.latLng(-0.128265, -78.362528),
-    L.latLng(-0.9322002, -78.6225983),
-    L.latLng(-0.95585, -78.850288),
-    L.latLng(-0.8700321, -78.8993113),
-    L.latLng(-1.6746425, -78.6502389),
-    L.latLng(-1.4693018, -78.8169396),
-    L.latLng(-2.0556571, -78.76386),
-    L.latLng(-2.201431, -78.846513),
-    L.latLng(-2.2013104, -78.8477451),
+    // L.latLng(-0.128265, -78.362528),
+    // L.latLng(-0.9322002, -78.6225983),
+    // L.latLng(-0.95585, -78.850288),
+    // L.latLng(-0.8700321, -78.8993113),
+    // L.latLng(-1.6746425, -78.6502389),
+    // L.latLng(-1.4693018, -78.8169396),
+    // L.latLng(-2.0556571, -78.76386),
+    // L.latLng(-2.201431, -78.846513),
+    // L.latLng(-2.2013104, -78.8477451),
   ],
   myStyle = {
     color: '#ff7800',
@@ -18,40 +18,52 @@ var map = L.map('map').setView([-0.2200455, -78.5009917], 10),
 
 L.tileLayer.provider('CartoDB.Voyager').addTo(map);
 
-let routing = L.Routing.control({
-  waypoints: wayPoints,
-  autoRoute: true,
-  routeWhileDragging: true,
-}).addTo(map);
-routing.hide();
-
-routing.on('routeselected', function (e) {
-  let r = e.route,
-    line = L.Routing.line(r),
-    bounds = line.getBounds();
-
-  var result = {
-    type: 'FeatureCollection',
-    features: [
-      {
-        type: 'Feature',
-        properties: {},
-        geometry: {
-          type: 'LineString',
-          coordinates: [],
+function generateResult() {
+  let tempArray = JSON.parse(document.getElementById('coordinates').value);
+
+  tempArray.map(function (item) {
+    wayPoints.push(L.latLng(item.lat, item.lng));
+  });
+
+  let routing = L.Routing.control({
+    waypoints: wayPoints,
+    autoRoute: true,
+    routeWhileDragging: true,
+  }).addTo(map);
+  routing.hide();
+
+  routing.on('routeselected', function (e) {
+    let r = e.route,
+      line = L.Routing.line(r),
+      bounds = line.getBounds();
+
+    var result = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'LineString',
+            coordinates: [],
+          },
         },
-      },
-    ],
-  };
+      ],
+    };
+
+    map.fitBounds(bounds);
 
-  map.fitBounds(bounds);
+    r.coordinates.map(function (item) {
+      result.features[0].geometry.coordinates.push([item.lng, item.lat]);
+    });
 
-  r.coordinates.map(function (item) {
-    result.features[0].geometry.coordinates.push([item.lng, item.lat]);
+    document.getElementById('result').value = JSON.stringify(result);
   });
+}
 
-  document.getElementById('result').value = JSON.stringify(result);
-});
+function cleanTextarea() {
+  document.getElementById('coordinates').value = '';
+}
 
 function SelectAll(id) {
   document.getElementById(id).focus();

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Generate GeoJSON from cordinates</title>
+    <title>Generate GeoJSON from coordinates</title>
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
@@ -40,7 +40,7 @@
     <div class="container-fluid">
       <header class="row justify-content-between bg-primary text-white py-2">
         <div class="col">
-          <h1 class="font-source-sans">Generate GeoJSON from cordinates</h1>
+          <h1 class="font-source-sans">Generate GeoJSON from coordinates</h1>
         </div>
       </header>
       <div class="container">
@@ -50,8 +50,37 @@ <h1 class="font-source-sans">Generate GeoJSON from cordinates</h1>
               This tool uses Leaflet and ES6 to generate a route via OSMR using
               the coordinates entered below.
             </p>
-            <textarea name="" id="" rows="10" class="form-control"></textarea>
-            <button class="btn btn-lg btn-success mt-2">Generate</button>
+            <textarea
+              name=""
+              id="coordinates"
+              rows="10"
+              class="form-control"
+              placeholder="Add waypoints in this format [{lat: x, lng: y}, {lat: x, lng: y} ...]"
+            >
+[{"lat": -0.128265, "lng": -78.362528},
+{"lat": -0.9322002, "lng": -78.6225983},
+{"lat": -0.95585, "lng": -78.850288},
+{"lat": -0.8700321, "lng": -78.8993113},
+{"lat": -1.6746425, "lng": -78.6502389},
+{"lat": -1.4693018, "lng": -78.8169396},
+{"lat": -2.0556571, "lng": -78.76386},
+{"lat": -2.201431, "lng": -78.846513},
+{"lat": -2.2013104, "lng": -78.8477451}]
+            </textarea>
+            <div class="w-100 d-flex">
+              <button
+                class="btn btn-lg btn-success mt-2 me-2"
+                onClick="generateResult()"
+              >
+                Generate
+              </button>
+              <button
+                class="btn btn-lg btn-secondary mt-2"
+                onClick="cleanTextarea()"
+              >
+                Clean
+              </button>
+            </div>
           </div>
           <div class="col">
             <h5 class="font-source-sans">Result:</h5>