ajout de marqueurs sur la carte pour les lieux de panoramiques

panorama/static/panorama/css/celutz.css

@@ -296,13 +296,34 @@ fieldset#adding {
     width: 160px;
 }
 select {
-display: inline-block;
-max-width: 100%;
-padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-color: #55595C;
-vertical-align: middle;
-background: #FFF url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat scroll right 0.75rem center / 8px 10px;
-border: 1px solid rgba(0, 0, 0, 0.15);
-border-radius: 0.25rem;
--moz-appearance: none;
+    display: inline-block;
+    max-width: 100%;
+    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+    color: #55595C;
+    vertical-align: middle;
+    background: #FFF url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat scroll right 0.75rem center / 8px 10px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    -moz-appearance: none;
+}
+.markerpopup .leaflet-popup-content {
+    margin: 3px 5px;
+    line-height: 1.4;
+}
+.markerpopup .leaflet-popup-content-wrapper {
+    background:rgba(34,34,34,0.7);
+    color:#fff;
+    font-size:13px;
+    line-height:24px;
+    text-align:center;
+    border-radius:5px;
+}
+.markerpopup .leaflet-popup-tip {
+    background:rgba(34,34,34,0.7);
+}
+.markerpopup .leaflet-popup-tip-container {
+    width:0px;
+    height:0px;
 }
+
+

panorama/templates/panorama/main.html

@@ -1,5 +1,6 @@
 {% extends "panorama/base.html" %}
 {% load panorama_url %}
+{% load static %}
 {% load distance_filter %}
 {% load i18n %}
 
@@ -34,7 +35,7 @@ style="padding:0px"
 
 {% 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 src="https://code.jquery.com/jquery-3.0.0.min.js}"></script>
 <script>
     var map;
     var ajaxRequest;
@@ -77,7 +78,20 @@ style="padding:0px"
                     $('#id_altitude').val(parseInt(data));
                 });
         });
+    var panoIcon = L.icon({
+        iconUrl: '{% static "panorama/img/marker-red.png" %}',
+        iconSize: [22, 35],
+        iconAnchor: [13, 42],
+        popupAnchor: [0,-50],
+    });
+    {% 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 %}"});
+    marker.addTo(map);
+    {% endfor %}
     }
+
     initmap();
 </script>
 {% endblock js %}