@extends('layouts.layout')
@section('content')

<!-- jQuery library -->

<!-- Latest compiled JavaScript -->

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://raw.githubusercontent.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<section class="section">
					<div class="container">
						<div class="section-heading section-heading--center">

  							<h4 class="__title">Take a look where<span class="__subtitle"> our pilots are flying right now!</span></h4>
                <div class="spacer py-6"></div>


            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-12">
                <div class="">
                <div class="" id="">
                 <div class="alert alert-success">
                   To view more accurate flight tracking, logon to iCrew&trade;
                 </div>
                   <div class="">
                      <style>
                         #mapid { height: 480px; }
                      </style>
                      <div id="mapid"></div>
											<script>
	                        var map = L.map('mapid').setView([20, 0], 2);

	                        /////////////////// MAP LEGENDS ///////////////////////
	                        var right_logo_legend = L.control({position: 'bottomright'});
	                        right_logo_legend.onAdd = function (map) {
	                           var div = L.DomUtil.create('div', 'info legend');
	                               div.innerHTML = '<img src="{{ env("VA_URL") }}/iCrew/favicon.png" style="width: 50px; height: auto;" />';
	                        //<br><span class="label label-success">Direct Flights</span><br><span class="label label-warning">Connecting Flights</span>
	                           return div;
	                        };
	                        right_logo_legend.addTo(map);


	                        var left_legend = L.control({position: 'bottomleft'});
	                        left_legend.onAdd = function (map) {
	                           var div = L.DomUtil.create('div', 'info legend');
	                               div.innerHTML = '<h1 class="badge badge-success">0 flights active </h1>';
	                           return div;
	                        };
	                        left_legend.addTo(map);

	                        var flightname_center = L.control({position: 'topright'});
	                        flightname_center.onAdd = function (map) {
	                           var div = L.DomUtil.create('div', 'info legend');
	                               div.innerHTML = '<br><span class="alert alert-success">0 flights active</span>';
	                           return div;
	                        };
	                        flightname_center.addTo(map);

	                        /////////////////// END MAP LEGENDS ///////////////////////

	                        var url = "