[Maposmatic-dev] [PATCH] Bounding box with map - another try

[Étienne Loks]

Hi!

Here some pieces of code to provide a slippy map for the bounding box.
This code go further (and is a bit cleaner) than the one provided by David :
 - two way to update : moving the map is changing inputs and changing inputs
moves the map
 - separate JS file to manage the slippy map
 - creation of a Django widget to manage the bounding box field (inputs + the
map)

Enjoy!

-- 
Étienne Loks

git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#   new file:   www/maposmatic/widgets.py
#   new file:   www/media/osm_map.js
#
# Changed but not updated:
#   (use "git add <file>..." to update what will be committed)
#
#   modified:   www/maposmatic/views.py
#   modified:   www/media/style.css
#   modified:   www/templates/maposmatic/base.html
#   modified:   www/templates/maposmatic/index.html

widgets.py : http://www.linux-france.org/~eloks/maposmatic-dev/widgets.py
osm_map.js : http://www.linux-france.org/~eloks/maposmatic-dev/osm_map.js



diff --git a/www/maposmatic/views.py b/www/maposmatic/views.py
index aaff87b..4485921 100644
--- a/www/maposmatic/views.py
+++ b/www/maposmatic/views.py
@@ -34,6 +34,7 @@ from www.maposmatic.models import MapRenderingJob
 import datetime
 import psycopg2
 import www.settings
+from www.maposmatic.widgets import AreaField, PointField

 # Test if a given city has its administrative boundaries inside the
 # OpenStreetMap database. We don't go through the Django ORM but
@@ -65,6 +66,7 @@ class MapRenderingJobForm(ModelForm):
              ('bbox', _('Bounding box')))
     mode = ChoiceField(choices=modes, initial='admin', widget=RadioSelect)
     maptitle = CharField(max_length=256, required=False)
+    bbox = AreaField(label=_("Area"), fields=(PointField(), PointField()))

     def clean(self):
         cleaned_data = self.cleaned_data
diff --git a/www/media/style.css b/www/media/style.css
index 06bd14f..692e44c 100644
--- a/www/media/style.css
+++ b/www/media/style.css
@@ -224,3 +224,14 @@ table.list td, th
   padding: 1em;
   vertical-align: middle;
 }
+
+#map{
+    border: 1px solid black;
+    width:450px;
+    height:350px;
+}
+
+#map_bb input{
+    width:100px;
+    margin:6px;
+}
diff --git a/www/templates/maposmatic/base.html
b/www/templates/maposmatic/base.html
index 481e34a..f41b4a5 100644
--- a/www/templates/maposmatic/base.html
+++ b/www/templates/maposmatic/base.html
@@ -32,6 +32,7 @@
  <title>MapOSMatic</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="/smedia/style.css" media="screen"
/>
+ {% block extralink %}{% endblock %}
  <script language="JavaScript" type="text/javascript">
  {% block extrajs %}{% endblock %}
  </script>
diff --git a/www/templates/maposmatic/index.html
b/www/templates/maposmatic/index.html
index 326c212..adec754 100644
--- a/www/templates/maposmatic/index.html
+++ b/www/templates/maposmatic/index.html
@@ -26,6 +26,10 @@
 {% endcomment %}
 {% load i18n %}

+{% block extralink %}
+{{ form.media }}
+{% endblock %}
+
 {% block extrajs %}
 function area_selection_mode_switch(mode)
 {
@@ -164,10 +168,7 @@ map.{%endblocktrans%}</p>
   <tr class="bybbox" style="display: none;">
     <td>{% trans "Bounding box" %}</td>
     <td style="text-align: center">
-      <input type="text" name="lat_upper_left" style="width: 100px;
       margin-bottom: 5px;"/>{{ form.lat_upper_left.errors }}<br/>
-      <input type="text" name="lon_upper_left"  style="width: 100px;
       margin-bottom: 5px;"/>{{ form.lon_upper_left.errors }}
-      <input type="text" name="lon_bottom_right"  style="width: 100px"/>{{
       form.lat_bottom_right.errors }}<br/>
-      <input type="text" name="lat_bottom_right"  style="width: 100px"/>{{
       form.lon_bottom_right.errors }}
+      {{ form.bbox }}<br/>
     </td>
   </tr>
   <tr>