embed full static HTML page as leaflet page

fix kartoza#151
boney-bun · Sep 26, 2017 · 1800293 · 1800293
1 parent 9c64bb7
commit 1800293
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 2 deletions.
diff --git a/geonode/maps/qgis_server_views.py b/geonode/maps/qgis_server_views.py
@@ -26,6 +26,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
@@ -216,3 +218,44 @@ def perm_filter(layer):
                                       % map_obj.title + '.qlr'
 
     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
+    }
+
+    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' \
+                                      % map_obj.title + '.html'
+
+    return response
diff --git a/geonode/maps/templates/leaflet_maps/map_embed.html b/geonode/maps/templates/leaflet_maps/map_embed.html
@@ -0,0 +1,84 @@
+<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 overlay layers */
+            var overlay_layers = {};
+            /* 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 map = L.map('map').setView([52.505, -0.09], 13);
+            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);
+            //map.fitBounds( [bbox[1],bbox[0]], [bbox[3],bbox[2]] );
+            //map.fitBounds(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 overlay_layers{} and to the map object itself */
+                if (wmsLayer != null) {
+                    overlay_layers["{{ layer.layer_title }}"] = wmsLayer;
+                    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>
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/urls.py b/geonode/maps/urls.py
@@ -39,13 +39,16 @@
     map_embed = 'map_embed'
     # TODO qlr for geoserver
     map_download_qlr = 'map_download_qlr'
+    map_download_leaflet = 'map_download_leaflet'
 
 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
+    from geonode.maps.qgis_server_views import map_download_qlr, \
+        map_download_leaflet
     map_download_qlr = map_download_qlr
+    map_download_leaflet = map_download_leaflet
 
 urlpatterns = patterns(
     'geonode.maps.views',
@@ -65,6 +68,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'),