ajout map sur les coordinations

src/ClassCodeBundle/Resources/views/Coordination/list.html.twig

 {% extends 'base.html.twig' %}
  
+{% block stylesheets %}
+  {{ parent() }}
+  <link rel="stylesheet" href="{{ asset('js/leaflet-1.3.1/leaflet.css') }}" />
+  <link rel="stylesheet" href="{{ asset('js/leaflet-1.3.1/plugins/leaflet.markercluster-1.3.0/dist/MarkerCluster.Default.css') }}" />    
+{% endblock %}
 
 {% block body_title %}
     {{ 'coordinations.list' | trans }}
@@ -27,9 +32,12 @@
         {% include '@ClassCode/Coordination/editCoordinationFormModal.html.twig' %}
       </div>
     {% endif %}
-      <div id='coordination_list_div'>
-         {% include '@ClassCode/Coordination/ajax_list.html.twig' %}
-      </div>
+    <div class="col-sm-12">
+      <div id="coordinationsMap" style="height:400px;">        
+    </div>
+    <div id='coordination_list_div'>
+       {% include '@ClassCode/Coordination/ajax_list.html.twig' %}
+    </div>
   </div>
   
   <div id="loader">
@@ -42,11 +50,59 @@
 
 {% block javascripts %}
  {{ parent() }}
+ <script type="text/javascript" src="{{ asset('js/leaflet-1.3.1/leaflet.js') }}"></script> 
+ <script type="text/javascript" src="{{ asset('js/leaflet-1.3.1/plugins/leaflet.markercluster-1.3.0/dist/leaflet.markercluster.js') }}"></script>
  <script>
    $(document).ready(function() {    
       loadDataTable();
       $('#loader').hide();
       $('#classcodeadmin_content').show();
+      //map
+      var coordinationMap = L.map('coordinationsMap',{maxZoom: 18}).setView([46.52863469527167, 2.43896484375], 5),
+          markers = L.markerClusterGroup({
+                spiderfyOnMaxZoom: true,
+                showCoverageOnHover: false,
+                zoomToBoundsOnClick: true,
+                polygonOptions: {
+                    fillColor: '#FFFFFF',
+                    color: '#FFFFFF',
+                    weight: 0.5,
+                    opacity: 1,
+                    fillOpacity: 0.5
+                    }
+            }),
+            lat = "",
+            lon = "",
+            LeafIcon = L.Icon.extend({
+                options: {
+                    iconSize:     [38, 95],
+                    shadowSize:   [50, 64],
+                    iconAnchor:   [22, 94],
+                    shadowAnchor: [4, 62],
+                    popupAnchor:  [-3, -76]
+                }
+            });
+            
+      var markerDetail = "";
+      var lat;
+      var lon;
+      {% for coordination in coordinations %} 
+        lat = "{{ coordination.getLatitude }}" ;
+        lon = "{{ coordination.getLongitude }}" ;
+        if((lat !="0")&&(lon != "0")){          
+          markerDetail ="<p class='h4'><b>";
+          markerDetail += "{{ coordination.getName }}";
+          markerDetail += "</b></p>"+ "<p class='h5'><b> " + "{{ coordination.getWho }} " + "</b></p>";
+          markers.addLayer(L.marker(L.latLng(lat, lon)).bindPopup(markerDetail)
+              .openPopup());
+          coordinationMap.addLayer(markers);
+        }
+      {% endfor %}
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(coordinationMap);
+      
     });
     
     function loadDataTable(){

src/ClassCodeBundle/Resources/views/Structure/list.html.twig

@@ -32,9 +32,9 @@
         {% include '@ClassCode/Structure/editStructureFormModal.html.twig' %}
       </div>
     {% endif %}
-      <div class="col-sm-12">
-        <div id="structuresMap" style="height:250px;">        
-      </div>
+    <div class="col-sm-12">
+      <div id="structuresMap" style="height:400px;">        
+    </div>
     </div>
       <div id='structure_list_div'>
          {% include '@ClassCode/Structure/ajax_list.html.twig' %}
@@ -43,9 +43,7 @@
   
   <div id="loader">
     <img src="{{ commons_url }}/images/pictos/loading_40.gif" alt="{{ 'Loading'|trans }}" title="{{ 'Loading'|trans }}">
-  </div>
-
-  
+  </div> 
 
 {% endblock %}