ajout d'un champ de recherche d'adresse… reste à faire du style !

panorama/static/panorama/css/celutz.css

@@ -458,3 +458,10 @@ select {
     display: inline;
     margin-right: 10px;
 }
+#search {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+    margin-bottom:9px;
+    margin-top:9px;
+}

panorama/templates/panorama/base.html

@@ -46,6 +46,10 @@
             </ul>
             <ul class="nav navbar-right top-nav">
                 <li>
+                    <input type="text" name="search" id="search" placeholder="22 rue des violettes, grenoble" class="form-control" />
+                    <span id="search-btn" class="btn btn-primary btn-sm" data-loading-text="..."><i class="fa fa-search"></i></span>
+                </li>
+                <li>
                     <a href="/admin"><i class="fa fa-pencil-square-o"></i>  {% trans "Admin" %}</a>
                 </li>
                 <li class="dropdown langue">
@@ -81,6 +85,20 @@
         {% block content %}{% endblock content %}
         </div>
     </div>
+<!-- MODAL -->
+    <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
+            <h4 class="modal-title" id="myModalLabel">Résultats</h4>
+          </div>
+          <div class="modal-body">
+          </div>
+        </div>
+      </div>
+    </div>
+<!-- enmodal -->
     {% block js %}
     {% endblock js %}
 

panorama/templates/panorama/main.html

@@ -106,7 +106,44 @@
                     $('#id_newrefpoint-altitude').val(parseInt(data));
                 });
         }
-    
+        function SearchPlace() {
+            $('#search-btn').click(function(e){
+                e.preventDefault();
+                var btn = $(this).button('loading');
+            
+                // Geocoding
+                var searchString = $('#search').val();
+                $.getJSON('https://nominatim.openstreetmap.org/search?limit=5&format=json&q='+searchString, function(data){
+
+                    var items = [];
+                    $.each(data, function(key, val) {
+                        items.push(
+                            "<li class='list-group-item'><a href='#' data-lat='"+val.lat+"' data-lng='"+val.lon+"'>" + val.display_name + '</a></li>'
+                        );
+                    });
+            
+                    $('#modal .modal-body').empty();
+                    if (items.length != 0) {
+                        $('<ul/>').addClass("list-group").html(items.join('')).appendTo('#modal .modal-body');
+                    } else {
+                        $('<p/>', { html: "Aucun résultat" }).appendTo('#modal .modal-body');
+                    }
+                    $('#modal').modal('show');
+            
+                    // Bind click on results and update coordinates
+                    $('#modal .modal-body a').on('click', function(e){
+                        $('#modal').modal('hide');
+                        e.preventDefault();
+                        crosshair.setLatLng({lat:$(this).data('lat'), lng:$(this).data('lng')}).update();
+                        map.panTo({lat:$(this).data('lat'), lng:$(this).data('lng')});
+                        map.setZoom(19);
+                        mapUpdateCoords();
+                    });
+                    btn.button('reset');
+                }); 
+            });
+        }
+ 
         function initmap() {
             // set up the map
             map = new L.Map('map');
@@ -138,6 +175,9 @@
             $('#locate-gps-btn, #new-pano-btn, #new-refpoint-btn').click(function(e) {
                 fillCoord();
             });
+
+            // Add searching form
+            SearchPlace();
     
             // Create markers for panoramas
             {% for pano in panoramas %}
@@ -174,6 +214,8 @@
             map.addLayer(pointsOfInterest);
             map.fitBounds(allMarkers,{padding: [30, 30]});
             legend.addTo(map);
+
+
             }
         initmap();