[enh] oscar_template: initial osm-map support for map results

* TODO: remove leaflet.min.css if not required

searx/engines/openstreetmap.py

@@ -15,7 +15,7 @@ categories = ['map']
 paging = False
 
 # search-url
-url = 'https://nominatim.openstreetmap.org/search/{query}?format=json'
+url = 'https://nominatim.openstreetmap.org/search/{query}?format=json&polygon_geojson=1'
 
 result_base_url = 'https://openstreetmap.org/{osm_type}/{osm_id}'
 
@@ -38,9 +38,23 @@ def response(resp):
         osm_type = r.get('osm_type', r.get('type'))
         url = result_base_url.format(osm_type=osm_type,
                                      osm_id=r['osm_id'])
+
+        geojson =  r.get('geojson')
+
+        # if no geojson is found and osm_type is a node, add geojson Point
+        if not geojson and\
+           osm_type == 'node':
+            geojson = {u'type':u'Point', 
+                       u'coordinates':[r['lon'],r['lat']]}
+
         # append result
-        results.append({'title': title,
+        results.append({'template': 'map.html',
+                        'title': title,
                         'content': '',
+                        'longitude': r['lon'],
+                        'latitude': r['lat'],
+                        'boundingbox': r['boundingbox'],
+                        'geojson': geojson,
                         'url': url})
 
     # return results

searx/static/oscar/js/scripts.js

@@ -7,6 +7,13 @@
 
 */
 
+requirejs.config({
+baseUrl: '/static/oscar/js',
+paths: {
+app: '../app'
+}
+});
+
 if(searx.autocompleter) {
     searx.searchResults = new Bloodhound({
         datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
@@ -61,4 +68,56 @@ $(document).ready(function(){
             source: searx.searchResults.ttAdapter()
         });
     }
+
+    $(".searx_init_map").on( "click", function( event ) {
+        var leaflet_target = $(this).data('leaflet-target');
+        var map_lon = $(this).data('map-lon');
+        var map_lat = $(this).data('map-lat');
+        var map_zoom = $(this).data('map-zoom');
+        var map_boundingbox = $(this).data('map-boundingbox');
+        var map_geojson = $(this).data('map-geojson');
+  
+        require(['leaflet-0.7.3.min'], function(leaflet) {
+            if(map_boundingbox) {
+                var southWest = L.latLng(map_boundingbox[0], map_boundingbox[2]),
+                    northEast = L.latLng(map_boundingbox[1], map_boundingbox[3]),
+                    map_bounds = L.latLngBounds(southWest, northEast);
+            }
+
+            // TODO hack
+            // change default imagePath
+            L.Icon.Default.imagePath = 	"/static/oscar/img/map";
+
+            // init map
+            var map = L.map(leaflet_target);
+
+            // create the tile layer with correct attribution
+	        var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+	        var osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
+	        var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 19, attribution: osmAttrib});		
+
+            // init map view
+            if(map_bounds) {
+                // TODO hack: https://github.com/Leaflet/Leaflet/issues/2021
+                setTimeout(function () {
+                    map.fitBounds(map_bounds);
+                }, 0);
+            } else if (map_lon && map_lat) {
+                if(map_zoom) 
+                    map.setView(new L.LatLng(map_lat, map_lon),map_zoom);
+                else
+                    map.setView(new L.LatLng(map_lat, map_lon),8);
+            }
+
+	        map.addLayer(osm);
+
+            if(map_geojson)
+                L.geoJson(map_geojson).addTo(map);
+	        //if(map_bounds)
+	        //    L.rectangle(map_bounds, {color: "#ff7800", weight: 3, fill:false}).addTo(map);
+        });
+
+        // this event occour only once per element
+        $( this ).off( event );
+    });
 });  

searx/templates/courgette/result_templates/map.html

@@ -0,0 +1,13 @@
+<div class="result {{ result.class }}">
+
+  {% if result['favicon'] %}
+    <img width="14" height="14" class="favicon" src="static/{{theme}}/img/icon_{{result['favicon']}}.ico" />
+  {% endif %}
+
+  <div>
+    <h3 class="result_title"><a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
+	{% if result.publishedDate %}<p class="published_date">{{ result.publishedDate }}</p>{% endif %}
+    <p class="content">{% if result.content %}{{ result.content|safe }}<br />{% endif %}</p>
+    <p class="url">{{ result.pretty_url }}</p>
+  </div>
+</div>

