JSFiddle - React, Tailwind, and code Playground

by johannpickard

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <style>
        #map{
            height: 80%;
            width: 80%;
        }
    </style>
    <title>Maps</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="data.js"></script>
    <script src="graph.js"></script>
    <script src="routing.js"></script>
</head>

<body>
    <nav class="navbar navbar-inverse">
            <div class="container-fluid">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">A.I.R.S.</a>
              </div>
              <ul class="nav navbar-nav">
                <li><a href="maps.html">Map</a></li>
              </ul>
            </div>
    </nav>

    <h3>Routing</h3>
    Enter the marker-id:
    <br>
    <input type="text" id="end_point">
    <button id="getRoute">submit</button>    


    <div id="map" style="position:fixed; left: 10%;"></div>
    <br>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrgGGbiHgV4n7ykSNmc8ZpxBv2HIbe2xg&libraries=drawing&callback=initMap">
    </script>
    <script>
        var customLabel = {
            terminal: {
                label: 'T'
            }
        };
        var airport = {
            lat: 33.64017019720775,
            lng: -84.444197108928
        };
        var Path; // Polyline
        var map;
        function initMap(){
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 18,
                center: airport,
                mapTypeId: 'terrain'
            });
            map.data.loadGeoJson(data);
            
         ...

JavaScript

/////////////////////////
/// The following is from routing.js
/////////////////////////
var graph = new DirectedGraph(); //Required by connector
var INFINITY = 1 / 0;
var x_path = [];

function route_setup(){
    
    var end_point = parseInt(document.getElementById("end_point").value);
    
    
    connector();
    console.log("crossed conn"); 
    var out = djikstra(graph, '0');
    console.log("crossed djikstra");
    for (i = 0; i < data.features.length; i++) {
        for (j = 0; j < out.shortestPaths[end_point].length; j++) {
            if (String(i) == out.shortestPaths[end_point][j]) {
                var x_i = i;
                x_path.push({
                    lat: data.features[x_i].geometry.coordinates[1],
                    lng: data.features[x_i].geometry.coordinates[0]
                });
            }
        }
    }
    x_path.push({
        lat: data.features[end_point].geometry.coordinates[1],
        lng: data.features[end_point].geometry.coordinates[0]
    });

    return x_path;
}

function DirectedGraph() {
    this.vertices = {};
    this.addVertex = function(name, edges) {
        edges = edges || null;
        this.vertices[name] = edges;
    };
}

function djikstra(graph, startVertex) {
    var dist = {};
    var prev = {};
    var q = {};
    var shortestPaths = {};

    for (var vertex in graph.vertices) {
        dist[vertex] = INFINITY;
        prev[vertex] = null;
        q[vertex] = graph.vertices[vertex];
        shortestPaths[vertex] = [];
    }

    dist[startVertex] = 0;

    while (Object.keys(q).length !== 0) {
        var smallest = findSmallest(dist, q);
        var smallestNode = graph.vertices[smallest];
        //searches for the vertex u in the vertex set Q that has the least dist[smallest] value.

        for (var neighbor in smallestNode) {
            var alt = dist[smallest] + smallestNode[neighbor];
            //smallestNode[neighbor] is the distance between smallest and neighbor
            if (alt <...