custom marqueur principal + zoom carte en fonction des marqueurs présents

panorama/templates/panorama/main.html

@@ -25,7 +25,7 @@
 {% endblock %}
 
 {% block page-wrapper-style %}
-style="padding:0px"
+style="padding:0px;height:calc(100vh - 50px)"
 {% endblock %}
 
 {% block content %}
@@ -81,11 +81,11 @@ style="padding:0px"
 
         // Add in a crosshair for the map
         var crosshairIcon = L.icon({
-            iconUrl: 'images/crosshair.png',
-            iconSize:     [20, 20], // size of the icon
-            iconAnchor:   [10, 10] // point of the icon which will correspond to marker's location
+            iconUrl: '{% static "panorama/img/marker-blue.png" %}',
+            iconSize:     [22, 35], // size of the icon
+            iconAnchor:   [11, 35] // point of the icon which will correspond to marker's location
         });
-        crosshair = new L.marker(map.getCenter(), {clickable:false});
+        crosshair = new L.marker(map.getCenter(), {clickable:false,icon:crosshairIcon});
         crosshair.addTo(map);
 
         // Move the crosshair to the center of the map when the user pans
@@ -98,22 +98,24 @@ style="padding:0px"
             }
         });
         $('#locate-gps-btn, #new-pano-btn').on('click', function(e) {
-            console.log('test');
             fillcoord();
         });
     var panoIcon = L.icon({
         iconUrl: '{% static "panorama/img/marker-red.png" %}',
         iconSize: [22, 35],
-        iconAnchor: [13, 42],
+        iconAnchor: [11, 35],
         popupAnchor: [0,-50],
     });
+    var allMarkers = []
     {% for pano in panoramas %}
         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 %}"});
         markerClusters.addLayer( marker );
+        allMarkers.push([{{ pano.latitude }}, {{ pano.longitude }}]);
     {% endfor %}
     map.addLayer( markerClusters );
+    map.fitBounds(allMarkers,{padding: [30, 30]});
     }
     initmap();
 </script>