diff --git a/haitidata/context_processors/__init__.py b/haitidata/context_processors/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/haitidata/context_processors/clipped_geotiff.py b/haitidata/context_processors/clipped_geotiff.py
new file mode 100644
index 0000000..745545d
--- /dev/null
+++ b/haitidata/context_processors/clipped_geotiff.py
@@ -0,0 +1,13 @@
+from os.path import basename, splitext
+from os import walk
+from django.conf import settings
+
+
+def clipped_geotiff(request):
+    geotiff_filename = []
+    for (dirpath, dirnames, filenames) in walk(
+            settings.CLIPPED_DIRECTORY):
+        filenames = splitext(filenames[0])
+        geotiff_filename.append(filenames[0])
+
+    return {'CLIPPED_LAYERNAME': geotiff_filename}
diff --git a/haitidata/context_processors/project_setting.py b/haitidata/context_processors/project_setting.py
new file mode 100644
index 0000000..8948eb1
--- /dev/null
+++ b/haitidata/context_processors/project_setting.py
@@ -0,0 +1,5 @@
+from django.conf import settings  # import the settings file
+
+
+def project_setting(request):
+    return {'GEOSERVER_BASE_URL': settings.GEOSERVER_BASE_URL}
diff --git a/haitidata/templates/clip-and-ship/clip-page.html b/haitidata/templates/clip-and-ship/clip-page.html
new file mode 100644
index 0000000..4002173
--- /dev/null
+++ b/haitidata/templates/clip-and-ship/clip-page.html
@@ -0,0 +1,41 @@
+{% extends "site_base.html" %}
+{% load leaflet_tags %}
+{% load staticfiles %}
+
+
+{% block title %}{{ block.super }}{% endblock %}
+{% block page-title %}{{ geotiffname }}{% endblock %}
+
+{% block body_class %}layers{% endblock %}
+
+{% block body_outer %}
+    <div id="download-clip-map"></div>
+
+    <button type="button" class="btn btn-primary btn-md btn-block" data-toggle="modal" data-target="#download_clip_page" id="download-clip-button">Download Clip</button>
+
+    <style>
+        #download-clip-map {
+            height: 500px;
+            width: 100%;
+            text-align: center;
+        }
+
+        .leaflet-control-zoom {
+            left: 0 !important;
+        }
+
+        #download-clip-button {
+            margin-top: 10px;
+        }
+    </style>
+{% endblock %}
+
+{% block extra_script %}
+    {% leaflet_js %}
+    {% leaflet_css %}
+
+    <link rel="stylesheet" href="{% static 'geonode/css/leaflet.draw.css' %}"/>
+    <script src="{% static 'geonode/js/draw/leaflet.draw.js' %}"></script>
+
+    {% include 'clip-and-ship/download-clip.html' %}
+{% endblock extra_script %}
diff --git a/haitidata/templates/clip-and-ship/download-clip.html b/haitidata/templates/clip-and-ship/download-clip.html
new file mode 100644
index 0000000..7d16d0e
--- /dev/null
+++ b/haitidata/templates/clip-and-ship/download-clip.html
@@ -0,0 +1,156 @@
+{% load staticfiles %}
+
+<link rel="stylesheet" href="{% static 'geonode/css/leaflet.draw.css' %}"/>
+<script src="{% static 'geonode/js/draw/leaflet.draw.js' %}"></script>
+
+<script type="text/javascript">
+
+    var mapToClip = L.map('download-clip-map', {
+        center: [18.971187, -72.285215],
+        zoom: 8
+    });
+    var editableLayers = new L.FeatureGroup();
+
+    document.addEventListener("DOMContentLoaded", function (event) {
+
+        var display_type = "{{ resource.display_type }}";
+        if (display_type !== 'Raster Data') {
+            $('#download-clip').prop('disabled', true);
+        }
+
+        {% if 'download_resourcebase' not in perms_list or not perms_list %}
+            $('#download-clip').prop('disabled', true);
+        {% endif %}
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© <a href="http://www.openstreetmap.org" target="_parent">OpenStreetMap</a> and ' +
+            'contributors, under an <a href="http://www.openstreetmap.org/copyright" target="_parent">open license</a>',
+            maxZoom: 18,
+            id: 'maptoclip'
+        }).addTo(mapToClip);
+
+
+        // add draw control
+        mapToClip.addLayer(editableLayers);
+        var drawControlOptions = {
+            position: 'topleft',
+            draw: {
+                polyline: false,
+                circle: false,
+                rectangle: true,
+                marker: false,
+                polygon: {
+                    allowIntersection: false,
+                    drawError: {
+                        color: '#e1e100',
+                        message: '<strong>You can\'t draw that!</strong>'
+                    },
+                    shapeOptions: {
+                        color: '#bada55'
+                    }
+                }
+            },
+            edit: {
+                featureGroup: editableLayers,
+                remove: true
+            }
+        };
+        var tile_layer = null;
+
+        {% if resource.get_tiles_url %}
+            var tiles_url = "{{ resource.get_tiles_url|safe }}";
+            var last_letter_url = tiles_url.charAt(tiles_url.length - 1);
+            if (parseInt(last_letter_url)) {
+                tiles_url = tiles_url.substring(0, tiles_url.length - 1);
+            }
+            tile_layer = L.tileLayer(tiles_url,
+                {
+                    'opacity': 0.8
+                });
+        {% endif %}
+
+        if (tile_layer) {
+            mapToClip.addLayer(tile_layer);
+        }
+
+        var drawControl = new L.Control.Draw(drawControlOptions);
+        mapToClip.addControl(drawControl);
+
+        mapToClip.on(L.Draw.Event.CREATED, function (e) {
+            var type = e.layerType,
+                layer = e.layer;
+
+            editableLayers.addLayer(layer);
+        });
+
+
+    });
+
+
+    $('#download_clip_page').on('shown.bs.modal', function () {
+        mapToClip.invalidateSize();
+        {% if resource.bbox_string %}
+            var bbox = [{{ resource.bbox_string }}];
+            var bounds = [
+                [bbox[1], bbox[0]],
+                [bbox[3], bbox[2]]
+            ];
+            mapToClip.fitBounds(bounds);
+        {% endif %}
+    });
+
+    function download_clip_layer(clipUrl, geometry_url) {
+        var ship_url = clipUrl + '/clip-layer?' + geometry_url;
+        $.ajax({
+            url: ship_url,
+            type: 'GET',
+            success: function (result) {
+                $('#download-clip-button').prop('disabled', false);
+                var clip_filename = result['clip_filename'];
+                location.href = clipUrl + '/' + clip_filename + '/download-clip';
+                editableLayers.clearLayers();
+            },
+            error: function (result) {
+                $('#download-clip-button').prop('disabled', false);
+                var error_message = result['responseJSON']['error'];
+                var $errorMessageDisplay = $('#download-clip-error-message');
+                $errorMessageDisplay.html(error_message);
+                $errorMessageDisplay.show().delay(2000).fadeOut();
+                editableLayers.clearLayers();
+            }
+        });
+    }
+
+    $('#download-clip-button').click(function () {
+        var url = '';
+        $('#download-clip-button').prop('disabled', true);
+
+        // Open Popup
+        var map_type_name = "{{ resource.service_typename }}";
+
+        var clipUrl = '/clip/' + map_type_name;
+
+        if (editableLayers) {
+            var geojson = editableLayers.toGeoJSON();
+            if (geojson.features.length > 0) {
+                var bboxEditableLayers = editableLayers.getBounds().toBBoxString();
+                var geometry_url = '&GEOJSON=' + JSON.stringify(geojson);
+                geometry_url += '&BBOX=' + bboxEditableLayers.toString();
+                download_clip_layer(clipUrl, geometry_url);
+                return;
+            } else {
+                alert('No polygon in map, this will clip from map extent instead.')
+            }
+        } else {
+            alert('No polygon in map, this will clip from map extent instead.')
+        }
+
+
+        if (mapToClip) {
+            var bboxString = mapToClip.getBounds().toBBoxString();
+            var bboxArray = bboxString.split(',');
+            download_clip_layer(clipUrl, '&BBOX=' + bboxArray.toString());
+        }
+    });
+
+</script>
diff --git a/haitidata/utils.py b/haitidata/utils.py
new file mode 100644
index 0000000..ca8b373
--- /dev/null
+++ b/haitidata/utils.py
@@ -0,0 +1,22 @@
+# coding=utf-8
+
+"""Helpers for settings."""
+import os
+
+# Absolute filesystem path to the Django project directory:
+DJANGO_ROOT = os.path.dirname(
+    os.path.dirname(
+        os.path.dirname(os.path.abspath(__file__))
+    ))
+
+
+def absolute_path(*args):
+    """Get an absolute path for a file that is relative to the django root.
+
+    :param args: List of path elements.
+    :type args: list
+
+    :returns: An absolute path.
+    :rtype: str
+    """
+    return os.path.join(DJANGO_ROOT, *args)