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

    <meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>

 BBQUDA

</title>

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />

<!--     Fonts and icons     -->

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<!-- CSS Files -->

<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet" />
<link href="{% static "css/now-ui-dashboard.min.css" %}" rel="stylesheet" />
<link href="{% static "css/demo.css" %}" rel="stylesheet" />

        <div class="wrapper ">
          
            <div class="sidebar" data-color="orange">
    
    <div class="sidebar-wrapper" id="sidebar-wrapper">
        
        <ul class="nav">
          
              <li >
                  <a href="{% url 'dashboard'%}">
                      
                        <i class="now-ui-icons design_app"></i>
                      
                      <p>Dashboard</p>
                  </a>
              </li>
              
              <li >
                  <a href="{% url 'upload_log'%}">
                      
                        <i class="now-ui-icons ui-1_bell-53"></i>
                      
                      <p>Upload Log</p>
                  </a>
              </li>
              
              <li  >
                  <a href="{% url 'upload_csv'%}">
                      
                        <i class="now-ui-icons users_single-02"></i>
                      
                      <p>Upload CSV</p>
                  </a>
              </li>
              
              <li  class="active ">
                  <a href="{% url 'my_missions'%}">
                      
                        <i class="now-ui-icons design_bullet-list-67"></i>
                      
                      <p>Uploaded Missions</p>
                  </a>
              </li>
              <li >
                  <a href="{% url 'trail_generator'%}">
                      
                        <i class="now-ui-icons design_bullet-list-67"></i>
                      
                      <p>Trail Generator</p>
                  </a>
              </li>
              <li  >
                  <a href="{% url 'custom_trails'%}">
                      
                        <i class="now-ui-icons design_bullet-list-67"></i>
                      
                      <p>Custom Trails</p>
                  </a>
              </li>
              <li  >
                  <a href="{% url 'logout'%}">
                      
                        <i class="now-ui-icons design_bullet-list-67"></i>
                      
                      <p>Logout</p>
                  </a>
              </li>
             
        </ul>
    </div>
</div>

<body>
            <div class="main-panel" id="main-panel">
              <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
	<div class="container-fluid">
    <div class="navbar-wrapper">
      
			
      
			<a class="navbar-brand" href="#pablo"> BBQUDA</a>
		</div>

		

	    <div class="collapse navbar-collapse justify-content-end" id="navigation">
      
<ul class="navbar-nav">
 

  
</ul>

        
	    </div>
	</div>
</nav>
<!-- End Navbar -->

                  <div class="panel-header panel-header-sm">
  
  
</div>


                  <div class="content">
                      <div class="row">
  <div class="col-md-12">
    

<div class="card">
    <div class="card-header">
    
        <h4 class="card-title"> Detailed Map</h4>
       
        
    </div>
   
    <body>
    <div id="map"></div>
    <div class="card-body" >
        <div class="table-responsive">
            <table class="table" style = "height:500pxs"  >
            
                <script>
                   
                        markers = [];
                        lst_coords = [];
                        
                    {%for coordinate in coordinates%}
                     cur_coord = []
                     lat = parseFloat("{{coordinate.latitude}}");
                     lng = parseFloat("{{coordinate.longitude}}");
                     cur_coord.push(lat);
                     cur_coord.push(lng);
                     lst_coords.push(cur_coord);
                     water = parseFloat("{{coordinate.water}}");
                     temp = parseFloat("{{coordinate.temp}}");
                     pH = parseFloat("{{coordinate.pH}}");
                     odo = parseFloat("{{coordinate.odo}}");
                     salinity = parseFloat("{{coordinate.salinity}}");
                     turbid = parseFloat("{{coordinate.turbid}}");
                     bga = parseFloat("{{coordinate.bga}}");

                        marker = {
                            "lat": "{{coordinate.latitude}}",
                            "lat_shown": lat.toFixed(2),
                            "lng_shown": lng.toFixed(2),
                            "lng": "{{coordinate.longitude}}" ,
                            "water": water.toFixed(2),
                            "temp": temp.toFixed(2),
                            "pH": pH.toFixed(2),
                            "odo": odo.toFixed(2),
                            "salinity": salinity.toFixed(2),
                            "turbid": turbid.toFixed(2),
                            "bga": bga.toFixed(2),
                                };
                        markers.push(marker);
                    {%endfor%}
                    function map_init_basic (map, options) {
                        
                        for ( var i=0; i < markers.length; ++i ) 
                                {
                              
                              var marker =  L.marker( [markers[i].lat, markers[i].lng] )
                                    .bindPopup( '<a target="_blank">' + 'lat: ' + markers[i].lat_shown + '<br>' + 'long: ' + markers[i].lng_shown + '<br>'
                                                 + 'Water Column (m): ' + markers[i].water +'<br>' +'Temperature (c): '+ markers[i].temp +'<br>' +'pH: '+markers[i].pH +'<br>' +
                                                'ODO mg/L: '+ markers[i].odo+'<br>' +'Salinity (ppt): '+ markers[i].salinity+'<br>' +'Turbid+ NTU: '+markers[i].turbid+'<br>' +
                                                 'BGA-PC cells/mL: ' + markers[i].bga + '</a>').setOpacity(0).addTo( map );
                                marker.on('mouseover', function (e) {
                                    this.openPopup();
                                    });
                                    marker.on('mouseout', function (e) {
                                    this.closePopup();
                                    });
                               
                                if (i == markers.length/2){
                                    map.setView(new L.LatLng(markers[i].lat, markers[i].lng), 17);

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

                         
                    }

                
                </script>

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


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

  </div>
  <div class="col-md-12">
    

  </div>
</div>

                  </div>

                 
             </div>
          
        </div>
        
           

    </body>

</html>





