<!DOCTYPE html>
{% load static%}
{% load leaflet_tags %}
<html lang="en">
    <head>
        {% leaflet_js %}
        {% leaflet_css %}

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="" name="description">
        <meta content="" name="keywords">

        <!-- Favicons -->
        <link href="{% static 'assets/img/wave-favicon.png' %}" rel="icon">
        <link href="{% static 'assets/img/wave.png' %}" rel="apple-touch-icon">

        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">

        <script src="https://cdn.jsdelivr.net/npm/leaflet-webgl-heatmap@0.2.7/dist/leaflet-webgl-heatmap.min.js" integrity="sha256-wz6Wm2bEl0mr5QI3cHRDlNlcch5wgcUfsaJzcVGUM5s=" crossorigin="anonymous"></script>
        <script src="../static/webgl-heatmap.js"></script>

        <!-- Vendor CSS Files -->
        <link href="{% static 'assets/vendor/animate.css/animate.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/aos/aos.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">

        <!-- Template Main CSS File -->
        <link href="{% static 'assets/css/style.css' %}" rel="stylesheet">

        <!-- =======================================================
        * Template Name: Moderna - v4.0.1
        * Template URL: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/
        * Author: BootstrapMade.com
        * License: https://bootstrapmade.com/license/
        ======================================================== -->
    </head>
<title>Custom Map - BBQUDA</title>

<body>


<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center header-transparent">
  <div class="container d-flex justify-content-between align-items-center">
    {% include 'base/logo.html' %}

  <nav id="navbar" class="navbar">
      <ul>
      <li><a href="{% url 'homepage' %}">Home</a></li>
      <li><a href="{% url 'about' %}">About</a></li>
      <li class="dropdown"><a class="active " href="#"><span>Missions</span> <i class="bi bi-chevron-down"></i></a>
        <ul>
        <li><a href="{% url 'upload_log'%}">Upload a file</a></li>
        <li><a href="{% url 'my_missions' %}">Uploaded missions</a></li>
        <li><a href="{% url 'trail_generator' %}">Mission generator</a></li>
        <li><a href="{% url 'kriging_heatmap' %}">Visualizations</a></li>
        </ul>
    </li>
      <li><a href="{% url 'api_page' %}">API</a></li>
      <li><a href="{% url 'contact' %}">Contact Us</a></li>
      <li>{% if request.user.is_authenticated %}
        <a href="{% url 'logout' %}"><button class="login-button">Logout</button></a>
        {% else %}
        <a href="{% url 'login' %}"><button class="login-button">Login</button></a>
        {% endif %}
    </li>
      </ul>
      <i class="bi bi-list mobile-nav-toggle"></i>
  </nav><!-- .navbar -->

  </div>
  </header><!-- End Header -->

  <main id="main">

    <!-- ======= Contact Section ======= -->
    <section class="breadcrumbs">
        <div class="container">

          <div class="d-flex justify-content-between align-items-center">
            <h2>Map</h2>
            <ol class="nav-2-menu">
              <li><a id="nav-2" href="{% url 'homepage' %}">Home</a></li>
              <li><a id="nav-2" href="{% url 'upload_log' %}">Upload</a></li>
              <li><a class="active"  href="{% url 'my_missions' %}">My missions</a></li>
              <li><a id="nav-2" href="{% url 'trail_generator' %}">Mission generator</a></li>
              <li><a id="nav-2" href="{% url 'kriging_heatmap' %}">Visualizations</a></li>
            </ol>
          </div>

        </div>
      </section><!-- End Contact Section -->

      <br>

      <div class="section-title">
        <h2>Custom Trail - Map</h2>
        <p>View your custom mission here.</p>
      </div>

      <div class="card">

        <body>
        <div id="map"></div>
        <div class="card-body" >
            <div class="table-responsive">
                <table class="table" style = "height:500pxs"  >

                    <script>

                            markers = [];
                            lst_coords = [];
                            latitudes =[];
                            longitudes =[];

                        {%for lat in lats%}
                            latitudes.push("{{lat}}");
                        {%endfor%}
                        {%for lon in lons%}
                            longitudes.push("{{lon}}")
                        {%endfor%}

                         for ( var i=0; i < latitudes.length; ++i ) {
                            cur_coord = [];
                            cur_coord.push(latitudes[i]);
                            cur_coord.push(longitudes[i]);
                            lst_coords.push(cur_coord);
                            marker = {
                                "lat": latitudes[i],
                                "lng": longitudes[i],
                                    };
                            markers.push(marker);


                         }



                        function map_init_basic (map, options) {

                            for ( var i=0; i < markers.length; ++i )
                                    {
                                   if (i == markers.length/2){
                                        map.setView(new L.LatLng(markers[i].lat, markers[i].lng), 17);

                                    }
                                  var marker =  L.marker( [markers[i].lat, markers[i].lng] ).setOpacity(0).addTo( map );



                                    }
                             L.polyline(lst_coords, {color: 'red'}).addTo(map);


                        }


                    </script>

                    {% leaflet_map "yourmap" callback="window.map_init_basic" %}


                </table>
            </div>
        </div>
    </div>

</main>
<!-- End #main -->

    {% include 'base/footer.html' %}
    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
    {% include 'base/scripts.html' %}
</body>
</html>





