{% load gnm l10n %}
{{ cell.media }}
{% localize off %}
<div class="cell map">

  <form id="airquality-search">
    <input name="q"><button></button>
  </form>

  <div class="loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
    </svg>
  </div>

<div class="combo-cell-map" data-init-state="{{ initial_state }}"
        data-init-zoom="{{ initial_zoom }}" data-min-zoom="{{ min_zoom }}"
        data-include-geoloc-button="true"
        data-max-zoom="{{ max_zoom }}" data-init-lat="{{ init_lat }}"
        data-init-lng="{{ init_lng }}"
        data-tile-urltemplate="{{ tile_urltemplate}}" data-map-attribution="{{ map_attribution}}"
        {% if group_markers %}data-group-markers="1"{% endif %}
        {% if max_bounds.corner1.lat %}
        data-max-bounds-lat1="{{ max_bounds.corner1.lat }}"
        data-max-bounds-lng1="{{ max_bounds.corner1.lng }}"
        data-max-bounds-lat2="{{ max_bounds.corner2.lat }}"
        data-max-bounds-lng2="{{ max_bounds.corner2.lng }}"
        {% endif %}
        data-cell-id="0"
      >
      <span><!-- so it doesn't get marked as empty-cell --></span>
</div>
<script>
  var tiles_0 = [];
  {% for layer in tiles_layers %}
    tiles_0.push({
      tile_urltemplate: {{ layer.tile_urltemplate|as_json|safe }},
      map_attribution: {{ layer.map_attribution|as_json|safe }},
      opacity: {{ layer.opacity|as_json|safe }}
    });
  {% endfor %}
  var geojson_0 = [];
</script>

<div class="minitiles"><span><!-- so it doesn't get marked as empty-cell --></span></div>

</div>
{% if place_geoloc %}{{place_geoloc|first|json_script:"place-geoloc"}}{% endif %}
{% if place2_geoloc %}{{place2_geoloc|first|json_script:"place2-geoloc"}}{% endif %}
        <script>
$(function() {
  var $map_widget = $('div.combo-cell-map');
  var map = $map_widget[0].leaflet_map;
  var places_geoloc = [];
  var once = false;
  if (document.getElementById('place-geoloc')) {
    places_geoloc.push(JSON.parse(document.getElementById('place-geoloc').textContent));
  }
  if (document.getElementById('place2-geoloc')) {
    places_geoloc.push(JSON.parse(document.getElementById('place2-geoloc').textContent));
  }
  function configure_map() {
    map = $map_widget[0].leaflet_map;
    var layer = L.tileLayer(
      'https://sig.atmo-auvergnerhonealpes.fr/geoserver/gwc/service/wmts/rest/aura:atmo_aura_jp0/max_atmo/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/png',
      {
        opacity: 0.7,
        maxZoom: 19
      });
    layer.on('load', function() {
      $('div.cell.map').removeClass('loading');
    });
    layer.addTo(map);

    if (places_geoloc) {
      for (var i=0; i<places_geoloc.length && i<2; i++) {
        var place_geoloc = places_geoloc[i];
        $.ajax({
          url: '/api/dashboard/auto-tile/airquality/',
         data: JSON.stringify({'lat': place_geoloc.lat, 'lon': place_geoloc.lon}),
           contentType: 'application/json; charset=utf-8',
          type: 'POST',
          dataType: 'html',
          success: function(html) {
            var $tile = $('<div class="cell">' + html + '</div>');
            $tile.prependTo($('.minitiles'));
          }
        });
      }
    }

    map.on('click', function(e) {
      $('#cell-map-center').remove();
      map.panTo(e.latlng);
    });

    var marker_icon = L.divIcon({
      iconAnchor: [0, 0],
      html: '<div class="crosshair"></div>'
    });
    var around_me_marker = L.marker([0, 0], {icon: marker_icon, opacity: 0});
    around_me_marker.addTo(map);
    map.on('moveend', function(e) {
      var center = map.getCenter();
      around_me_marker.setLatLng(center);
      $.ajax({
        url: '/api/dashboard/auto-tile/airquality/',
        data: JSON.stringify({'lat': center.lat, 'lon': center.lng}),
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        dataType: 'html',
        success: function(html) {
          $('#cell-map-center').remove();
          var $tile = $('<div class="cell" id="cell-map-center">' + html + '</div>');
          if (once) {
            $('#airquality-search input').val($tile.find('.address-name').text());
          } else {
            once = true;
          }
          around_me_marker.setOpacity(1);
          $tile.appendTo($('.minitiles'));
        }
      });
    });
  }
  configure_map();
  $('div.cell.map').addClass('loading').on('combo:map-ready', configure_map);

  $('#airquality-search').on('submit', function() {
    var url = $(this).parents('[data-ajax-cell-url]').data('ajax-cell-url');
    $(this).find('input').attr('disabled', true);
    $.ajax({
      url: url,
      data: {'action': 'geocode', 'q': $(this).find('input').val() + ', lyon'},
      type: 'POST',
      dataType: 'json',
      success: function(data) {
        $('#airquality-search input').removeAttr('disabled');
        if (data[0]) {
          var map = $map_widget[0].leaflet_map;
          map.flyTo({lon: data[0].lon, lat: data[0].lat}, 18);
        }
      }
    });
    return false;
  });
});
        </script>
{% endlocalize %}
