tests pour afficher résultat de recherche d'un point dans la mini-map… un demi-echec !

panorama/static/panorama/js/pano.js

@@ -1278,8 +1278,13 @@ function load_map(){
 	var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
 	var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});		
 	map.addLayer(osm);
-        map.addLayer( markerClusters );
 
+        if(sessionStorage.length != "0"){
+             resultPanoMarkers();
+        } else {
+             allPanoMarkers();
+        }
+        map.addLayer( markerClusters );
 
 	L.marker([panorama_lat, panorama_lng]).addTo(map);
         map.fitBounds(allMarkers,{padding: [30, 30]});

panorama/templates/panorama/locate_point.html

@@ -7,7 +7,7 @@
 {% block title %}{% trans "Result of research"%}{% endblock title %}
 
 {% block top-menu-title %}
-    <a class="navbar-brand" href="{% url 'panorama:main' %}"><i class="fa fa-fw fa-home"></i></a>
+    <a id="back-home" class="navbar-brand" href="{% url 'panorama:main' %}"><i class="fa fa-fw fa-home"></i></a>
 
 {% endblock %}
 
@@ -95,6 +95,11 @@ style="padding:0px;height:calc(100vh - 50px)"
             };
         });
     }
+    function backClearSessionStorage() {
+        $("#back-home").click(function(e) {
+            sessionStorage.clear();
+        });
+    }
 
     function initmap() {
         // set up the map
@@ -112,6 +117,10 @@ style="padding:0px;height:calc(100vh - 50px)"
         // create the marker for the searched point
         located = new L.marker([{{ located_point_lat }}, {{ located_point_lon }}], {icon: locatedIcon});
         located.addTo(map);
+var storeLocateInfos = new Array();
+storeLocateInfos[0] = "{{ located_point_lat }}";
+storeLocateInfos[1] = "{{ located_point_lon }}";
+sessionStorage["mocated_point"] = JSON.stringify(storeLocateInfos);
 
         map.on('moveend', function(e) {
             var lat = map.getCenter().lat;
@@ -131,11 +140,25 @@ style="padding:0px;height:calc(100vh - 50px)"
             markerClusters.addLayer( marker );
             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 }}]);
+
+            var storePanoInfos = new Array();
+            storePanoInfos[0] = "{{ panorama.name }}";
+            storePanoInfos[1] = "{{ panorama.latitude }}";
+            storePanoInfos[2] = "{{ panorama.longitude }}";
+            storePanoInfos[3] = "{{ bearing }}";
+            storePanoInfos[4] = "{{ elevation }}";
+            storePanoInfos[5] = "{{ distance|distance }}";
+            sessionStorage[{{ panorama.id }}] = JSON.stringify(storePanoInfos);
         {% endfor %}
+
         map.addLayer( markerClusters );
         map.fitBounds(allMarkers,{padding: [30, 30]});
     }
-    initmap();
+
+    // Clear previous custom_point information in SessionStorage
+    sessionStorage.clear();
+    backClearSessionStorage();
     accordionMenus(); 
+    initmap();
 </script>
 {% endblock js %}

panorama/templates/panorama/view.html

@@ -12,84 +12,8 @@
     <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>
