templates/front/emplacement.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ page_title }}{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     {% if emplacement.lat and emplacement.lng %}
  8.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  9.     {% endif %}
  10. {% endblock %}
  12. {% block body %}
  13. <div class="emplacement-banner text-center pt-5" style="background-color:#364038;height:250px;">
  14. <span class="h2 text-white inline-block"><a class="text-decoration-none text-white" href="/emplacements/{{ emplacement.secteur.slug }}">Secteur {{ emplacement.secteur.name }}</a></span>
  15. </div>
  16. <div id="emplacement-{{ emplacement.slug }}" class="container container-emplacement bg-white rounded shadow mb-5" style="margin-left:auto;margin-right:auto;margin-top:-120px;width:80%;">
  17.     <div class="row">
  18.         <div class="col-12 col-md-6 p-5">
  19.             <h1>{{ page_title }}</h1>
  20.             <p>{{ emplacement.address }}<br>{{ emplacement.city.zipcode }} {{ emplacement.city.name }}</p>
  21.         </div>
  22.         {% if emplacement.lat and emplacement.lng %}
  23.         <div id="mapid" class="col-12 col-md-6" style="height:350px;"></div>
  24.         {% endif %}
  25.     </div>
  26. </div>
  27. {% endblock %}
  29. {% block javascripts %}
  30.     {{ parent() }}
  31.     {% if emplacement.lat and emplacement.lng %}
  32.     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  33.     <script>
  34.         var mymap = L.map('mapid').setView([{{ emplacement.lat }}, {{ emplacement.lng }}], 16);
  35.         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  36.             attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  37.             maxZoom: 19,
  38.         }).addTo(mymap);
  39.         var marker = L.marker([{{ emplacement.lat }}, {{ emplacement.lng }}]).addTo(mymap);
  40.     </script>
  41.     {% endif %}
  42. {% endblock %}