ajout légende de la carte

panorama/locale/es/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-09-12 00:08+0200\n"
+"POT-Creation-Date: 2016-09-19 09:22+0000\n"
 "PO-Revision-Date: 2016-08-31 17:28+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -26,7 +26,8 @@ msgstr ""
 msgid "Regenerate tiles for the selected panoramas"
 msgstr ""
 
-#: panorama/apps.py:10
+#: panorama/apps.py:10 panorama/templates/panorama/locate_point.html:145
+#: panorama/templates/panorama/main.html:168
 msgid "Panorama"
 msgstr "Panorama"
 
@@ -132,16 +133,16 @@ msgstr ""
 msgid "Language"
 msgstr "Idioma"
 
-#: panorama/templates/panorama/base.html:69
+#: panorama/templates/panorama/base.html:67
 msgid "About"
 msgstr "Acerca de"
 
-#: panorama/templates/panorama/base.html:72
+#: panorama/templates/panorama/base.html:70
 msgid "Celutz is a tool for managing and referencing panoramic photos"
 msgstr ""
 "Celutz es una heramienta para gestionar y referenciar fotos panoramicas"
 
-#: panorama/templates/panorama/base.html:73
+#: panorama/templates/panorama/base.html:71
 msgid "Project homepage"
 msgstr "Pagina del projecto"
 
@@ -161,15 +162,32 @@ msgstr "Panoramas que ven el punto"
 msgid "Panoramas seeing the searched point"
 msgstr "Panoramas que ven el punto deseado"
 
-#: panorama/templates/panorama/locate_point.html:131
+#: panorama/templates/panorama/locate_point.html:134
 #: panorama/templates/panorama/sidebar-locate-point.html:15
 msgid "at"
 msgstr "de"
 
+#: panorama/templates/panorama/locate_point.html:144
+#: panorama/templates/panorama/main.html:167
+msgid "Legend"
+msgstr "Leyenda"
+
+#: panorama/templates/panorama/locate_point.html:146
+msgid "Localized point"
+msgstr "Punto localizado"
+
 #: panorama/templates/panorama/main.html:8
 msgid "Celutz, a panorama viewer"
 msgstr "Celutz, un visualisador de panorama"
 
+#: panorama/templates/panorama/main.html:169
+msgid "Control"
+msgstr "Control"
+
+#: panorama/templates/panorama/main.html:170
+msgid "Point of interest"
+msgstr "Punto de interés"
+
 #: panorama/templates/panorama/sidebar-all.html:5
 msgid "Map"
 msgstr "Mapa"
@@ -179,7 +197,7 @@ msgid "Locate GPS point"
 msgstr "Localizar por GPS"
 
 #: panorama/templates/panorama/sidebar-all.html:16
-#: panorama/templates/panorama/sidebar-common.html:16
+#: panorama/templates/panorama/sidebar-common.html:28
 #: panorama/templates/panorama/view.html:142
 #: panorama/templates/panorama/view.html:152
 msgid "Locate"
@@ -198,11 +216,11 @@ msgstr "Añadir"
 msgid "New panorama"
 msgstr "Añadir un panorama"
 
-#: panorama/templates/panorama/sidebar-common.html:3
+#: panorama/templates/panorama/sidebar-common.html:4
 msgid "Panoramas"
 msgstr "Panoramas"
 
-#: panorama/templates/panorama/sidebar-common.html:11
+#: panorama/templates/panorama/sidebar-common.html:23
 msgid "Locate existing point"
 msgstr "Localizar un punto"
 

panorama/locale/fr/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-09-12 00:08+0200\n"
+"POT-Creation-Date: 2016-09-19 09:22+0000\n"
 "PO-Revision-Date: 2016-08-31 17:34+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -26,7 +26,8 @@ msgstr "Regénération des tuiles en cours, cela pourrait prendre du temps"
 msgid "Regenerate tiles for the selected panoramas"
 msgstr "Regénérer les tuiles pour les panoramas sélectionnés"
 
-#: panorama/apps.py:10
+#: panorama/apps.py:10 panorama/templates/panorama/locate_point.html:145
+#: panorama/templates/panorama/main.html:168
 msgid "Panorama"
 msgstr "Panorama"
 
@@ -133,15 +134,15 @@ msgstr "Admin"
 msgid "Language"
 msgstr "Langue"
 
-#: panorama/templates/panorama/base.html:69
+#: panorama/templates/panorama/base.html:67
 msgid "About"
 msgstr "À propos"
 
-#: panorama/templates/panorama/base.html:72
+#: panorama/templates/panorama/base.html:70
 msgid "Celutz is a tool for managing and referencing panoramic photos"
 msgstr "Celutz est un outil pour gérer et référencer des photos panoramiques"
 
-#: panorama/templates/panorama/base.html:73
+#: panorama/templates/panorama/base.html:71
 msgid "Project homepage"
 msgstr "Page du projet"
 
@@ -161,15 +162,32 @@ msgstr "Panoramas voyant le point"
 msgid "Panoramas seeing the searched point"
 msgstr "Panoromas voyant le point recherché"
 
-#: panorama/templates/panorama/locate_point.html:131
+#: panorama/templates/panorama/locate_point.html:134
 #: panorama/templates/panorama/sidebar-locate-point.html:15
 msgid "at"
 msgstr "à"
 
+#: panorama/templates/panorama/locate_point.html:144
+#: panorama/templates/panorama/main.html:167
+msgid "Legend"
+msgstr "Légende"
+
+#: panorama/templates/panorama/locate_point.html:146
+msgid "Localized point"
+msgstr "Point localisé"
+
 #: panorama/templates/panorama/main.html:8
 msgid "Celutz, a panorama viewer"
 msgstr "Celutz, un visualisateur de panoramas"
 
