présentation des marqueurs en groupes (clusters)

panorama/templates/panorama/locate_point.html

@@ -31,23 +31,30 @@ style="padding:0px"
       <p><strong>No panorama seeing this point!</strong></p>
     {% else %}
       <div id="map"></div>
-      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
     {% endif %}
   {% endif %}
 {% endblock content %}
 
 {% block css %}
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
+<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
+<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
 {% endblock css %}
 
 {% block js %}
 <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 <script src="https://code.jquery.com/jquery-3.0.0.min.js}"></script>
+<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
 <script>
     var map;
     var ajaxRequest;
     var plotlist;
     var plotlayers=[];
+    var markerClusters = L.markerClusterGroup({
+    spiderfyOnMaxZoom: false,
+    showCoverageOnHover: false,
+    maxClusterRadius: 20
+    });
 
     function initmap() {
         // set up the map
@@ -93,11 +100,12 @@ style="padding:0px"
         popupAnchor: [0,-50],
     });
     {% for panorama, distance, bearing, elevation in located_panoramas %}
-    var marker = L.marker([{{ panorama.latitude }}, {{ panorama.longitude }}], {icon: panoIcon, riseOnHover: true});
-    marker.bindPopup('{{ panorama.name }} ({% trans "at" %} {{ distance|distance }})',{className : 'markerpopup', closeButton: false,}).on('mouseover', marker.openPopup).on('mouseout', marker.closePopup);
-    marker.on("click",function(){document.location.href="{% panorama_url panorama bearing elevation %}"});
-    marker.addTo(map);
+        var marker = L.marker([{{ panorama.latitude }}, {{ panorama.longitude }}], {icon: panoIcon, riseOnHover: true});
+        marker.bindPopup('{{ panorama.name }} ({% trans "at" %} {{ distance|distance }})',{className : 'markerpopup', closeButton: false,}).on('mouseover', marker.openPopup).on('mouseout', marker.closePopup);
+        marker.on("click",function(){document.location.href="{% panorama_url panorama bearing elevation %}"});
+        markerClusters.addLayer( marker );
     {% endfor %}
+    map.addLayer( markerClusters );
     }
     initmap();
 </script>

panorama/templates/panorama/main.html

@@ -31,16 +31,24 @@ style="padding:0px"
 
 {% block css %}
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
+<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
+<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
 {% endblock css %}
 
 {% block js %}
 <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 <script src="https://code.jquery.com/jquery-3.0.0.min.js}"></script>
+<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
 <script>
     var map;
     var ajaxRequest;
     var plotlist;
     var plotlayers=[];
+    var markerClusters = L.markerClusterGroup({
+    spiderfyOnMaxZoom: false,
+    showCoverageOnHover: false,
+    maxClusterRadius: 20
+    });
 
     function initmap() {
         // set up the map
@@ -83,17 +91,6 @@ style="padding:0px"
                     document.getElementsByName("altitude")[0].value = parseInt(data);
                 });
         });
-/*
-map.on('moveend', function(e) {
-            var lat = map.getCenter().lat;
-            var lng = map.getCenter().lng;
-var formsList = document.getElementById( 'id_latitude' );
-for ( i = 0; i < formsList.length; i++ ) {
-    formsList[i].val(lat);
-};
-});
-*/
-
     var panoIcon = L.icon({
         iconUrl: '{% static "panorama/img/marker-red.png" %}',
         iconSize: [22, 35],
@@ -104,8 +101,9 @@ for ( i = 0; i < formsList.length; i++ ) {
         var marker = L.marker([{{ pano.latitude }}, {{ pano.longitude }}], {icon: panoIcon, riseOnHover: true});
         marker.bindPopup('{{ pano.name }}',{className : 'markerpopup', closeButton: false,}).on('mouseover', marker.openPopup).on('mouseout', marker.closePopup);
         marker.on("click",function(){document.location.href="{% url 'panorama:view_pano' pano.id %}"});
-        marker.addTo(map);
+        markerClusters.addLayer( marker );
     {% endfor %}
+    map.addLayer( markerClusters );
     }
     initmap();
 </script>