diff --git a/django_project/core/settings/project.py b/django_project/core/settings/project.py
index d8a2ea1..99c464f 100644
--- a/django_project/core/settings/project.py
+++ b/django_project/core/settings/project.py
@@ -54,6 +54,7 @@ from .celery_setting import *  # noqa
 # default login url
 LOGIN_URL = '/account/login/'
 
-
+# maximum clip size in bytes
+MAXIMUM_CLIP_SIZE = '40000000'
 
 
diff --git a/django_project/core/templates/layers/download_clip.html b/django_project/core/templates/layers/download_clip.html
index 553e72b..8439d1b 100644
--- a/django_project/core/templates/layers/download_clip.html
+++ b/django_project/core/templates/layers/download_clip.html
@@ -15,6 +15,7 @@
                 <h4 class="modal-title" id="myModalLabel">Download Clip</h4>
             </div>
             <div class="modal-body">
+                <div id="download-clip-error-message" class="label label-danger" style="margin-bottom: 50px; display: none">Error message</div>
                 <div id="download-clip-map" ></div>
             </div>
             <div class="modal-footer">
@@ -120,8 +121,29 @@
         {% endif %}
     });
 
+    function download_clip_layer(current_url, geometry_url) {
+        var ship_url = current_url + '/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 = current_url + '/' + clip_filename + '/download-clip';
+            },
+            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();
+            }
+        });
+    }
+
     $('#download-clip-button').click(function () {
         var url = '';
+        $('#download-clip-button').prop('disabled', true);
 
         // Open Popup
         var map_type_name = "{{ resource.service_typename }}";
@@ -133,8 +155,8 @@
         if (editableLayers) {
             var geojson = editableLayers.toGeoJSON();
             if (geojson.features.length > 0) {
-                url += '&GEOJSON=' + JSON.stringify(geojson);
-                location.href = current_url + '/download-clip?' + url;
+                var geometry_url = '&GEOJSON=' + JSON.stringify(geojson);
+                download_clip_layer(current_url, geometry_url);
                 return;
             } else {
                 alert('No polygon in map, this will clip from map extent instead.')
@@ -146,9 +168,7 @@
 
         if (layerMap) {
             var bboxString = layerMap.getBounds().toBBoxString();
-            url += '&BBOX=' + bboxString;
-            location.href = current_url + '/download-clip?' + url;
-            return;
+            download_clip_layer(current_url, '&BBOX=' + bboxString);
         }
     });