// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require leaflet
//= require_tree .

$(function() {
  $(document).foundation();
  var myMap = L.map('mapId').setView([48.7455, -3.4696], 13);
  mapLink =
    '<a href="http://openstreetmap.org">OpenStreetMap</a>';

  L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; ' + mapLink,
      maxZoom: 18,
    }).addTo(myMap);

  var markers = [];

  $('form').on('submit', function(e) {

    var formData = $("#form :input")
      .filter(function(index, element) {
        return $(element).val() !== "";
      })
      .serialize();

    var url = "/legacies?" + formData;

    $.ajax({
      type: "GET",
      url: url,
      success: function(data) {
        clearMarkers();
        displayMarkers(data);
      }
    });

    e.preventDefault();

  });

  function displayMarkers(data) {

    data.forEach(function(element, index, array) {
      var marker = L.marker([element.latitude, element.longitude]);
      var info = element.lieu_dit !== "" ? element.lieu_dit : element.titre_courant;
      var text = parseInfo(element);

      marker.addTo(myMap)
        .bindPopup(text);
      markers.push(marker);
    });
  }

  function parseInfo(element) {
    var text = "";

    if (element.hasOwnProperty("adresse"))
      text += "Adresse: " + element.adresse + "<br>";

    if (element.hasOwnProperty("cadre_etude"))
      text += "Cadre d'etude: " + element.cadre_etude + "<br>";

    if (element.hasOwnProperty("commune"))
      text += "Commune: " + element.commune + "<br>";

    if (element.hasOwnProperty("datations_principales"))
      text += "Datations: " + element.datations_principales + "<br>";

    if (element.hasOwnProperty("date_enquete"))
      text += "Date Enquete: " + element.date_enquete + "<br>";

    if (element.hasOwnProperty("denomination"))
      text += "Denomination: " + element.denomination + "<br>";

    if (element.hasOwnProperty("lieu_dit"))
      text += "Lieu dit: " + element.lieu_dit + "<br>";

    if (element.hasOwnProperty("phase"))
      text += "Phase: " + element.phase + "<br>";

    if (element.hasOwnProperty("statut"))
      text += "Statut: " + element.statut + "<br>";

    if (element.hasOwnProperty("lien_image"))
      text += '<img src=' + element.lien_image + ' alt=""><br>';

    return text;
  }

  function clearMarkers() {
    markers.forEach(function(element, index, array) {
      myMap.removeLayer(element);
    });
  }

});

@@ -740,16 +740,31 @@
 ation();
+%0A%0A  // Map init
 %0A  var m
@@ -3122,12 +3122,579 @@
 );%0A  %7D%0A%0A
+  function onMapClick(e) %7B%0A    var radius = 2000;%0A    var url = %22/legacies?latitude=%22 + e.latlng.lat + %22&longitude=%22 + e.latlng%0A      .lng + %22&radius=%22 + radius;%0A%0A%0A    $.ajax(%7B%0A      type: %22GET%22,%0A      url: url,%0A      success: function(data) %7B%0A        clearMarkers();%0A        var circle = L.circle(%5Be.latlng.lat, e.latlng.lng%5D, radius, %7B%0A          color: 'orange',%0A          fillColor: '#FFA500',%0A          fillOpacity: 0.2%0A        %7D).addTo(myMap);%0A        markers.push(circle);%0A        displayMarkers(data);%0A      %7D%0A    %7D);%0A%0A%0A%0A  %7D%0A%0A  myMap.on('click', onMapClick);%0A%0A
 %7D);%0A

Add radius