+#: panorama/templates/panorama/main.html:169
+msgid "Control"
+msgstr "Contrôles"
+
+#: panorama/templates/panorama/main.html:170
+msgid "Point of interest"
+msgstr "Point d&#x27;intérêt"
+
 #: panorama/templates/panorama/sidebar-all.html:5
 msgid "Map"
 msgstr "Carte"
@@ -179,7 +197,7 @@ msgid "Locate GPS point"
 msgstr "Localiser par GPS"
 
 #: panorama/templates/panorama/sidebar-all.html:16
-#: panorama/templates/panorama/sidebar-common.html:16
+#: panorama/templates/panorama/sidebar-common.html:28
 #: panorama/templates/panorama/view.html:142
 #: panorama/templates/panorama/view.html:152
 msgid "Locate"
@@ -198,11 +216,11 @@ msgstr "Ajouter"
 msgid "New panorama"
 msgstr "Ajouter un panorama"
 
-#: panorama/templates/panorama/sidebar-common.html:3
+#: panorama/templates/panorama/sidebar-common.html:4
 msgid "Panoramas"
 msgstr "Panoramas"
 
-#: panorama/templates/panorama/sidebar-common.html:11
+#: panorama/templates/panorama/sidebar-common.html:23
 msgid "Locate existing point"
 msgstr "Localiser un point"
 

panorama/static/panorama/css/celutz.css

@@ -425,3 +425,36 @@ select {
 .navbar-nav li {
     max-width: 100%;
 }
+.legend {
+    background:rgba(34,34,34,0.7);
+    color:#fff;
+    font-size:13px;
+    line-height:24px;
+    border-radius:5px;
+    padding: 5px 5px;
+    line-height: 1.4;
+    position:relative;
+    max-height: 30px;
+    transition: max-height 1.5s;
+    -webkit-transition: max-height 1.5s;
+    -moz-transition: max-height 1.5s;
+    overflow:hidden;
+}
+.legend:hover {
+    max-height: 500px;
+}
+.legend p {
+    display:inline-block;
+    margin-left:5px;
+}
+.legend img {
+    width:15px;
+}
+.legendtitle {
+    width: 100%;
+    font-weight:bold;
+}
+.legendtitle i {
+    display: inline;
+    margin-right: 10px;
+}

panorama/templates/panorama/locate_point.html

@@ -83,6 +83,8 @@ style="padding:0px;height:calc(100vh - 50px)"
     maxClusterRadius: 20
     });
     var allMarkers = [[{{ located_point_lat }}, {{ located_point_lon }}]];
+    // Legend
+    var legend = L.control({position: 'bottomright'});
 
     function accordionMenus() {
         $("ul.side-nav").children().click(function(e) {
@@ -135,8 +137,20 @@ style="padding:0px;height:calc(100vh - 50px)"
             L.polyline([[{{ located_point_lat }}, {{ located_point_lon }}],[{{ panorama.latitude }}, {{ panorama.longitude }}]], {color: '#2636ca', opacity: 0.8, weight: 2, dashArray: "5, 6"}).addTo(map);
             allMarkers.push([{{ panorama.latitude }}, {{ panorama.longitude }}]);
         {% endfor %}
+
+        // Add a legend to the map
+        legend.onAdd = function (map) {
+            var div = L.DomUtil.create('div', 'legend');
+            div.innerHTML += '<div class="legendtitle"><p><i class="fa fa-fw fa-caret-down"></i>{% trans "Legend" %}</p></div>';
+            div.innerHTML += '<img src={% static "panorama/img/marker-red.png" %} ><p>{% trans "Panorama" %}</p></br>';
+            div.innerHTML += '<img src={% static "panorama/img/marker-deep-blue.png" %} ><p>{% trans "Localized point" %}</p></br>';
+            return div;
+        };
+
         map.addLayer( markerClusters );
         map.fitBounds(allMarkers,{padding: [30, 30]});
+        legend.addTo(map);
+
     }
     initmap();
     accordionMenus(); 

panorama/templates/panorama/main.html

@@ -74,6 +74,7 @@
             iconAnchor: [10, 10],
             popupAnchor: [0,-20]
         });
+        var legend = L.control({position: 'bottomright'});
     
         function accordionMenus() {
             $("ul.side-nav").children().click(function(e) {
@@ -161,10 +162,21 @@
                 poiPopup.on('mouseout', poiMarker.closePopup);
                 pointsOfInterest.addLayer(poiMarker);
             {% endfor %}
+            // Add a legend to the map
+            legend.onAdd = function (map) {
+                var div = L.DomUtil.create('div', 'legend');
+                div.innerHTML += '<div class="legendtitle"><p><i class="fa fa-fw fa-caret-down"></i>{% trans "Legend" %}</p></div>';
+                div.innerHTML += '<img src={% static "panorama/img/marker-red.png" %} ><p>{% trans "Panorama" %}</p></br>';
+                div.innerHTML += '<img src={% static "panorama/img/marker-blue.png" %} ><p>{% trans "Control" %}</p></br>';
+                div.innerHTML += '<img src={% static "panorama/img/marker-circle-green.png" %} ><p>{% trans "Point of interest" %}</p></br>';
+                return div;
+            };
             map.addLayer(pointsOfInterest);
             map.fitBounds(allMarkers,{padding: [30, 30]});
+            legend.addTo(map);
             }
         initmap();
+
         accordionMenus(); 
     </script>
 {% endlocalize %}