-      var title = "{{ panorama.name|escapejs }}";
-      var panorama_id = {{ panorama.pk }};
-      var panorama_url = "/api/v1/panoramas/{{ panorama.pk }}/";
-      var img_prefix = '{{ panorama.tiles_url }}';
-      var image_loop = {{ panorama.loop|yesno:"true,false,undefined" }};
-      var image_width = {{ panorama.image_width }};
-      var image_height = {{ panorama.image_height }};
-      if (image_loop){
-        var image_cap_min = 0;
-        var image_cap_max = 360;
-      } else {
-        var image_cap_min = {{ panorama.cap_min }};
-        var image_cap_max = {{ panorama.cap_max }};
-      };
-      var panorama_lat = {{ panorama.latitude }};
-      var panorama_lng = {{ panorama.longitude }};
-      var csrf_token = "{{ csrf_token }}";
-    </script>
-    <script src="{% static "panorama/js/pano.js" %}"></script>
-    <script>window.onload = load_pano</script>
-    <script>
-      {% for zoom_level, data in panorama.tiles_data.items %}
-      zooms[{{ zoom_level }}] = new tzoom({{ zoom_level }});
-      zooms[{{ zoom_level }}].ntiles.x = {{ data.ntiles_x }};
-      zooms[{{ zoom_level }}].ntiles.y = {{ data.ntiles_y }};
-      zooms[{{ zoom_level }}].tile.width = {{ data.tile_width }};
-      zooms[{{ zoom_level }}].tile.height = {{ data.tile_height }};
-      zooms[{{ zoom_level }}].last_tile.width = {{ data.last_tile_width }};
-      zooms[{{ zoom_level }}].last_tile.height = {{ data.last_tile_height }};
-      {% endfor %}
-
-      {% for id, refpoint in panorama.refpoints_data %}
-      point_list[{{ id }}] = new Array("{{ refpoint.name|escapejs }}", {{ refpoint.distance }}, {{ refpoint.cap }}, {{ refpoint.elevation }}, "{{ refpoint.url }}", "/api/v1/refpoints/{{ refpoint.id }}/");
-      {% endfor %}
-
-      ref_points = new Array();
-      {% for ref in panorama.references_data %}
-      ref_points["{{ ref.name|escapejs }}"] = {url: "/api/v1/references/{{ ref.id }}/", x: {{ ref.x }}, y: {{ ref.y }}, cap: {{ ref.cap }}, ele: {{ ref.elevation }}};
-      {% endfor %}
-    </script>
-    <script src="{% static "panorama/js/hide_n_showForm.js" %}"></script>
-    <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 allMarkers = []
-      var markerClusters = L.markerClusterGroup({
-          spiderfyOnMaxZoom: false,
-          showCoverageOnHover: false,
-          maxClusterRadius: 20
-      });
-      var panoIcon = L.icon({
-          iconUrl: '{% static "panorama/img/marker-red.png" %}',
-          iconSize: [22, 35],
-          iconAnchor: [11, 35],
-          popupAnchor: [0,-50]
-      });
-      
-      {% for pano in panoramas %}
-          {% if panorama.name != pano.name  %}
-              var marker = L.marker([{{ pano.latitude }}, {{ pano.longitude }}], {icon: panoIcon, riseOnHover: true});
-              marker.on("click",function(){document.location.href="{% url 'panorama:view_pano' pano.id %}"});
-              var popup = marker.bindPopup('{{ pano.name }}',{className : 'markerpopup', closeButton: false,});
-              popup.on('mouseover', marker.openPopup);
-              popup.on('mouseout', marker.closePopup);
-              markerClusters.addLayer( marker );
-              allMarkers.push([{{ pano.latitude }}, {{ pano.longitude }}]);
-          {% endif %}
-      {% endfor %}
-
-      $( document ).ready(load_map);
-    </script>
-{% endblock js %}
-
 {% block top-menu-title %}
-    <a class="navbar-brand" href="{% url 'panorama:main' %}"><i class="fa fa-fw fa-home"></i></a>
+    <a id="back-home" class="navbar-brand" href="{% url 'panorama:main' %}"><i class="fa fa-fw fa-home"></i></a>
     <a class="navbar-brand" href="">{{panorama.name}}</a>
 {% endblock %}
 
@@ -145,8 +69,6 @@ style="padding-left:0px"
 {% block content %}
 {% endblock content %}
 
-
-
 {% block pano %}
     <canvas id="mon-canvas">
       Ce message indique que ce navigateur est vétuste car il ne supporte pas <samp>canvas</samp> (IE6, IE7, IE8, ...)
@@ -165,3 +87,127 @@ style="padding-left:0px"
     <div id="mapid"></div>
 {% endblock pano %}
 
