Amélioration du rendu des cartes

Partiellement #156

src/agenda_culturel/static/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

src/agenda_culturel/static/MarkerCluster.pdl.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: color-mix(in lab, var(--primary) 70%, black 20%);
+	}
+.marker-cluster-small div {
+	background-color: color-mix(in lab, var(--primary) 70%, white 20%);
+	}
+
+.marker-cluster-medium {
+	background-color: color-mix(in lab, var(--primary) 80%, black 20%);
+	}
+.marker-cluster-medium div {
+	background-color: color-mix(in lab, var(--primary) 80%, white 20%);
+	}
+
+.marker-cluster-large {
+	background-color: var(--primary);
+	}
+.marker-cluster-large div {
+	background-color: color-mix(in lab, var(--primary) 90%, white 10%);
+}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

src/agenda_culturel/templates/agenda_culturel/place_list.html

@@ -11,7 +11,10 @@
     {% css_categories %}
     <script src="/static/admin/js/vendor/jquery/jquery.js"></script>
     <script src="{% static 'location_field/leaflet/leaflet.js' %}"></script>
+    <script src="{% static 'js/leaflet.markercluster.js' %}"></script>
     <link href="{% static 'location_field/leaflet/leaflet.css' %}" type="text/css" media="all" rel="stylesheet">
+    <link href="{% static 'MarkerCluster.css' %}" type="text/css" media="all" rel="stylesheet">
+    <link href="{% static 'MarkerCluster.pdl.css' %}" type="text/css" media="all" rel="stylesheet">
 {% endblock %}
 
 {% block fluid %}{% endblock %}
@@ -60,17 +63,19 @@
 </article>
 </div>
 <script>
-    L.Icon.Default.imagePath = "{% static "location_field/leaflet/images/" %}";
+    L.Icon.Default.imagePath = "{% static "images/" %}";
     var map = L.map('map_location');
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
         attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
     }).addTo(map);
     markerArray = [];
+    var markers = L.markerClusterGroup();
     window.mMapping = {};
     {% if object_list %}
         {% for place in object_list %}
-        markerArray.push(L.marker([{{ place.location }}]).bindPopup('<a href="{% url 'view_place' place.pk %}">{{ place.name }}</a><br />{% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}'));
+        markerArray.push(L.marker([{{ place.location }}]).bindPopup('<a href="{% url 'view_place' place.pk %}">{{ place.name }}</a><br />{% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}'))
+        markers.addLayer(markerArray[markerArray.length - 1]);
         window.mMapping[{{ place.id }}] = markerArray[markerArray.length - 1];
         window.jQuery('a#open-map-{{ place.id }}').click(function(){ 
                 window.mMapping[{{ place.id }}].openPopup();
@@ -78,8 +83,9 @@
         });
         {% endfor %}
     {% endif %}
-    var group = L.featureGroup(window.markerArray).addTo(map);
+    map.addLayer(markers);
-    map.fitBounds(group.getBounds());
+    //var group = L.featureGroup(window.markerArray).addTo(map);
+    map.fitBounds(markers.getBounds());
 
 </script>
 {% endblock %}