{% set grid_size = theme_var('grid-size') %}
{% set image = page.media.images|first %}
{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}

{% block body %}
<script>
  function map() {
    var mymap = L.map('mapid').setView([48.866667, 2.333333], 14);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: '<a href="https://www.openstreetmap.org/"></a>'
      + '<a href="https://creativecommons.org/licenses/by-sa/2.0/"></a>'
      + '<a href="https://www.mapbox.com/"></a>',
      id: 'mapbox.streets'
    }).addTo(mymap);

    var LeafIcon = L.Icon.extend({
      options: {
        iconSize:     [50, 50],
        iconAnchor:   [25, 25],
      }
    });

    var greenIcon = new LeafIcon({iconUrl: 'user/themes/r2c/images/handler.svg'})
    L.marker([48.866667, 2.333333], {icon: greenIcon}).bindPopup("Coucou").addTo(mymap);

  };

  $(document).ready(function() {
    map();
  });

</script>
  <div id="mapid"></div>
    <script>
    {% for module in page.collection %}

    $(document).ready(function() {

      var array = []
      console.log(array);

      var $mappoint = $('#streetmap > div:nth-child(n+2)');
      array.push('{{module.header.id}}');
      console.log(array);

    });

    </script>
      <div id="{{module.header.id}} {{module.header.lat}} {{module.header.long}}">
          {{ module.content }}
      </div>

    {% endfor %}



{% endblock %}
