diff --git a/ingc_geonode_theme/settings.py b/ingc_geonode_theme/settings.py
index aeae6d3..59a6b10 100644
--- a/ingc_geonode_theme/settings.py
+++ b/ingc_geonode_theme/settings.py
@@ -126,3 +126,34 @@
     ('pt', 'Portuguese'),
     ('en', 'English'),
 )
+
+LEAFLET_CONFIG['TILES'] = {
+    ('OpenStreetMap',
+         'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+         '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> '
+         'contributors'),
+    ('Watercolor',
+         'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',
+         'Map tiles by <a href="http://stamen.com">Stamen Design</a>, \
+         <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> \
+         &mdash; Map data &copy; \
+         <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \
+         <a href="http://creativecommons.org/licenses/by-sa/2.0/"> \
+         CC-BY-SA</a>'),
+    ('Terrain',
+         'http://a.tile.stamen.com/terrain/{z}/{x}/{y}.png',
+         'Map tiles by <a href="http://stamen.com">Stamen Design</a>, \
+         <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> \
+         &mdash; Map data &copy; \
+         <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \
+         <a href="http://creativecommons.org/licenses/by-sa/2.0/"> \
+         CC-BY-SA</a>'),
+    ('Toner Lite',
+         'http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png',
+         'Map tiles by <a href="http://stamen.com">Stamen Design</a>, \
+         <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> \
+         &mdash; Map data &copy; \
+         <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \
+         <a href="http://creativecommons.org/licenses/by-sa/2.0/"> \
+         CC-BY-SA</a>'),
+}
diff --git a/ingc_geonode_theme/templates/leaflet/layers/layer_leaflet_map.html b/ingc_geonode_theme/templates/leaflet/layers/layer_leaflet_map.html
new file mode 100644
index 0000000..08f6154
--- /dev/null
+++ b/ingc_geonode_theme/templates/leaflet/layers/layer_leaflet_map.html
@@ -0,0 +1,364 @@
+{% load leaflet_tags %}
+{% load i18n %}
+
+{% leaflet_js %}
+{% leaflet_css %}
+
+<style>
+    .leaflet-container { /* all maps */
+        height: 400px;
+    }
+    
+    .leaflet-control-zoom, .leaflet-control-zoomslider {  /* all controls */
+        position: relative;
+        left: 0px !important;
+    }
+</style>
+<script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", function (event) {
+      L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
+
+        onAdd: function (map) {
+          // Triggered when the layer is added to a map.
+          // Register a click listener, then do all the upstream WMS things
+          L.TileLayer.WMS.prototype.onAdd.call(this, map);
+          map.on('click', this.getFeatureInfo, this);
+        },
+
+        onRemove: function (map) {
+          // Triggered when the layer is removed from a map.
+          // Unregister a click listener, then do all the upstream WMS things
+          L.TileLayer.WMS.prototype.onRemove.call(this, map);
+          map.off('click', this.getFeatureInfo, this);
+        },
+
+        getFeatureInfo: function (evt) {
+          // Make an AJAX request to the server and hope for the best
+          var url = this.getFeatureInfoUrl(evt.containerPoint),
+              showResults = L.Util.bind(this.showGetFeatureInfo, this);
+          // console.log(url);
+          $.ajax({
+            url: url,
+            success: function (data, status, xhr) {
+              var err = typeof data === 'string' ? null : data;
+              showResults(err, evt.latlng, data);
+            },
+            error: function (xhr, status, error) {
+              showResults(error);
+            }
+          });
+        },
+
+        getFeatureInfoUrl: function (layerPoint) {
+          // Construct a GetFeatureInfo request URL given a point
+          if (!map) {
+              map = this._map;
+          }
+          // Compute WMS options
+          var bounds = map.getBounds();
+          var size = map.getSize();
+          var wmsVersion = parseFloat(this.wmsParams.version);
+          var crs = this.options.crs || map.options.crs;
+          var projectionKey = wmsVersion >= 1.3 ? 'crs' : 'srs';
+          var nw = crs.project(bounds.getNorthWest());
+          var se = crs.project(bounds.getSouthEast());
+
+          // Assemble WMS parameter string
+
+          var size = this._map.getSize(),
+              params = {
+                request: 'GetFeatureInfo',
+                service: 'WMS',
+                srs: 'EPSG:4326',
+                styles: this.wmsParams.styles,
+                transparent: this.wmsParams.transparent,
+                version: this.wmsParams.version,
+                format: this.wmsParams.format,
+                // bbox: this._map.getBounds().toBBoxString(),
+                height: size.y,
+                width: size.x,
+                layers: this.wmsParams.layers,
+                query_layers: this.wmsParams.layers,
+                info_format: 'text/html'
+              };
+          params[projectionKey] = crs.code;
+          params.bbox = (
+              wmsVersion >= 1.3 && crs === L.CRS.EPSG4326 ?
+              [se.y, nw.x, nw.y, se.x] :
+              [nw.x, se.y, se.x, nw.y]
+          ).join(',');
+
+          params[params.version === '1.3.0' ? 'i' : 'x'] = Math.floor(layerPoint.x);
+          params[params.version === '1.3.0' ? 'j' : 'y'] = Math.floor(layerPoint.y);
+
+          return this._url + L.Util.getParamString(params, this._url, true);
+        },
+
+        showGetFeatureInfo: function (err, latlng, content) {
+          if (err) { console.log(err); return; } // do nothing if there's an error
+
+          // Otherwise show the content in a popup, or something.
+          L.popup({ maxWidth: 900, maxHeight: 200})
+            .setLatLng(latlng)
+            .setContent(content)
+            .openOn(this._map);
+        }
+      });
+
+        L.tileLayer.betterWms = function (url, options) {
+          return new L.TileLayer.BetterWMS(url, options);
+        };
+        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        });
+
+        var unesco = L.tileLayer(
+            'http://en.unesco.org/tiles/{z}/{x}/{y}.png', {
+            attribution: '&copy; unesco'
+        });
+
+        var unesco_geodata = L.tileLayer(
+            'http://en.unesco.org/tiles/geodata/{z}/{x}/{y}.png', {
+            attribution: '&copy; unesco'
+        });
+		
+        // not yet available
+        // var unesco_white = L.tileLayer(
+        //     'http://en.unesco.org/tiles/white/{z}/{x}/{y}.png', {
+        //     attribution: '&copy; unesco'
+        // });
+
+        var base_maps = {
+            'OpenStreetMap': osm
+        };
+
+        {# Extra basemap tiles from LEAFLET_CONFIG #}
+        {% if LEAFLET_CONFIG and LEAFLET_CONFIG.TILES %}
+            {% for tile in LEAFLET_CONFIG.TILES %}
+
+                base_maps["{{ tile.0 }}"] = L.tileLayer('{{ tile.1|safe }}', {
+                    attribution: '{{ tile.2|safe }}'
+                });
+
+            {% endfor %}
+        {% endif %}
+
+        var overlay_layer = {};
+
+        var map = L.map('preview_map',{measureControl: true});
+
+      	//add elements to maps page
+        var scale_bar = L.control.scale().addTo(map);
+       	//var attribution = L.control.attribution({prefix: 'UNESCO-IHP-Wins'}).addTo(map);
+      	//on surcharge attribution
+      	map.attributionControl.addAttribution('<a href="http://en.unesco.org/themes/water-security/hydrology", class="your_class">UNESCO-IHP-Wins</a>');
+
+        L.Control.Watermark = L.Control.extend({
+          onAdd: function(map) {
+          var img = L.DomUtil.create('img');
+
+          // Default to Geonode logo
+          img.src = '{{ STATIC_URL }}/geonode/img/logo.png';
+          img.style.width = '120px';
+
+          return img;
+          },
+
+          onRemove: function(map) {
+          // Nothing to do here
+          }
+        });
+
+        L.control.watermark = function(opts) {
+          return new L.Control.Watermark(opts);
+        };
+
+        L.control.watermark({ position: 'bottomright' }).addTo(map);
+
+        // L.control.measureControl.addTo(map);
+        map.current_base_layer = base_maps[Object.keys(base_maps)[0]];
+        map.addLayer(map.current_base_layer);
+
+        {% if layer_bbox %}
+            zoom_to_box(map, [{{ layer_bbox }}]);
+        {% endif %}
+
+        var tile_layer;
+        {% if resource.get_tiles_url %}
+            tile_layer = L.tileLayer("{{ resource.get_tiles_url|safe }}",
+                    {
+                        'opacity': 0.8
+                    });
+        {%  elif resource.ptype == "gxp_wmscsource"  %}
+            tile_layer = L.tileLayer.betterWms('{{ resource.ows_url|safe }}', {
+                layers: '{{ resource.alternate }}',
+                format: 'image/png',
+                transparent: true,
+                'opacity': 0.8
+            });
+        {%  elif resource.ptype == "gxp_arcrestsource" %}
+            tile_layer = L.esri.dynamicMapLayer('{{ resource.ows_url|safe }}', {
+                layers: '{{ resource.alternate }}',
+                format: 'png',
+                transparent: true,
+                'opacity': 0.8
+            });
+        {% elif resource.ows_url %}
+            tile_layer = L.tileLayer.betterWms('{{ resource.ows_url|safe }}', {
+              layers: '{{ resource.alternate }}',
+              transparent: true,
+              format: 'image/png'
+            });
+        {% endif %}
+
+        if (tile_layer != null) {
+            overlay_layer["{{ resource.title }}"] = tile_layer;
+            map.addLayer(tile_layer);
+        }
+        var layerControl = L.control.layers(
+                base_maps, overlay_layer
+        ).addTo(map);
+
+        map.on('baselayerchange', function (e) {
+            map.current_base_layer = e.layer;
+        });
+
+        if (L.control.hasOwnProperty('fullscreen')) {
+            L.control.fullscreen().addTo(map);
+        }
+
+        if(L.Control.hasOwnProperty('opacitySlider')) {
+            //adjust opacity
+            var opacitySlider = new L.Control.opacitySlider();
+            map.addControl(opacitySlider);
+
+            opacitySlider.setOpacityLayer(tile_layer);
+        }
+
+        if(L.control.hasOwnProperty('navbar')){
+            //adjust info
+            L.control.navbar().addTo(map);
+        }
+
+        {% if OGC_SERVER.default.BACKEND == 'geonode.qgis_server' %}
+            {# expose map object to window #}
+            window.preview_map = map;
+            window.tile_layer = tile_layer;
+
+            {# Trigger dialog for Style edit #}
+            $(".style-edit").on('click', function (event) {
+                $("#qgis-server-style-edit").modal('show');
+            });
+
+            {# Attach form submit event #}
+            $("#qgis-server-style-add-form").on('submit', edit_style_on_submit);
+
+            {# Attach handler for style change #}
+            $("input[name='style']").on('change', function(event){
+                var $input = $(this);
+                if($input.prop('checked') == true){
+                    {# Tile url change #}
+                    var url;
+                    {% if resource.get_tiles_url %}
+                        url = '{% url "qgis_server:tile" layername=resource.name style='style_name' %}';
+                        url = url.replace('style_name', $input.attr('id'));
+                        url = decodeURIComponent(url);
+                        tile_layer.setUrl(url);
+                    {% endif %}
+
+                    {# Legend icon change #}
+                    url = '{% url "qgis_server:legend" layername=resource.name style='style_name' %}';
+                    url = url.replace('style_name', $input.attr('id'));
+                    url = decodeURIComponent(url);
+                    $("#legend_icon").attr('src', url);
+                }
+            });
+        {% endif %}
+  });
+
+  function zoom_to_box(map, bbox) {
+          var bounds = [
+              [bbox[1], bbox[0]],
+              [bbox[3], bbox[2]]
+          ];
+          map.fitBounds(bounds);
+      }
+
+
+  {% if OGC_SERVER.default.BACKEND == 'geonode.qgis_server' %}
+
+    function createMapThumbnail() {
+        {# Use map extent #}
+        var map = window.preview_map;
+        var bbox = map.getBounds().toBBoxString();
+        var current_basemap = L.Util.template(map.current_base_layer._url, {
+            x: '{x}',
+            y: '{y}',
+            z: '{z}',
+            s: 'a'
+        });
+        var data = {
+            'bbox': bbox,
+            'basemap': current_basemap
+        };
+        $.post('{% url "qgis_server:set-thumbnail" layername=resource.name %}', data);
+    }
+
+    {# Event handler for style editing #}
+    function edit_style_on_submit(event){
+        {# prevent form submit by default #}
+        var data = new FormData();
+        $.each($("#id_qml")[0].files, function(i, file){
+            data.append('qml', file);
+        });
+        data.append('name', $("#id_name").val());
+        data.append('title', $("#id_title").val());
+        var action = $(this).attr('action');
+        $.ajax({
+            url: action,
+            data: data,
+            cache: false,
+            contentType: false,
+            processData: false,
+            type: 'POST',
+            success: function(data){
+                if(data){
+                    $("#qgis-server-style-edit .modal-body").html(data);
+                    $(document).ready(function() {
+                        $("#qgis-server-style-add-form").on('submit', edit_style_on_submit);
+                    });
+                }
+            },
+            error: function(jqXhr, textStatus, errorThrown){
+                $("#qgis-server-style-edit .modal-body").html(jqXhr.responseText);
+                $(document).ready(function() {
+                    $("#qgis-server-style-add-form").on('submit', edit_style_on_submit);
+                });
+            }
+        });
+        return false;
+    }
+  {% endif %}
+</script>
+
+{% if OGC_SERVER.default.BACKEND == 'geonode.qgis_server' %}
+    <style>
+        #qgis-server-style-edit .modal-body{
+            overflow-y: scroll;
+            max-height: 600px;
+        }
+    </style>
+    <div class="modal fade" id="qgis-server-style-edit" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title">{% trans "Upload QML Style" %}</h4>
+                </div>
+                <div class="modal-body">
+                    {% include "qgis_server/forms/qml_style.html" %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endif %}
diff --git a/ingc_geonode_theme/templates/leaflet/maps/map_detail.html b/ingc_geonode_theme/templates/leaflet/maps/map_detail.html
new file mode 100644
index 0000000..4b9c10c
--- /dev/null
+++ b/ingc_geonode_theme/templates/leaflet/maps/map_detail.html
@@ -0,0 +1,709 @@
+{% extends "maps/map_base.html" %}
+{% load leaflet_tags %}
+{% load i18n %}
+{% load dialogos_tags %}
+{% load agon_ratings_tags %}
+{% load base_tags %}
+{% load guardian_tags %}
+{% load client_lib_tags %}
+
+{% block title %}{{ resource.title }} — {{ block.super }}{% endblock %}
+
+{% block head %}
+
+{% leaflet_js %}
+{% leaflet_css %}
+<script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", function (event) {
+      L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
+
+        onAdd: function (map) {
+          // Triggered when the layer is added to a map.
+          // Register a click listener, then do all the upstream WMS things
+          L.TileLayer.WMS.prototype.onAdd.call(this, map);
+          map.on('click', this.getFeatureInfo, this);
+        },
+
+        onRemove: function (map) {
+          // Triggered when the layer is removed from a map.
+          // Unregister a click listener, then do all the upstream WMS things
+          L.TileLayer.WMS.prototype.onRemove.call(this, map);
+          map.off('click', this.getFeatureInfo, this);
+        },
+
+        getFeatureInfo: function (evt) {
+          // Make an AJAX request to the server and hope for the best
+          var url = this.getFeatureInfoUrl(evt.containerPoint),
+              showResults = L.Util.bind(this.showGetFeatureInfo, this);
+          // console.log(url);
+          $.ajax({
+            url: url,
+            success: function (data, status, xhr) {
+              var err = typeof data === 'string' ? null : data;
+              showResults(err, evt.latlng, data);
+            },
+            error: function (xhr, status, error) {
+              showResults(error);
+            }
+          });
+        },
+
+        getFeatureInfoUrl: function (layerPoint) {
+          // Construct a GetFeatureInfo request URL given a point
+          if (!map) {
+              map = this._map;
+          }
+          // Compute WMS options
+          var bounds = map.getBounds();
+          var size = map.getSize();
+          var wmsVersion = parseFloat(this.wmsParams.version);
+          var crs = this.options.crs || map.options.crs;
+          var projectionKey = wmsVersion >= 1.3 ? 'crs' : 'srs';
+          var nw = crs.project(bounds.getNorthWest());
+          var se = crs.project(bounds.getSouthEast());
+
+          // Assemble WMS parameter string
+
+          var size = this._map.getSize(),
+              params = {
+                request: 'GetFeatureInfo',
+                service: 'WMS',
+                srs: 'EPSG:4326',
+                styles: this.wmsParams.styles,
+                transparent: this.wmsParams.transparent,
+                version: this.wmsParams.version,
+                format: this.wmsParams.format,
+                // bbox: this._map.getBounds().toBBoxString(),
+                height: size.y,
+                width: size.x,
+                layers: this.wmsParams.layers,
+                query_layers: this.wmsParams.layers,
+                info_format: 'text/html'
+              };
+          params[projectionKey] = crs.code;
+          params.bbox = (
+              wmsVersion >= 1.3 && crs === L.CRS.EPSG4326 ?
+              [se.y, nw.x, nw.y, se.x] :
+              [nw.x, se.y, se.x, nw.y]
+          ).join(',');
+
+          params[params.version === '1.3.0' ? 'i' : 'x'] = Math.floor(layerPoint.x);
+          params[params.version === '1.3.0' ? 'j' : 'y'] = Math.floor(layerPoint.y);
+
+          return this._url + L.Util.getParamString(params, this._url, true);
+        },
+
+        showGetFeatureInfo: function (err, latlng, content) {
+          if (err) { console.log(err); return; } // do nothing if there's an error
+
+          // Otherwise show the content in a popup, or something.
+          L.popup({ maxWidth: 900, maxHeight: 200})
+            .setLatLng(latlng)
+            .setContent(content)
+            .openOn(this._map);
+        }
+      });
+
+        L.tileLayer.betterWms = function (url, options) {
+          return new L.TileLayer.BetterWMS(url, options);
+        };
+        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        });
+
+        var unesco = L.tileLayer(
+            'http://en.unesco.org/tiles/{z}/{x}/{y}.png', {
+            attribution: '&copy; unesco'
+        });
+
+        var unesco_geodata = L.tileLayer(
+            'http://en.unesco.org/tiles/geodata/{z}/{x}/{y}.png', {
+            attribution: '&copy; unesco'
+        });
+
+        var base_maps = {
+            'OpenStreetMap': osm
+        };
+
+        var overlay_layer = {};
+
+        var map = L.map('preview_map',{measureControl: true});
+
+        //add elements to maps page
+        var scale_bar = L.control.scale().addTo(map);
+        //var attribution = L.control.attribution({prefix: 'UNESCO-IHP-Wins'}).addTo(map);
+        //on surcharge attribution
+        map.attributionControl.addAttribution('<a href="http://en.unesco.org/themes/water-security/hydrology", class="your_class">UNESCO-IHP-Wins</a>');
+
+        L.Control.Watermark = L.Control.extend({
+          onAdd: function(map) {
+          var img = L.DomUtil.create('img');
+
+          // Default to Geonode logo
+          img.src = '/static//geonode/img/logo.png';
+          img.style.width = '120px';
+
+          return img;
+          },
+
+          onRemove: function(map) {
+          // Nothing to do here
+          }
+        });
+
+        L.control.watermark = function(opts) {
+          return new L.Control.Watermark(opts);
+        };
+
+        L.control.watermark({ position: 'bottomright' }).addTo(map);
+
+        // L.control.measureControl.addTo(map);
+
+        {% if layer_bbox %}
+            zoom_to_box(map, [{{ layer_bbox }}]);
+        {% endif %}
+
+        var tile_layer;
+
+        {% for maplayer in map_layers %}
+
+            tile_layer = L.tileLayer("{{ maplayer.ows_url }}",
+                    {
+                        'opacity': 0.8
+                    });
+
+            if (tile_layer != null) {
+                overlay_layer["{{ maplayer.name }}"] = tile_layer;
+                map.addLayer(tile_layer);
+            }
+
+        {% endfor %}
+
+        var layerControl = L.control.layers(
+                base_maps, overlay_layer
+        ).addTo(map);
+
+        if (L.control.hasOwnProperty('fullscreen')) {
+            L.control.fullscreen().addTo(map);
+        }
+
+        if(L.Control.hasOwnProperty('opacitySlider')) {
+            //adjust opacity
+            var opacitySlider = new L.Control.opacitySlider();
+            map.addControl(opacitySlider);
+
+            opacitySlider.setOpacityLayer(tile_layer);
+        }
+
+        if(L.control.hasOwnProperty('navbar')){
+            //adjust info
+            L.control.navbar().addTo(map);
+        }
+        {% if OGC_SERVER.default.BACKEND == 'geonode.qgis_server' %}
+            {# expose map object to window #}
+            window.preview_map = map;
+            window.tile_layer = tile_layer;
+
+            {# Trigger dialog for Style edit #}
+            $(".style-edit").on('click', function (event) {
+                $("#qgis-server-style-edit").modal('show');
+            });
+
+            {# Attach form submit event #}
+            $("#qgis-server-style-add-form").on('submit', edit_style_on_submit);
+
+            {# Attach handler for style change #}
+            $("input[name='style']").on('change', function(event){
+                var $input = $(this);
+                if($input.prop('checked') == true){
+                    {# Tile url change #}
+                    var url;
+                    {% if resource.get_tiles_url %}
+                        url = '{% url "qgis_server:tile" layername=resource.name style='style_name' %}';
+                        url = url.replace('style_name', $input.attr('id'));
+                        url = decodeURIComponent(url);
+                        tile_layer.setUrl(url);
+                    {% endif %}
+
+                    {# Legend icon change #}
+                    url = '{% url "qgis_server:legend" layername=resource.name style='style_name' %}';
+                    url = url.replace('style_name', $input.attr('id'));
+                    url = decodeURIComponent(url);
+                    $("#legend_icon").attr('src', url);
+                }
+            });
+        {% endif %}
+
+  });
+
+  function zoom_to_box(map, bbox) {
+          var bounds = [
+              [bbox[1], bbox[0]],
+              [bbox[3], bbox[2]]
+          ];
+          map.fitBounds(bounds);
+      }
+</script>
+  {% if TWITTER_CARD %}
+    {% include "base/_resourcebase_twittercard.html" %}
+  {% endif %}
+  {% if OPENGRAPH_ENABLED %}
+    {% include "base/_resourcebase_opengraph.html" %}
+  {% endif %}
+
+  {{ block.super }}
+{% endblock %}
+
+{% block body_outer %}
+  {% overall_rating resource "map" as map_rating %}
+
+<div class="page-header">
+    <style>
+    #paneltbar {
+        margin-top: 1px !important;
+    }
+    #preview_map { /* all maps */
+        height: 400px;
+        position: relative;
+        left: 0px !important;
+    }
+    </style>
+
+  <h2 class="page-title">{{ resource.title }}</h2>
+</div>
+
+  <div class="row">
+    <div class="col-md-8">
+
+      <div id="embedded_map">
+        <div id="preview_map"></div>
+      </div>
+
+      <div class="map-actions">
+        {% include "_actions.html" %}
+      </div>
+
+      <div class="tab-content">
+        <article id="info" class="tab-pane{% if tab == 'info' or not tab %} active{% endif %}">
+          {% include "base/resourcebase_info_panel.html" %}
+
+          {% if USE_GEOSERVER and DISPLAY_WMS_LINKS %}
+          <p>
+            {% if request.user.is_authenticated and 'access_token' in request.session %}
+              <a href="{% url 'capabilities_map' resource.id %}?access_token={{ request.session.access_token }}">
+            {% else %}
+              <a href="{% url 'capabilities_map' resource.id %}">
+            {% endif %}
+            <i class="fa fa-map"></i> {% trans 'Map layers WMS GetCapabilities document' %}</a></p>
+          {% endif %}
+        </article>
+        {% block social_links %}
+            {% if DISPLAY_SOCIAL %}
+              {% include "social_links.html" %}
+            {% endif %}
+        {% endblock %}
+
+        {% if DISPLAY_COMMENTS %}
+        <article class="tab-pane" id="comments">
+        {% include "_comments.html" %}
+        </article>
+        {% endif %}
+
+        {% if DISPLAY_RATINGS %}
+        <article class="tab-pane" id="rate">
+        <!-- TODO: Move this to a reusable template snippet -->
+          {% if request.user.is_authenticated %}
+          <h3>{% trans "Rate this Map" %}</h3>
+          {% user_rating request.user resource "map" as user_map_rating %}
+          <div id="user_rating" class="category-map" data-score="{{ user_map_rating }}"></div>
+          {% endif %}
+          <h3>{% trans 'Average Rating' %}</h3>
+          {% overall_rating resource "map" as map_rating %}
+          {% num_ratings resource as num_votes %}
+          <div class="overall_rating" style="float:left" data-score="{{ map_rating }}"></div> ({{num_votes}})
+        </article>
+        {% endif %}
+      </div>
+    </div>
+
+    <div class="col-md-4">
+      <ul class="list-group">
+        {% if "download_resourcebase" in perms_list %}
+        <li class="list-group-item">
+          <button class="btn btn-primary btn-md btn-block" data-toggle="modal" data-target="#download-map">{% trans "Download Map" %}</button>
+        </li>
+        {% endif %}
+
+        <li class="list-group-item">
+           <a href="{% url "map_metadata_detail" resource.id %}">
+               <button class="btn btn-primary btn-md btn-block" >{% trans "Metadata Detail" %}</button>
+           </a>
+        </li>
+
+        <div class="modal fade" id="download-map" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div class="modal-dialog">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="myModalLabel">{% trans "Download Map" %}</h4>
+              </div>
+              <div class="modal-body">
+                <ul>
+                    {% if links %}
+                        {% for link in links %}
+                            <li><a href="{{ link.url }}">{{ link.name }}</a></li>
+                        {% endfor %}
+                    {% endif %}
+                <ul>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        {% if "change_resourcebase" in perms_list  or "change_resourcebase_metadata" in perms_list %}
+        <li class="list-group-item">
+          <button class="btn btn-primary btn-md btn-block" data-toggle="modal" data-target="#edit-map">{% trans "Edit Map" %}</button>
+        </li>
+        <div class="modal fade" id="edit-map" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div class="modal-dialog">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="myModalLabel">{% trans "Edit Map" %}</h4>
+              </div>
+              <div class="modal-body">
+                <div class="row edit-modal">
+                  {% if "change_resourcebase_metadata" in perms_list %}
+                  <div class="col-sm-3">
+                    <i class="fa fa-list-alt fa-3x"></i>
+                    <h4>{% trans "Metadata" %}</h4>
+                    <a class="btn btn-default btn-block btn-xs" href="{% url "map_metadata" resource.id %}">{% trans "Wizard" %}</a>
+                    <a class="btn btn-default btn-block btn-xs" href="{% url "map_metadata_advanced" resource.id %}">{% trans "Advanced Edit" %}</a>
+                  </div>
+                  {% endif %}
+                  {% if "change_resourcebase" in perms_list %}
+                  <div class="col-sm-3">
+                    <i class="fa fa-photo fa-3x"></i>
+                    <h4>{% trans "Thumbnail" %}</h4>
+                    <a class="btn btn-default btn-block btn-xs" href="#" id="set_thumbnail">{% trans "Set" %}</a>
+                  </div>
+                  {% endif %}
+                  {% if "change_resourcebase" in perms_list %}
+                  <div class="col-sm-3">
+                    <i class="fa fa-map-marker fa-3x"></i>
+                    <h4>{% trans "Map" %}</h4>
+                    <a class="btn btn-default btn-block btn-xs" href="{% url "map_edit" resource.id %}">{% trans "Edit" %}</a>
+                    <a class="btn btn-danger btn-block btn-xs" href="{% url "map_remove" resource.id %}">{% trans "Remove" %}</a>
+                  </div>
+                  {% endif %}
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        {% endif %}
+        <li class="list-group-item">
+          <a href="{% url "map_view" resource.id %}" class="btn btn-default btn-md btn-block">{% trans "View Map" %}</a>
+        </li>
+        {% comment %}
+        <li class="list-group-item">
+          <a href="#" class="btn btn-default btn-md btn-block">{% trans "Print Map" %}</a>
+        </li>
+        {% endcomment %}
+
+        <li class="list-group-item">
+          <h4 class="list-group-item-heading">{% trans "Map Layers" %}</h4>
+          <p>{% trans "This map uses the following layers:" %}</p>
+          <ul class="list-unstyled">
+            {% for layer in resource.layer_set.all %}
+            {% ifnotequal layer.group 'background' %}
+              {% if layer.local %}
+              <li><a href="{% url "layer_detail" layer.name %}">{{ layer.layer_title }}</a></li>
+              {% else %}
+              <li>{{ layer.layer_title }}</li>
+              {% endif %}
+            {% endifnotequal %}
+            {% endfor %}
+          </ul>
+        </li>
+
+        {% if documents.count > 0 %}
+        <li class="list-group-item">
+          <h4>{% trans "Documents related to this map" %}</h4>
+          <p>{% trans "List of documents related to this map:" %}</p>
+          <ul class="list-unstyled">
+            {% for document in documents %}
+            <li><a href="{{ document.get_absolute_url }}">{{ document.title }}</a></li>
+            {% endfor %}
+          </ul>
+        </li>
+        {% endif %}
+
+        {% if "change_resourcebase_permissions" in perms_list %}
+        <li class="list-group-item">
+          <h4>{% trans "Permissions" %}</h4>
+          <p>{% trans "Specify which users can view or modify this map" %}</p>
+          <button class="btn btn-primary btn-md btn-block" data-toggle="modal" data-target="#_permissions">{% trans "Change Permissions of this Map" %}</button>
+        </li>
+        {% include "_permissions_form.html" %}
+        {% endif %}
+
+        {% if resource.is_public and "change_resourcebase" in perms_list or resource.layer_group %}
+        <li class="list-group-item">
+          <h4>{% trans "Copy this map" %}</h4>
+          <p>{% trans "Duplicate this map and modify it for your own purposes" %}</p>
+          <a href="{% url "new_map" %}?copy={{ resource.id }}" class="btn btn-default btn-md btn-block">{% trans "Create a New Map" %}</a>
+        </li>
+        {% endif %}
+        {% if OGC_SERVER.default.BACKEND == 'geonode.qgis_server' %}
+          <li class="list-group-item">
+              <h4>{% trans "Embed this map" %}</h4>
+              <p>{% trans "Embed this map to your own sites" %}</p>
+              <div class="btn-group btn-block">
+                  <button type="button" class="btn btn-default btn-block dropdown-toggle"
+                          data-toggle="dropdown"
+                          aria-haspopup="true" aria-expanded="false">
+                      Embed Map <span class="caret"></span></button>
+                  <ul class="dropdown-menu btn-block" id="embed-map-list">
+                      <li id="embed-iframe-link">
+                          <a href="#">Embed Iframe Link</a></li>
+                      <li id="embed-widget-link">
+                          <a href="#">Embed Widget Link</a></li>
+                      <li>
+                          <a href="{% url 'map_download_leaflet' resource.id %}">Download Leaflet page</a></li>
+                  </ul>
+              </div>
+          </li>
+        {% endif %}
+
+        {% if resource.is_public and "change_resourcebase" in perms_list or resource.layer_group %}
+        <li class="list-group-item">
+          <h4>{% trans "Map WMS" %}</h4>
+          <dl>{% if resource.layer_group %}
+            <dt>{% trans "WMS layer group for local map layers" %}:</dt>
+            <dd><em>{{ resource.layer_group.catalog.name }}</em> ({% trans "on" %} <a href="{{ resource.layer_group.ows }}?service=WMS&request=GetCapabilities">{% trans "local OWS" %}</a>)</dd>
+            {% endif %}</dl>
+          {% if "change_resourcebase" in perms_list %}
+          <p>{% trans "Publish local map layers as WMS layer group" %}</p>
+          <a id="layer-group" href="{%url "map_wms" resource.id %}" class="btn btn-default btn-md btn-block">{% trans "Publish Map WMS" %}</a>
+          {% endif %}
+          <dl id="layer-group-dl"></dl>
+        </li>
+        {% endif %}
+
+        {% include "base/_resourcebase_contact_snippet.html" %}
+
+      </ul>
+    </div>
+  </div>
+
+    <div class="modal fade" id="embed-iframe" tabindex="-1" role="dialog" aria-labelledby="Embed Iframe"
+         aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title" id="myModalLabel">{% trans "Embed Iframe" %}</h4>
+                </div>
+                <div class="modal-body">
+                    <p>To embed this map, add the following code snippet and customize its properties (scrolling, width,
+                        height) based on your needs to your site:</p>
+                    <p style="font-weight: bold">
+                        &lt;iframe scrolling="yes" src="{{ SITEURL|slice:":-1" }}{% url "map_embed" resource.id %}"
+                        width="480px" height="360px"&gt;&lt;/iframe&gt;
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <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">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title" id="myModalLabel">{% trans "Embed Widget" %}</h4>
+                </div>
+                <div class="modal-body">
+                    <p>To embed this map, copy the following code snippet into your own page:</p>
+                    <pre id="embed-widget-body" style="font-size: 0.5em"></pre>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-clipboard-target="#embed-widget-body">{% trans "Copy to Clipboard" %}</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
+                </div>
+            </div>
+        </div>
+    </div>
+  {% endblock %}
+
+{% block extra_script %}
+
+{{ block.super }}
+{% if DISPLAY_SOCIAL %}
+    {% include 'facebook_sdk.html' %}
+{% endif %}
+{% if request.user.is_authenticated %}
+      {% user_rating_js request.user resource "map" %}
+{% else %}
+      {% overall_rating resource "map" as the_map_rating %}
+{% endif %}
+{% include 'rating.html' %}
+<script type="text/javascript">
+    $(document).ready(function () {
+        post_url = '{% url 'map_embed_widget' resource.id %}';
+        var formatted_data = "";
+        $.post(post_url, function (data) {
+            data = data.split("\n");
+            data_row = data.length;
+            for (var i=0; i < data_row;i++) {
+                formatted_data += data[i] + "\n";
+            }
+            $('#embed-widget-body').text(formatted_data);
+        });
+    });
+    var clipboard = new Clipboard('.btn');
+    clipboard.on('success', function(e) {
+        alert("Code copied");
+    });
+    clipboard.on('error', function(e) {
+        alert("Oops.. something went wrong");
+    });
+ $(function() {
+
+  {% verbatim %}
+  // Publish layer group
+  // TODO: this should really not be inside a script tag...
+  var $wmsBtn = $("#layer-group"),
+      layerGroupElTpl;
+
+  if ($wmsBtn.length > 0) {
+
+    $wmsBtn.on("click", function(event) {
+      event.preventDefault();
+
+      $.ajax({
+        type: "PUT",
+        url: $wmsBtn.attr("href")
+      })
+
+        .done(function(data) {
+          layerGroupElTpl = "<dt>WMS layer group for local map layers:</dt> \
+            <dd><em>{{layerGroupName}}</em> (on <a href='{{ows}}?service=WMS&request=GetCapabilities'>local OWS</a>)</dd>";
+          $.each(data, function(key, value) {
+            // client-side template hack
+            layerGroupElTpl = layerGroupElTpl.replace("{{"+ key + "}}", value);
+          });
+        })
+
+        .fail(function(){
+          layerGroupElTpl = "<dt>Error:</dt> \
+            <dd>Layer group could not be created.</dd>";
+        })
+
+        .always(function(){
+          $("#layer-group-dl").html(layerGroupElTpl);
+        });
+
+    });
+  };
+  {% endverbatim %}
+ });
+{% if DISPLAY_SOCIAL %}
+ (function() {
+   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+   po.src = 'https://apis.google.com/js/plusone.js';
+   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+ })();
+{% endif %}
+  $("#comment_submit_btn").click(function(event) {
+    $.ajax({
+      type: "POST",
+      url: $("#form_post_comment").attr('action'),
+      data: $("#form_post_comment").serialize(),
+      success: function() {
+        $('#form_post_comment_div').modal().find('form')[0].reset();
+        $('#form_post_comment_div').modal('hide');
+        $('#comments_section').load(window.location.pathname + ' #comments_section',
+            function(){$(this).children().unwrap()})
+      }
+    });
+    return false;
+  });
+
+</script>
+{% include "_permissions_form_js.html" %}
+<script type="text/javascript" src="{{ STATIC_URL}}geonode/js/utils/thumbnail.js"></script>
+<script type="text/javascript">
+  $('#set_thumbnail').click(function(){
+    createMapThumbnail();
+    $('#edit-map').modal('toggle');
+  });
+  $('#embed-map-list li').click(function(){
+    if ($(this).attr('id') === 'embed-iframe-link')
+    {
+        $('#embed-iframe').modal('toggle');
+    }
+    else if ($(this).attr('id') === 'embed-widget-link') {
+        $('#embed-widget').modal('toggle');
+    }
+  });
+
+  {% if OGC_SERVER.default.BACKEND == 'geonode.qgis_server' %}
+    function createMapThumbnail() {
+        {# Use map extent #}
+        var map = window.preview_map;
+        var bbox = map.getBounds().toBBoxString();
+        var data = {
+            'bbox': bbox
+        };
+        $.post('{% url "qgis_server:set-thumbnail" layername=resource.name %}', data);
+    }
+
+    {# Event handler for style editing #}
+    function edit_style_on_submit(event){
+        {# prevent form submit by default #}
+        var data = new FormData();
+        $.each($("#id_qml")[0].files, function(i, file){
+            data.append('qml', file);
+        });
+        data.append('name', $("#id_name").val());
+        data.append('title', $("#id_title").val());
+        var action = $(this).attr('action');
+        $.ajax({
+            url: action,
+            data: data,
+            cache: false,
+            contentType: false,
+            processData: false,
+            type: 'POST',
+            success: function(data){
+                if(data){
+                    $("#qgis-server-style-edit .modal-body").html(data);
+                    $(document).ready(function() {
+                        $("#qgis-server-style-add-form").on('submit', edit_style_on_submit);
+                    });
+                }
+            },
+            error: function(jqXhr, textStatus, errorThrown){
+                $("#qgis-server-style-edit .modal-body").html(jqXhr.responseText);
+                $(document).ready(function() {
+                    $("#qgis-server-style-add-form").on('submit', edit_style_on_submit);
+                });
+            }
+        });
+        return false;
+    }
+  {% endif %}
+</script>
+
+{% endblock %}
diff --git a/ingc_geonode_theme/templates/leaflet/maps/map_view.html b/ingc_geonode_theme/templates/leaflet/maps/map_view.html
new file mode 100644
index 0000000..cb2f204
--- /dev/null
+++ b/ingc_geonode_theme/templates/leaflet/maps/map_view.html
@@ -0,0 +1,626 @@
+{% extends "geonode_base.html" %}
+{% load bootstrap_tags %}
+{% load staticfiles %}
+{% load i18n %}
+{% load leaflet_tags %}
+
+{% block title %}
+    {% trans "GeoExplorer" %} - {{ block.super }}
+{% endblock title %}
+
+{% block head %}
+    {{ block.super }}
+{% endblock head %}
+
+{% block extra_head %}
+    {% leaflet_css %}
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css"
+          media="all"/>
+    <link rel="stylesheet"
+          href="https://cdn.rawgit.com/elesdoar/leaflet-control-orderlayers/master/dist/css/leaflet.control.orderlayers.min.css"
+          type="text/css"/>
+    <link rel="stylesheet" href="{% static 'lib/css/L.Control.Pan.css' %}"/>
+    <link href="{{ STATIC_URL }}geonode/css/map_leaflet.css" rel="stylesheet"/>
+    <style type="text/css">
+        html, body, #wrap {
+            height: 100%;
+            width: 100%;
+        }
+
+        #layer-list li {
+            cursor: move;
+        }
+
+        label {
+            padding-bottom: 1%;
+        }
+
+        .leaflet-bar.easy-button-container.leaflet-control {
+            margin-left: 35px;
+        }
+
+    </style>
+{% endblock extra_head %}
+
+{% block body %}
+    </div>
+    </div>
+    </div>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-3 pad0">
+                <div class="options-panel newmap">
+                    <div class="form-group">
+                        <label for="add_layer_select">Available layers</label>
+                        <select class="form-control" id="add_layer_select">
+                            {% for layer in layers %}
+                                <option value="{{ layer.alternate }}"
+                                        id="option_{{ layer.alternate }}">{{ layer.title }}</option>
+                            {% endfor %}
+                        </select>
+                        <input id="add_layer_button" type="submit" class="btn btn-info" value="Add Layer">
+                    </div>
+                    <h4>Map layers</h4>
+                    <div>
+                        <ul id="layer-list">
+                        </ul>
+                        <span id="hidden-layer-list"></span>
+                    </div>
+                    <h4>Background layers</h4>
+                    <div>
+                        <ul id="background-layer-list">
+                        </ul>
+                    </div>
+                    <div class="buttons">
+                        <button class="btn btn-info" data-toggle="modal" data-target="#save-map-modal">Save</button>
+                        {#                        <button class="btn btn-info">Load</button>#}
+                        {#                        <button class="btn btn-info">Publish</button>#}
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-9 pad0">
+                <div id="map" style="position:relative; ">
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modal -->
+    <div class="modal fade" id="save-map-modal" role="dialog">
+        <div class="modal-dialog">
+            <!-- Modal content-->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="modal-title">Save Map</h4>
+                </div>
+                <div class="modal-body">
+                    <form role="form" id="save-map-form" action="{% url 'new_map_json' %}" method="post">
+                        <div class="form-group">
+                            <label for="map-title-input">Title:</label>
+                            <input name="map-title" type="text" class="form-control" id="map-title-input"
+                                   placeholder="Enter map title">
+                        </div>
+                        <div class="form-group">
+                            <label for="map-abstract-input">Abstract:</label>
+                            <textarea name="map-abstract" class="form-control" rows="5" id="map-abstract-input"
+                                      placeholder="Enter map abstract"></textarea>
+                        </div>
+                        <div class="alert alert-danger" id="error-message-modal" hidden>
+                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                            <span id="error-message-content"></span>
+                        </div>
+                        <button type="submit" class="btn btn-default">Save</button>
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock body %}
+
+{% block footer %}
+
+{% endblock footer %}
+
+{% block extra_script %}
+{{ block.super }}
+    {% leaflet_js %}
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
+            type="text/javascript"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
+    <script src="https://cdn.rawgit.com/elesdoar/leaflet-control-orderlayers/master/dist/leaflet.control.orderlayers.min.js"></script>
+    <script src="https://cdn.rawgit.com/elesdoar/leaflet-control-orderlayers/master/dist/leaflet.control.orderlayers.min.js"></script>
+
+    <script src="{% static 'lib/js/L.Control.Pan.js' %}"></script>
+
+    <script type="text/javascript">
+        jQuery.fn.extend({
+            propAttr: $.fn.prop || $.fn.attr
+        });
+        var map = $("#map");
+        var active_background_layer;
+
+        var all_layers = {};
+        var all_layers_list = [];
+
+        // Define some default base layers
+        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+        });
+
+        var Terrain = L.tileLayer('http://a.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
+            maxZoom: 20,
+            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>' +
+                '<a href="http://creativecommons.org/licenses/by/3.0"> CC BY 3.0</a>&mdash; ' +
+                'Map data &copy;<a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
+                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
+        });
+
+        {% if create %}
+            all_layers = {
+                'Terrain': {
+                    'title': 'Terrain',
+                    'name': 'Terrain',
+                    'url': Terrain._url,
+                    'layer': Terrain,
+                    'visibility': false,
+                    'group': 'background',
+                    'zIndex': 0
+                },
+                'osm': {
+                    'title': 'OpenStreetMap',
+                    'name': 'osm',
+                    'url': osm._url,
+                    'layer': osm,
+                    'visibility': true,
+                    'group': 'background',
+                    'zIndex': 0
+                }
+            };
+            all_layers_list.push('Terrain');
+            all_layers_list.push('osm');
+
+            active_background_layer = osm;
+        {% else %}
+            all_layers = {};
+            all_layers_list = [];
+        {% endif %}
+
+        var w_height = $(window).height();
+        var map_height = w_height - $('nav').height();
+        map.css("height", map_height);
+
+        function remove(id) {
+            return (elem = document.getElementById(id)).parentNode.removeChild(elem);
+        }
+
+        function zoom_to_box(map, bbox) {
+            var bounds = [
+                [bbox[1], bbox[0]],
+                [bbox[3], bbox[2]]
+            ];
+            map.fitBounds(bounds);
+        }
+
+        function check_box_layer_clicked(check_box) {
+            if (check_box.checked) {
+                map.addLayer(all_layers[check_box.value].layer);
+                all_layers[check_box.value].visibility = true;
+            } else {
+                if (map.hasLayer(all_layers[check_box.value].layer)) {
+                    map.removeLayer(all_layers[check_box.value].layer);
+                    all_layers[check_box.value].visibility = false;
+                }
+            }
+        }
+
+        function delete_layer_clicked(button) {
+            // Remove layer from the map
+            if (map.hasLayer(all_layers[button.value].layer)) {
+                map.removeLayer(all_layers[button.value].layer);
+            }
+            // Remove layer from the array
+            delete all_layers[button.value];
+            // Remove layer from map layer list
+            remove("li_" + button.value);
+            // Remove from list overlay layers
+            // This statement seems to be bug, so being commented out
+            //remove_from_list(all_layers, button.value);
+            // Remove hidden layer
+            var hidden_layers = $("#hidden-layer-list > input");
+            hidden_layers.each(function() {
+                if (this.id == "hidden_" + button.value) {
+                    this.remove();
+                }
+            });
+
+            // Show from available layer
+            document.getElementById("option_" + button.value).style.display = 'block';
+        }
+
+        function remove_from_list(list, item) {
+            var item_index = list.indexOf(item);
+            if (item_index > -1) {
+                list.splice(item_index, 1)
+            }
+        }
+
+        function compare_bounds(bound1, bound2) {
+            return [
+                Math.max(bound1[0], bound2[0]),
+                Math.min(bound1[1], bound2[1]),
+                Math.max(bound1[2], bound2[2]),
+                Math.min(bound1[3], bound2[3]) ]
+        }
+
+        function add_layer(layer_typename, visibility, layer_order) {
+            visibility = typeof visibility !== 'undefined' ? visibility : true;
+            if (layer_typename in all_layers) {
+                return
+            }
+            if (!layer_typename) {
+                return
+            }
+            $.ajax({
+                type: 'GET',
+                url: '/layers/' + layer_typename + '/get',
+                data: {},
+                dataType: 'json',
+                success: function (json) {
+                    var layer_url = json['url'];
+                    var layer_title = json['title'];
+
+                    // Add layer to leaflet
+                    var tile_layer = L.tileLayer(layer_url);
+                    if (tile_layer != null) {
+                        // Set view to new added layer
+                        var bounds = [json['bbox_x0'], json['bbox_y0'],
+                            json['bbox_x1'], json['bbox_y1']];
+
+                        // Determine which extent should be used, only uses the widest one
+                        var hidden_layers = $("#hidden-layer-list > input");
+                        if(hidden_layers.length != 0) {
+                            temp_bounds = undefined;
+                            hidden_layers.each(function () {
+                                //temp_bounds has been determined from the previous loop
+                                if(temp_bounds != undefined) {
+                                    bounds = temp_bounds;
+                                }
+                                previous_bounds = $(this).val();
+                                //convert string to float
+                                previous_bounds = previous_bounds.split(",").map(function (elem) {
+                                        return parseFloat(elem);
+                                    });
+                                temp_bounds = compare_bounds(bounds, previous_bounds);
+                            });
+                            // The zoom value will determine how wide the layers will be shown
+                            map.setZoom(5);
+                            bounds = temp_bounds;
+                        }
+                        zoom_to_box(map, bounds);
+
+                        // Add to list layer
+                        if (visibility) {
+                            // Add the layer
+                            map.addLayer(tile_layer);
+                            $("#layer-list").prepend(
+                                    "<li id='li_" + layer_typename + "'>" +
+                                    "<input type='checkbox' onclick='check_box_layer_clicked(this);' name='show_layer' value='" + layer_typename + "' checked>" +
+                                    layer_title +
+                                    "<button type='button' onclick='delete_layer_clicked(this);' value='" + layer_typename + "'>X</button>" +
+                                    "</li>");
+                        } else {
+                            $("#layer-list").prepend(
+                                    "<li id='li_" + layer_typename + "'>" +
+                                    "<input type='checkbox' onclick='check_box_layer_clicked(this);' name='show_layer' value='" + layer_typename + "'>" +
+                                    layer_title +
+                                    "<button type='button' onclick='delete_layer_clicked(this);' value='" + layer_typename + "'>X</button>" +
+                                    "</li>");
+                        }
+
+                        $("#hidden-layer-list").html("<input type='hidden' id='hidden_"+ layer_typename +"' value='"+bounds+"' />");
+
+                        // Add to memory
+                        var added_layer = {};
+                        added_layer.title = layer_title;
+                        added_layer.url = layer_url;
+                        added_layer.layer = tile_layer;
+                        added_layer.visibility = visibility;
+                        if (layer_order) {
+                            added_layer.zIndex = layer_order;
+                        } else {
+                            console.log('No layer order, set to : ' + (all_layers_list.length));
+                            added_layer.zIndex = all_layers_list.length;
+                        }
+                        all_layers[layer_typename] = added_layer;
+
+                        // Add to list of overlay layers
+                        all_layers_list.push(layer_typename);
+
+                        // Set zIndex of the layer
+                        tile_layer.setZIndex(added_layer.zIndex);
+                        console.log(added_layer.zIndex);
+
+
+                        // Hide from available layer
+                        document.getElementById("option_" + layer_typename).style.display = 'none';
+                        $('#add_layer_select').prop('selectedIndex', -1);
+                    }
+                },
+                error: function (xhr, errmsg, err) {
+                    console.log(xhr.status + ": " + xhr.responseText);
+                }
+            });
+        }
+
+        function save_map(event) {
+            console.log('Save Map');
+            event.preventDefault();
+            var form_data = $('#save-map-form').serializeObject();
+
+            // Collect layers
+            var layers = [];
+            var map_data = {};
+
+            map_data['sources'] = {};
+            for (i = 0; i < all_layers_list.length; i++) {
+                key = all_layers_list[i];
+                source_token = 'source_' + all_layers[key]['title'];
+                console.log('Adding to layers');
+                console.log(key);
+                layers.push(
+                        {
+                            'name': key,
+                            'title': all_layers[key]['title'],
+                            'visibility': all_layers[key]['visibility'],
+                            'url': all_layers[key]['url'],
+                            'group': all_layers[key]['group'],
+                            'source': source_token
+                        }
+                );
+                map_data['sources'][source_token] = {
+                    'url': all_layers[key]['url']
+                };
+            }
+            console.log(layers);
+
+            map_data['about'] = {
+                'title': form_data['map-title'],
+                'abstract': form_data['map-abstract']
+            };
+            map_data['map'] = {
+                'center': [map.getCenter()['lat'], map.getCenter()['lng']],
+                'zoom': map.getZoom(),
+                'projection': '',
+                'layers': layers
+            };
+
+            $.ajax({
+                url: $(this).attr('action'),
+                type: $(this).attr('method'),
+                data: JSON.stringify(map_data),
+                cache: false,
+                processData: false,
+                contentType: false,
+                dataType: 'json',
+                success: function (data) {
+                    console.log('Save map success');
+                    $('#save-map-modal').modal('hide');
+                },
+                error: function (xhr, status, error) {
+                    console.log('Save map failed' + error);
+                    $("#error-message-content").html(
+                            "<strong>Failed!</strong> There is an error when saving the map. " + error);
+                    $('#error-message-modal').show();
+                }
+            });
+        }
+
+        function populate_background_layer(the_list, the_dict) {
+            console.log(the_list);
+            for (i = 0; i < the_list.length; i++) {
+                var background_layer_name = the_list[i];
+                var background_layer = the_dict[background_layer_name];
+                if (background_layer['group'] != 'background') {
+                    continue;
+                }
+                if (background_layer['visibility'] == "True") {
+                    active_background_layer = background_layer;
+                    $("#background-layer-list").prepend(
+                            '<li>' +
+                            '<input type="radio" name="background-layer" value="' +
+                            background_layer_name +
+                            '" checked="checked">' +
+                            background_layer['title'] +
+                            '</li>'
+                    );
+                } else if (background_layer['visibility']) {
+                    active_background_layer = background_layer;
+                    $("#background-layer-list").prepend(
+                            '<li>' +
+                            '<input type="radio" name="background-layer" value="' +
+                            background_layer_name +
+                            '" checked="checked">' +
+                            background_layer['title'] +
+                            '</li>'
+                    );
+
+                } else {
+                    $("#background-layer-list").prepend(
+                            '<li>' +
+                            '<input type="radio" name="background-layer" value="' +
+                            background_layer_name +
+                            '">' +
+                            background_layer['title'] +
+                            '</li>'
+                    );
+                }
+
+            }
+            // Add radio button listener for background layer
+            $('input:radio[name=background-layer]').change(function () {
+                var new_background_layer = all_layers[this.value]['layer'];
+                map.removeLayer(active_background_layer);
+                new_background_layer.addTo(map);
+                new_background_layer.setZIndex(0);
+                active_background_layer = new_background_layer;
+            });
+        }
+
+        $(document).ready(function () {
+            // Initiate map
+            {% if create %}
+                map = L.map('map', {
+                    center: [-6.2, 106.8],
+                    zoom: 11,
+                    layers: [active_background_layer]
+                });
+            {% else %}
+                map = L.map('map', {
+                    center: [-6.2, 106.8],
+                    zoom: 11
+                });
+            {% endif %}
+
+            L.easyButton({
+                states: [{
+                    stateName: 'zoom-all',
+                    icon: 'fa-globe',
+                    title: 'Zoom to global view',
+                    zIndex: 1,
+                    onClick: function (control) {
+                        zoom_to_box(map, [0, 90, 0, -90]);
+                        map.setZoom(2);
+                    }
+                    }]
+            }).addTo(map);
+
+            // Populate radio button for background layer
+            populate_background_layer(all_layers_list, all_layers);
+
+            // Make sortable
+            var list = document.getElementById("layer-list");
+            Sortable.create(list, {
+                onEnd: function (/**Event*/evt) {
+                    console.log(evt.oldIndex);
+                    console.log(evt.newIndex);
+                    console.log(evt.item.id);
+                    if (evt.newIndex == undefined) {
+                        // Move but to the same location.
+                        console.log('new index is undefined, return');
+                        return;
+                    }
+                    var num_background = 0;
+
+                    for (i = 0; i < all_layers_list.length; i++) {
+                        if (all_layers[all_layers_list[i]].group == 'background') {
+                            num_background++;
+                        }
+                    }
+                    var num_overlay = all_layers_list.length - num_background;
+                    var flag_move_up = evt.oldIndex > evt.newIndex;
+                    console.log("is move up " + flag_move_up);
+                    var small_index = evt.oldIndex;
+                    var big_index = evt.newIndex;
+
+                    if (flag_move_up) {
+                        big_index = evt.oldIndex;
+                        small_index = evt.newIndex;
+                    }
+
+                    var layer_list = $("ul[id='layer-list'] li");
+                    for (i = 0; i < layer_list.length; i++) {
+                        var layer_typename = layer_list[i].id.slice(3);
+                        layer = all_layers[layer_typename].layer;
+                        if (i < small_index) {
+                            // pass
+                        } else if (i > big_index) {
+                            // pass
+                        } else if (i == evt.newIndex) {
+                            if (flag_move_up) {
+                                layer.setZIndex(layer.options.zIndex + (big_index - small_index));
+                                console.log("move layer " + layer_typename + " to " + (layer.options.zIndex))
+                            } else {
+                                layer.setZIndex(layer.options.zIndex - (big_index - small_index));
+                                console.log("move layer " + layer_typename + " to " + (layer.options.zIndex))
+                            }
+
+                        } else {
+                            if (flag_move_up) {
+                                layer.setZIndex(layer.options.zIndex - 1);
+                                console.log("move layer " + layer_typename + " to " + (layer.options.zIndex))
+                            } else {
+                                layer.setZIndex(layer.options.zIndex + 1);
+                                console.log("move layer " + layer_typename + " to " + (layer.options.zIndex))
+                            }
+                        }
+
+                    }
+
+                }
+            }); // That's all
+
+            {% if not create %}
+                {% for layer in map_layers %}
+                    if ("{{ layer.group }}" == 'background') {
+                        all_layers_list.push("{{ layer.name }}");
+                        background_tile = L.tileLayer("{{ layer.ows_url }}");
+                        all_layers["{{ layer.name }}"] = {
+                            'title': '{{ layer.name }}',
+                            'url': '{{ layer.ows_url }}',
+                            'group': '{{ layer.group }}',
+                            'visibility': '{{ layer.visibility }}',
+                            'layer': background_tile,
+                            'zIndex': parseInt("{{ layer.stack_order }}")
+                        };
+                        if ("{{ layer.visibility }}" == 'True') {
+                            background_tile.addTo(map);
+                        }
+                    } else {
+                        console.log("{{ layer.name }} " + "{{ layer.stack_order }}");
+                        {% if layer.visibility %}
+                            add_layer("{{ layer.name }}", true, parseInt("{{ layer.stack_order }}"));
+                        {% else %}
+                            add_layer("{{ layer.name }}", false, parseInt("{{ layer.stack_order }}"));
+                        {% endif %}
+                    }
+                {% endfor %}
+                populate_background_layer(all_layers_list, all_layers);
+                {% if map and map.center_x %}
+                    // console.log("{{ map.center_x }}, {{ map.center_y }}), {{ map.zoom }}");
+                    map.setView(new L.LatLng({{ map.center_x }}, {{ map.center_y }}), {{ map.zoom }});
+                {% endif %}
+            {% else %}
+                // Check layer parameter in url
+                var qd = {};
+                location.search.substr(1).split("&").forEach(function (item) {
+                    var s = item.split("="),
+                            k = s[0],
+                            v = s[1] && decodeURIComponent(s[1]);
+                    (k in qd) ? qd[k].push(v) : qd[k] = [v]
+                });
+                if (qd['layer']) {
+                    for (i = 0; i < qd['layer'].length; i++) {
+                        var layer_typename = qd['layer'][i];
+                        add_layer(layer_typename);
+                    }
+                }
+            {% endif %}
+
+        });
+
+        $("#add_layer_button").click(function () {
+            // Get value from select option
+            {#            var add_layer_select = $('select[id=add_layer_select]');#}
+            var add_layer_select = $("#add_layer_select option:selected");
+            var layer_typename = add_layer_select.val();
+
+            add_layer(layer_typename);
+
+        });
+
+        $('#save-map-form').submit(save_map);
+    </script>
+{% endblock extra_script %}