templates/Structure/mapjs.html.twig line 1

Open in your IDE?
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. // 1. Centrage sur la France
  4. var mymap = L.map('mapid', {
  5. center: [46.2276, 2.2137],
  6. zoom: 6,
  7. minZoom: 4,
  8. maxZoom: 17
  9. });
  11. L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  12. attribution: '&copy; OpenStreetMap contributors'
  13. }).addTo(mymap);
  15. var icons = {
  16. 'CSO': L.icon({ iconUrl: '{{ asset("build/markers/marker-icon-info.svg") }}', shadowUrl: '{{ asset("build/markers/marker-shadow.png") }}', iconSize: [41, 51], iconAnchor: [20, 51], popupAnchor: [0, -51] }),
  17. 'EVS': L.icon({ iconUrl: '{{ asset("build/markers/marker-icon-success.svg") }}', shadowUrl: '{{ asset("build/markers/marker-shadow.png") }}', iconSize: [41, 51], iconAnchor: [20, 51], popupAnchor: [0, -51] }),
  18. 'FDD': L.icon({ iconUrl: '{{ asset("build/markers/marker-icon-warning.svg") }}', shadowUrl: '{{ asset("build/markers/marker-shadow.png") }}', iconSize: [41, 51], iconAnchor: [20, 51], popupAnchor: [0, -51] }),
  19. 'CAF': L.icon({ iconUrl: '{{ asset("build/markers/marker-icon-danger.svg") }}', shadowUrl: '{{ asset("build/markers/marker-shadow.png") }}', iconSize: [41, 51], iconAnchor: [20, 51], popupAnchor: [0, -51] })
  20. };
  22. var structuresData = {{ structuresJson|raw }};
  23. var markers = L.markerClusterGroup({ chunkedLoading: true });
  25. Object.keys(structuresData).forEach(function(type) {
  26. var list = structuresData[type];
  27. var icon = icons[type] || icons['CSO'];
  29. list.forEach(function(s) {
  30. var coords = s.coordinate.split(',');
  31. if (coords.length === 2) {
  32. var marker = L.marker([parseFloat(coords[0]), parseFloat(coords[1])], { icon: icon });
  34. marker.on('click', function(e) {
  35. var urlEdit = "{{ path('structure_edit', {'id': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', s.id);
  37. var content = "<div class='popup-header'><h4>";
  38. content += s.can_edit ? "<a href='"+urlEdit+"'>" + s.nom + "</a>" : s.nom;
  39. content += "</h4></div><div class='popup-body'>";
  41. if (s.adresse) content += "<p><i class='fa-solid fa-house'></i> " + s.adresse + "</p>";
  42. content += "<p><i class='fa-solid fa-location-dot'></i> " + s.code_postal + " " + s.commune + "</p>";
  43. if (s.telephone) content += "<p><i class='fa-solid fa-phone'></i> " + s.telephone + "</p>";
  44. if (s.email) content += "<p><i class='fa-solid fa-envelope'></i> " + s.email + "</p>";
  45. content += "</div>";
  47. e.target.bindPopup(content, { minWidth: 320 }).openPopup();
  48. });
  50. markers.addLayer(marker);
  51. }
  52. });
  53. });
  55. mymap.addLayer(markers);
  56. setTimeout(function() { mymap.invalidateSize(); }, 400);
  57. });
  58. </script>
  59. <style>
  60. /* Augmente la taille globale de la zone d'info */
  61. .popup-body {
  62. padding: 10px 0;
  63. font-size: 16px; /* Taille du texte augmentée */
  64. }
  66. /* Espace les lignes d'informations */
  67. .popup-body p {
  68. margin: 12px 0 !important; /* Plus d'espace entre chaque ligne */
  69. line-height: 1.4;
  70. }
  72. /* Grossit les icônes pour qu'elles correspondent au texte */
  73. .popup-body i {
  74. font-size: 18px;
  75. width: 28px !important;
  76. color: #555;
  77. }
  79. /* Optionnel : Ajuste la largeur de la bulle pour accueillir le texte plus gros */
  80. .leaflet-popup-content {
  81. width: 400px !important;
  82. }
  83. </style>