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

<!-- jQuery library -->

<!-- Latest compiled JavaScript -->

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></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>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<section class="section">
					<div class="container">
						<div class="section-heading section-heading--center">

  							<h4 class="__title">The destinations<span class="__subtitle"> we fly to #GrowingStrong</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">
                   We have only displayed a fraction of our network. To view more, login to iCrew&trade;
                 </div>
                   <div class="">
                     <style>
                     #mapid { height: 480px; }
                     </style>
                     <div id="mapid"></div>
                     <script>
                     var map = L.map('mapid').setView([{{ env('MAP_LAT') }}, {{ env('MAP_LNG') }}], {{ env('MAP_ZOOM') }});
                  	<!-- var airport = JSON.parse('');
                     <!-- console.log(airport); -->
                  	var markers = L.markerClusterGroup({
                  	spiderfyOnMaxZoom: false,
                  	showCoverageOnHover: false,
                  	zoomToBoundsOnClick: false
                  });
                  	var markersList = [];
                                          L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                     attribution: '{{ env("VA_NAME")}} | <span class="label label-success">Operations</span>',
                     maxZoom: 18,
                     id: 'mapbox/streets-v11',
                     tileSize: 512,
                     zoomOffset: -1,
                     accessToken: '{{ env('MAPBOX_KEY') }}'
                     }).addTo(map);
                     </script>
                   </div>
                   <div class="spacer py-6"></div>

              </div>


          </div>
          </div>
          </div>
          </div>
</section>

<!-- DataTable -->
<!-- Latest compiled and minified CSS -->

<!-- Latest compiled and minified CSS -->

@endsection