Download leaflet page #151 (#344)

* embed full static HTML page as leaflet page * removes unnecessary comments * add test case for download leaflet page * fix reverse for geoserver * fix travis error on geoserver fix #151
kartoza · Oct 14, 2017 · 55483f3 · 55483f3
1 parent 7c1aff3
commit 55483f3
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 4 deletions.
diff --git a/geonode/maps/qgis_server_views.py b/geonode/maps/qgis_server_views.py
@@ -30,6 +30,8 @@
 from django.utils.decorators import method_decorator
 from django.core.urlresolvers import reverse
 from django.http import HttpResponse
+from django.shortcuts import render_to_response
+from django.template import RequestContext
 
 from geonode.maps.views import _resolve_map, _PERMISSION_MSG_VIEW, \
     snapshot_config, _resolve_layer
@@ -555,6 +557,48 @@ def perm_filter(layer):
     return response
 
 
+def map_download_leaflet(request, mapid,
+                         template='leaflet_maps/map_embed.html'):
+    """Download leaflet map as static HTML.
+
+    :param request: The request from the frontend.
+    :type request: HttpRequest
+
+    :param mapid: The id of the map.
+    :type mapid: String
+
+    :return: HTML file.
+    """
+
+    map_obj = _resolve_map(request,
+                           mapid,
+                           'base.view_resourcebase',
+                           _PERMISSION_MSG_VIEW)
+    map_layers = MapLayer.objects.filter(
+        map_id=mapid).order_by('stack_order')
+    layers = []
+    for layer in map_layers:
+        if layer.group != 'background':
+            layers.append(layer)
+
+    context = {
+        'resource': map_obj,
+        'map_layers': layers,
+        'for_download': True
+    }
+
+    the_page = render_to_response(template,
+                                  RequestContext(request, context))
+
+    response = HttpResponse(
+        the_page.content, content_type="html",
+        status=the_page.status_code)
+    response['Content-Disposition'] = 'attachment; filename=%s.html' \
+                                      % (map_obj.title,)
+
+    return response
+
+
 def set_thumbnail_map(request, mapid):
     """Update thumbnail based on map extent
 

diff --git a/geonode/maps/templates/leaflet_maps/map_embed.html b/geonode/maps/templates/leaflet_maps/map_embed.html
@@ -0,0 +1,79 @@
+{% if for_download %}
+<html>
+<head>
+    <title>{{ resource.id }}</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4-src.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            /* init custom layer */
+            var wmsLayer = null;
+            /* set coordinate systems */
+            var firstProjection = proj4('EPSG:3857');   // google mercator
+            var secondProjection = proj4('EPSG:4326');  // WGS84 web mercator
+
+            var point_wsg84 = proj4(firstProjection,secondProjection,[{{ resource.center_x }}, {{ resource.center_y }}]);
+            var map = L.map('map').setView([point_wsg84[1], point_wsg84[0]],6);
+            var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+            });
+            map.addLayer(osm)
+
+            /* zoom to bbox */
+            firstProjection = proj4('{{ resource.srid }}');
+            var corner0 = [{{ resource.bbox_x0 }}, {{ resource.bbox_y0 }}];
+            var corner1 = [{{ resource.bbox_x1 }}, {{ resource.bbox_y1 }}];
+
+            corner0 = proj4(firstProjection, secondProjection, corner0);
+            corner1 = proj4(firstProjection, secondProjection, corner1);
+
+            var bbox = [
+                corner0[0],
+                corner0[1],
+                corner1[0],
+                corner1[1]
+            ];
+
+            zoom_to_box(map, bbox);
+
+            {% for layer in map_layers %}
+                var layer_url = '{{  layer.ows_url }}';
+                var options = {
+                    format: 'image/png',
+                    transparent: true,
+                    layers: '{{ layer.name }}',
+                    opacity: 0.8
+                };
+                /* Determine type of tileLayer */
+                if(layer_url.includes('{z}') && layer_url.includes('{y}') && layer_url.includes('{x}')){
+                    wmsLayer = L.tileLayer(layer_url, options);
+                }
+                else {
+                    wmsLayer = L.tileLayer.wms(layer_url, options);
+                }
+                /* add wmsLayer to the map object itself */
+                if (wmsLayer != null) {
+                    map.addLayer(wmsLayer);
+                }
+            {% endfor %}
+
+        });
+    function zoom_to_box(map, bbox) {
+        var bounds = [
+            [bbox[1], bbox[0]],
+            [bbox[3], bbox[2]]
+        ];
+    }
+    </script>
+    <style>
+        #map { height: 640px; }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+</body>
+</html>
+{% endif %}
diff --git a/geonode/maps/templates/maps/map_detail.html b/geonode/maps/templates/maps/map_detail.html
@@ -226,6 +226,8 @@ <h4>{% trans "Embed this map" %}</h4>
                           <a href="javascript:$('#embed-iframe').modal()">Embed Iframe Link</a></li>
                       <li>
                           <a href="javascript:$('#embed-widget').modal()">Embed Widget Link</a></li>
+                      <li>
+                          <a href="{% url 'map_download_leaflet' resource.id %}">Download Leaflet page</a></li>
                   </ul>
               </div>
           </li>
@@ -278,7 +280,7 @@ <h4 class="modal-title" id="myModalLabel">{% trans "Embed Iframe" %}</h4>
         </div>
     </div>
 
-        <div class="modal fade" id="embed-widget" tabindex="-1" role="dialog" aria-labelledby="Embed Widget"
+    <div class="modal fade" id="embed-widget" tabindex="-1" role="dialog" aria-labelledby="Embed Widget"
          aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">

diff --git a/geonode/maps/tests.py b/geonode/maps/tests.py
@@ -429,6 +429,35 @@ def test_map_remove(self):
         # TODO: Also associated layers are not existent
         # self.assertEquals(map_obj.layer_set.all().count(), 0)
 
+    def test_map_download_leaflet(self):
+        """ Test that a map can be downloaded as leaflet"""
+        # first, get a new map: user needs to login
+        self.client.login(username='admin', password='admin')
+        new_map = reverse('new_map_json')
+        response = self.client.post(
+            new_map,
+            data=self.viewer_config,
+            content_type="text/json")
+        self.assertEquals(response.status_code, 200)
+        map_id = int(json.loads(response.content)['id'])
+        self.client.logout()
+
+        # then, obtain the map using leaflet
+        response = self.client.get(
+            reverse(
+                'map_download_leaflet', args=(map_id,)))
+
+        if check_ogc_backend(geoserver.BACKEND_PACKAGE):
+            # download map leaflet hasn't supported in geoserver
+            self.assertEquals(response.status_code, 400)
+        elif check_ogc_backend(qgis_server.BACKEND_PACKAGE):
+            # download map leafleT should return OK
+            self.assertEquals(response.status_code, 200)
+            self.assertEquals(response.get('Content-Type'), 'html')
+        else:
+            # failed if the test reaches this point
+            self.assertFalse(True)
+
     def test_map_embed(self):
         """Test that map can be properly embedded
         """

diff --git a/geonode/maps/urls.py b/geonode/maps/urls.py
@@ -41,17 +41,19 @@
     map_json = 'map_json'
     # TODO qlr for geoserver
     map_download_qlr = 'map_download_qlr'
+    map_download_leaflet = 'map_download_leaflet'
     map_thumbnail = 'map_thumbnail'
 
 elif check_ogc_backend(qgis_server.BACKEND_PACKAGE):
     new_map_view = MapCreateView.as_view()
     existing_map_view = MapDetailView.as_view()
     map_embed = MapEmbedView.as_view()
+    from geonode.maps.qgis_server_views import map_download_qlr, \
+        map_download_leaflet, set_thumbnail_map
+    map_download_qlr = map_download_qlr
+    map_download_leaflet = map_download_leaflet
     map_edit = MapEditView.as_view()
     map_json = MapUpdateView.as_view()
-    from geonode.maps.qgis_server_views import map_download_qlr
-    map_download_qlr = map_download_qlr
-    from geonode.maps.qgis_server_views import set_thumbnail_map
     map_thumbnail = set_thumbnail_map
 
 urlpatterns = patterns(
@@ -72,6 +74,7 @@
     url(r'^(?P<mapid>[^/]+)/edit$', map_edit, name='map_edit'),
     url(r'^(?P<mapid>[^/]+)/data$', map_json, name='map_json'),
     url(r'^(?P<mapid>[^/]+)/download$', 'map_download', name='map_download'),
+    url(r'^(?P<mapid>[^/]+)/download_leaflet', map_download_leaflet, name='map_download_leaflet'),
     url(r'^(?P<mapid>[^/]+)/wmc$', 'map_wmc', name='map_wmc'),
     url(r'^(?P<mapid>[^/]+)/wms$', 'map_wms', name='map_wms'),
     url(r'^(?P<mapid>[^/]+)/remove$', 'map_remove', name='map_remove'),

diff --git a/geonode/maps/views.py b/geonode/maps/views.py
@@ -824,6 +824,14 @@ def map_download_check(request):
     return HttpResponse(content=content, status=status)
 
 
+def map_download_leaflet(request, mapid):
+    """
+    This function serves as geoserver compatibility.
+    We might need to embed leaflet page on geoserver in the future.
+    """
+    return HttpResponseBadRequest('Sorry, leaflet page has not supported yet')
+
+
 def map_download_qlr(request, mapid):
     """
     This function serves as geoserver compatibility.