Admin: improve widget to select an area

1 files changed, 15 insertions, 7 deletions

diff --git a/chimere/widgets.py b/chimere/widgets.py
index e113305..f336ee1 100644
--- a/chimere/widgets.py
+++ b/chimere/widgets.py
@@ -358,9 +358,11 @@ class AreaWidget(forms.TextInput):
     """
     class Media:
         css = {
-            "all": settings.OSM_CSS_URLS + ["%schimere/css/forms.css" % settings.STATIC_URL,]
+            "all": settings.OSM_CSS_URLS + \
+                   ["%schimere/css/forms.css" % settings.STATIC_URL,]
         }
-        js = settings.OSM_JS_URLS + ["%schimere/js/edit_area.js" % settings.STATIC_URL,
+        js = settings.OSM_JS_URLS + [
+              "%schimere/js/edit_area.js" % settings.STATIC_URL,
               "%schimere/js/base.js" % settings.STATIC_URL,]
 
     def render(self, name, value, attrs=None):
@@ -379,7 +381,7 @@ class AreaWidget(forms.TextInput):
                     lower_right_lon, lower_right_lat = lower_right.x, \
                                                        lower_right.y
         tpl = getMapJS()
-        tpl += u"<div id='map_edit'></div>\n"\
+        tpl += u"</div>\n"\
         u"<input type='hidden' name='upper_left_lat' id='upper_left_lat' "\
         u"value='%f'/>\n"\
         u"<input type='hidden' name='upper_left_lon' id='upper_left_lon' "\
@@ -389,13 +391,19 @@ class AreaWidget(forms.TextInput):
         u"<input type='hidden' name='lower_right_lon' id='lower_right_lon' "\
         u"value='%f'/>\n" % (
             upper_left_lat, upper_left_lon, lower_right_lat, lower_right_lon)
-        tpl += u"<script type='text/javascript'>\ninit();"
+        help_msg = _(u"Hold CTRL, click and drag to select area on the map")
+        tpl += u"<p>%s</p>\n" % help_msg
+        tpl += u"<script type='text/javascript'>\n"
+        tpl += u"$(document).ready(function($) {\ninit();\n"
         if value:
             tpl += u"var extent = new OpenLayers.Bounds(%f, %f, %f, %f);\n"\
             u"extent.transform(epsg_display_projection, epsg_projection);\n"\
-            u"map.zoomToExtent(extent, true);""" % (upper_left_lon,
-                    upper_left_lat, lower_right_lon, lower_right_lat)
-        tpl += u"</script>\n<hr class='spacer'/>\n"
+            u"updateForm(extent);\n"\
+            u"map.zoomToExtent(extent, true);\n"\
+            u"map.zoomOut();" % (upper_left_lon, upper_left_lat,
+                                 lower_right_lon, lower_right_lat)
+        tpl += u"});\n</script>\n<hr class='spacer'/>\n"
+        tpl += u"<div id='map_edit'>\n"
         return mark_safe(tpl)
 
     def value_from_datadict(self, data, files, name):