+{% block js %}
+    <script>
+      var title = "{{ panorama.name|escapejs }}";
+      var panorama_id = {{ panorama.pk }};
+      var panorama_url = "/api/v1/panoramas/{{ panorama.pk }}/";
+      var img_prefix = '{{ panorama.tiles_url }}';
+      var image_loop = {{ panorama.loop|yesno:"true,false,undefined" }};
+      var image_width = {{ panorama.image_width }};
+      var image_height = {{ panorama.image_height }};
+      if (image_loop){
+        var image_cap_min = 0;
+        var image_cap_max = 360;
+      } else {
+        var image_cap_min = {{ panorama.cap_min }};
+        var image_cap_max = {{ panorama.cap_max }};
+      };
+      var panorama_lat = {{ panorama.latitude }};
+      var panorama_lng = {{ panorama.longitude }};
+      var csrf_token = "{{ csrf_token }}";
+    </script>
+    <script src="{% static "panorama/js/pano.js" %}"></script>
+    <script>window.onload = load_pano</script>
+    <script>
+      {% for zoom_level, data in panorama.tiles_data.items %}
+      zooms[{{ zoom_level }}] = new tzoom({{ zoom_level }});
+      zooms[{{ zoom_level }}].ntiles.x = {{ data.ntiles_x }};
+      zooms[{{ zoom_level }}].ntiles.y = {{ data.ntiles_y }};
+      zooms[{{ zoom_level }}].tile.width = {{ data.tile_width }};
+      zooms[{{ zoom_level }}].tile.height = {{ data.tile_height }};
+      zooms[{{ zoom_level }}].last_tile.width = {{ data.last_tile_width }};
+      zooms[{{ zoom_level }}].last_tile.height = {{ data.last_tile_height }};
+      {% endfor %}
+
+      {% for id, refpoint in panorama.refpoints_data %}
+      point_list[{{ id }}] = new Array("{{ refpoint.name|escapejs }}", {{ refpoint.distance }}, {{ refpoint.cap }}, {{ refpoint.elevation }}, "{{ refpoint.url }}", "/api/v1/refpoints/{{ refpoint.id }}/");
+      {% endfor %}
+
+      ref_points = new Array();
+      {% for ref in panorama.references_data %}
+      ref_points["{{ ref.name|escapejs }}"] = {url: "/api/v1/references/{{ ref.id }}/", x: {{ ref.x }}, y: {{ ref.y }}, cap: {{ ref.cap }}, ele: {{ ref.elevation }}};
+      {% endfor %}
+    </script>
+    <script src="{% static "panorama/js/hide_n_showForm.js" %}"></script>
+    <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 allMarkers = []
+    var markerClusters = L.markerClusterGroup({
+        spiderfyOnMaxZoom: false,
+        showCoverageOnHover: false,
+        maxClusterRadius: 20
+    });
+    // Marker for the point being located
+    var locatedIcon = L.icon({
+        iconUrl: '{% static "panorama/img/marker-deep-blue.png" %}',
+        iconSize: [22, 35],
+        iconAnchor: [11, 35],
+    });
+    var panoIcon = L.icon({
+        iconUrl: '{% static "panorama/img/marker-red.png" %}',
+        iconSize: [22, 35],
+        iconAnchor: [11, 35],
+        popupAnchor: [0,-50]
+    });
+    var storageContent = sessionStorage.length;
+
+
+    function backClearSessionStorage() {
+        $("#back-home").click(function(e) {
+            sessionStorage.clear();
+        });
+    }
+
+    function allPanoMarkers() {      
+        {% for pano in panoramas %}
+            {% if panorama.name != pano.name  %}
+                var marker = L.marker([{{ pano.latitude }}, {{ pano.longitude }}], {icon: panoIcon, riseOnHover: true});
+                marker.on("click",function(){document.location.href="{% url 'panorama:view_pano' pano.id %}"});
+                var popup = marker.bindPopup('{{ pano.name }}',{className : 'markerpopup', closeButton: false,});
+                popup.on('mouseover', marker.openPopup);
+                popup.on('mouseout', marker.closePopup);
+                markerClusters.addLayer( marker );
+            {% endif %}
+        {% endfor %}
+    }
+    
+    function resultPanoMarkers() {
+        var locateInfos = JSON.parse(sessionStorage.getItem("mocated_point"));
+        var locateLat = locateInfos[0];
+        var locateLong = locateInfos[1];
+        locatedMarker = new L.marker([locateLat, locateLong], {icon: locatedIcon});
+        locatedMarker.addTo(map);
+        var allMarkers = [[locateLat, locateLong]];
+
+        for (var i = 0; i < sessionStorage.length; i++){
+            var panoID = sessionStorage.key(i);
+            if (!isNaN(panoID)) {
+                var panoInfos = JSON.parse(sessionStorage.getItem(panoID));
+                var panoName = panoInfos[0];
+                var panoLat = panoInfos[1];
+                var panoLong = panoInfos[2];
+                var panoBear = panoInfos[3];
+                var panoEle = panoInfos[4];
+                var panoDist = panoInfos[5];
+                var panoURL = "/pano/view" + panoID + "/#zoom=0" + "/cap=" + panoBear + "/ele=" + panoEle
+                var marker = L.marker([panoLat, panoLong], {icon: panoIcon, riseOnHover: true});
+                var line = L.polyline([[locateLat, locateLong],[panoLat, panoLong]], {color: '#2636ca', opacity: 0.8, weight: 2, dashArray: '5, 6'});
+                marker.on("click",function(){document.location.href=panoURL}); 
+                marker.bindPopup(panoName + " (" + "{% trans "at" %} " + panoDist + ")", {className : 'markerpopup', closeButton: false,}).on('mouseover', marker.openPopup).on('mouseout', marker.closePopup);
+                markerClusters.addLayer( marker );
+                allMarkers.push([panoLat, panoLong]);
+            }
+        }
+    }
+
+    // assign clear session storage function to the home link menu    
+    backClearSessionStorage();
+
+    $( document ).ready(load_map);
+    </script>
+{% endblock js %}
+
+