searx/templates/default/result_templates/map.html

@@ -0,0 +1,13 @@
+<div class="result {{ result.class }}">
+
+  {% if result['favicon'] %}
+    <img width="14" height="14" class="favicon" src="static/{{theme}}/img/icon_{{result['favicon']}}.ico" />
+  {% endif %}
+
+  <div>
+    <h3 class="result_title"><a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
+    <p class="url">{{ result.pretty_url }} <a class="cache_link" href="https://web.archive.org/web/{{ result.url }}">cached</a></p>
+	{% if result.publishedDate %}<p class="published_date">{{ result.publishedDate }}</p>{% endif %}
+    <p class="content">{% if result.img_src %}<img src="{{ result.img_src }}" class="image" />{% endif %}{% if result.content %}{{ result.content|safe }}<br class="last"/>{% endif %}</p>
+  </div>
+</div>

searx/templates/oscar/base.html

@@ -10,6 +10,7 @@
     
     <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/oscar.min.css') }}" type="text/css" />  
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.min.css') }}" type="text/css" />
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -64,6 +65,7 @@
     <script src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
     {% if autocomplete %}<script src="{{ url_for('static', filename='js/typeahead.bundle.min.js') }}"></script>{% endif %}
-    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/require-2.1.15.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>-->
 </body>
 </html>

searx/templates/oscar/result_templates/default.html

@@ -4,5 +4,7 @@
 
 {% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
 
+<div class="clearfix"></div>
+
 <span class="label label-default pull-right">{{ result.engine }}</span>
 <p class="text-muted">{{ result.pretty_url }}</p>

searx/templates/oscar/result_templates/images.html

@@ -14,6 +14,7 @@
                 {% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
             </div>
             <div class="modal-footer">
+                <div class="clearfix"></div>
                 <span class="label label-default pull-right">{{ result.engine }}</span>
                 <p class="text-muted pull-left">{{ result.pretty_url }}</p>
                 <div class="clearfix"></div>

searx/templates/oscar/result_templates/map.html

@@ -0,0 +1,18 @@
+<h3>{% if result['favicon'] %}<img width="32" height="32" class="favicon" src="static/{{ theme }}/img/icons/{{ result['favicon'] }}.png" /> {% endif %}<a href="{{ result.url }}">{{ result.title|safe }}</a></h3>
+
+{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.publishedDate }}" pubdate>{{ result.publishedDate }}</time>{% endif %}
+
+{% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
+
+{% if result.latitude and result.longitude %}
+    <button type="button" class="btn btn-default btn-collapse collapsed searx_init_map" data-toggle="collapse" data-target="#result-map-{{ index }}" data-leaflet-target="osm-map-{{ index }}" data-map-lon="{{ result.longitude }}" data-map-lat="{{ result.latitude }}" {% if result.boundingbox %}data-map-boundingbox='{{ result.boundingbox|tojson|safe }}'{% endif %} {% if result.geojson %}data-map-geojson='{{ result.geojson|tojson|safe }}'{% endif %} data-btn-text-collapsed="{{ _('Show Map') }}" data-btn-text-not-collapsed="{{ _('Hide Map') }}">{{ _('Show Map') }}</button>
+
+    <div class="collapse" id="result-map-{{ index }}">
+        <div style="height:300px; width:100%; margin: 10px 0;" id="osm-map-{{ index }}"></div>
+    </div>
+{% endif %}
+
+<div class="clearfix"></div>
+
+<span class="label label-default pull-right">{{ result.engine }}</span>
+<p class="text-muted">{{ result.pretty_url }}</p>

searx/templates/oscar/result_templates/torrent.html

@@ -10,5 +10,7 @@
 
 {% if result.content %}<p>{{ result.content|safe }}</p>{% endif %}
 
+<div class="clearfix"></div>
+
 <span class="label label-default pull-right">{{ result.engine }}</span>
 <p class="text-muted">{{ result.pretty_url }}</p>

searx/templates/oscar/result_templates/videos.html

@@ -9,5 +9,7 @@
     </div>
 </div>
 
+<div class="clearfix"></div>
+
 <span class="label label-default pull-right">{{ result.engine }}</span>
 <p class="text-muted">{{ result.pretty_url }}</p>