<!DOCTYPE html>

<html>

<head>
  <title>o-search</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--Import Google Icon Font-->
  <link type="text/css" rel="stylesheet" href="/static/css/material-icons.css">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection" />
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
      .map {
        width: 100%;
        height:800px;
      }
    </style>
  <style>
    .small { 
      font-size: x-small;
    }

    </style>
    <!--Leaflet-->
     <link rel="stylesheet" href="/static/css/leaflet.css" />
   <script src="/static/js/leaflet.js"></script>

    <script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
      $('.tooltipped').tooltip();
      $('.fixed-action-btn').floatingActionButton({direction: 'bottom'});
      
        var map = L.map('mapid').setView([43.55, 1.49], 11);
        var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // LIGNE 20
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19
        });
    
        map.addLayer(osmLayer);

        var partners = new L.geoJson();
        partners.addTo(map);

        $.ajax({
            dataType: "json",
            url: "/static/partners.json",
            success: function(data) {
                $(data.features).each(function(key, data) {
                    partners.addData(data);
                });
            }
            }).fail(function() {console.log("Failed to load JSON")});

    });
    </script>
</head>

<body>

  {{ template "floating_menu.tpl" . }} 
    
    <div class="row">
      <div class="center-align">
       <a href="/"><img src="/static/img/O-cloud.svg" width="10%" height="auto"/></a>
      </div>
      <div id="mapid" class="map">
      </div>
    </div>
          
  <script type="text/javascript" src="/static/js/materialize.min.js"></script>

</body>

</html>