maposmatic-dev
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Maposmatic-dev] [PATCH 3/3] Improve slippy map integration.


From: Maxime Petazzoni
Subject: [Maposmatic-dev] [PATCH 3/3] Improve slippy map integration.
Date: Wed, 9 Sep 2009 13:04:50 +0200

  * Fix HTML and style issues with the slippy map code
  * Make the JS code a bit more readable
  * Use a default bounding box at init (patch from Etienne Loks)

Note: a bug is still present when loading the page. The slippy map
remains gray (no tile loaded) until an event happens on the map (drap,
zoom).
---
 www/maposmatic/widgets.py           |   35 ++++++++++++---------
 www/media/osm_map.js                |   58 ++++++++++++++++++++--------------
 www/media/style.css                 |   26 +++++++++++-----
 www/settings_local.py.template      |    3 ++
 www/templates/maposmatic/index.html |   30 +++++++-----------
 5 files changed, 87 insertions(+), 65 deletions(-)

diff --git a/www/maposmatic/widgets.py b/www/maposmatic/widgets.py
index ef123b1..ff0d4fe 100644
--- a/www/maposmatic/widgets.py
+++ b/www/maposmatic/widgets.py
@@ -63,6 +63,7 @@ class AreaWidget(forms.TextInput):
         """
         upper_left_lat, upper_left_lon = 0, 0
         lower_right_lat, lower_right_lon = 0, 0
+
         if value:
             if len(value) == 2:
                 upper_left = value[0]
@@ -79,22 +80,26 @@ class AreaWidget(forms.TextInput):
                 elif len(lower_right) == 2:
                     lower_right_lon = lower_right[1]
                     lower_right_lat = lower_right[0]
-        tpl = u"""<div id='map'></div>
-<div id='map_bb'>
-<input type='text' name='lat_upper_left' id='lat_upper_left' 
onchange='updateMap();' value='%s'/><br\>
-<input type='text' name='lon_upper_left' id='lon_upper_left' 
onchange='updateMap();' value='%s'/>
-<input type='text' name='lat_bottom_right' id='lat_bottom_right' 
onchange='updateMap();' value='%s'/><br\>
-<input type='text' name='lon_bottom_right' id='lon_bottom_right' 
onchange='updateMap();' value='%s'/>
+        else:
+            upper_left_lat, upper_left_lon, \
+                lower_right_lat, lower_right_lon = settings.BASE_BOUNDING_BOX
+
+        tpl = u"""<div id="map"></div>
+<div id="map_bb">
+    <input type="text" name="lat_upper_left" id="lat_upper_left"
+           onchange="updateMap();" value="%s" /><br />
+    <input type="text" name="lon_upper_left" id="lon_upper_left"
+           onchange="updateMap();" value="%s" />
+    <input type="text" name="lon_bottom_right" id="lon_bottom_right"
+           onchange="updateMap();" value="%s" /><br />
+    <input type="text" name="lat_bottom_right" id="lat_bottom_right"
+           onchange="updateMap();" value="%s" />
 </div>
-""" % (upper_left_lat, upper_left_lon, lower_right_lat, lower_right_lon)
-        tpl += """<script type='text/javascript'><!--
-init();"""
-        if value:
-            tpl += """
-setTimeout(updateMap, 200);
-"""
-        tpl += """// --></script>
-<hr class='spacer'/>
+""" % (upper_left_lat, upper_left_lon, lower_right_lon, lower_right_lat)
+        tpl += u"""<script type='text/javascript'><!--
+init();
+// -->
+</script>
 """
         return mark_safe(tpl)
 
diff --git a/www/media/osm_map.js b/www/media/osm_map.js
index 15d815b..b31fd98 100644
--- a/www/media/osm_map.js
+++ b/www/media/osm_map.js
@@ -21,56 +21,66 @@ var update_lock = 0;
 var epsg_display_projection = new OpenLayers.Projection('EPSG:4326');
 var epsg_projection = new OpenLayers.Projection('EPSG:900913');
 
+function getUpperLeftLat() { return document.getElementById('lat_upper_left'); 
}
+function getUpperLeftLon() { return document.getElementById('lon_upper_left'); 
}
+function getBottomRightLat() { return 
document.getElementById('lat_bottom_right'); }
+function getBottomRightLon() { return 
document.getElementById('lon_bottom_right'); }
 
 /* update form fields on zoom action */
-function updateForm(){
-    if (update_lock) return;
+function updateForm()
+{
+    if (update_lock)
+      return;
+
     var bounds = map.getExtent();
+
     var topleft = new OpenLayers.LonLat(bounds.left, bounds.top);
     topleft = topleft.transform(epsg_projection, epsg_display_projection);
+
     var bottomright = new OpenLayers.LonLat(bounds.right, bounds.bottom);
     bottomright = bottomright.transform(epsg_projection, 
epsg_display_projection);
-    document.getElementById('lat_upper_left').value = topleft.lat;
-    document.getElementById('lon_upper_left').value = topleft.lon;
-    document.getElementById('lat_bottom_right').value = bottomright.lat;
-    document.getElementById('lon_bottom_right').value = bottomright.lon;
+
+    getUpperLeftLat().value = topleft.lat;
+    getUpperLeftLon().value = topleft.lon;
+    getBottomRightLat().value = bottomright.lat;
+    getBottomRightLon().value = bottomright.lon;
 }
 
 /* update map on form field modification */
-function updateMap(){
-    var bounds = new OpenLayers.Bounds();
-    var topleft = new 
OpenLayers.LonLat(document.getElementById('lon_upper_left').value,
-                                        
document.getElementById('lat_upper_left').value);
-    topleft = topleft.transform(epsg_display_projection, epsg_projection);
-    var bottomright = new 
OpenLayers.LonLat(document.getElementById('lon_bottom_right').value,
-                                            
document.getElementById('lat_bottom_right').value);
-    bottomright = bottomright.transform(epsg_display_projection, 
epsg_projection);
-    bounds.extend(topleft);
-    bounds.extend(bottomright);
+function updateMap()
+{
+    var bounds = new OpenLayers.Bounds(getUpperLeftLon().value,
+                                       getUpperLeftLat().value,
+                                       getBottomRightLon().value,
+                                       getBottomRightLat().value);
+    bounds.transform(epsg_display_projection, epsg_projection);
+
     update_lock = 1;
     map.zoomToExtent(bounds);
-    // force the zoom is necessary when initializing the page (OL bug ?)
-    map.zoomTo(map.getZoomForExtent(bounds));
     update_lock = 0;
 }
 
 /* main initialisation function */
-function init(){
+function init()
+{
     map = new OpenLayers.Map ('map', {
         controls:[new OpenLayers.Control.Navigation(),
-                    new OpenLayers.Control.PanZoomBar(),
-                    new OpenLayers.Control.Attribution()],
-        maxExtent: new 
OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
+                  new OpenLayers.Control.PanZoomBar(),
+                  new OpenLayers.Control.Attribution()],
+        maxExtent: new 
OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
         numZoomLevels: 18,
-        maxResolution: 156543,
+        maxResolution: 156543.0399,
         units: 'm',
         projection: epsg_projection,
         displayProjection: epsg_display_projection
     } );
+
     layerTilesMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
     map.addLayer(layerTilesMapnik);
+
     map.events.register('zoomend', map, updateForm);
     map.events.register('moveend', map, updateForm);
+    updateMap();
+    map.zoomTo(5);
 }
 
-
diff --git a/www/media/style.css b/www/media/style.css
index 3dc3f86..f786db0 100644
--- a/www/media/style.css
+++ b/www/media/style.css
@@ -162,7 +162,7 @@ form ul {
 table#mapform
 {
   margin: 2em auto 0 auto;
-  width: 70%;
+  width: 650px;
   border: 1px solid #CCC;
   padding: 1em;
 }
@@ -173,6 +173,8 @@ table#mapform td
   padding: 3px;
 }
 
+tr.byadmin, tr.bybbox { display: none; vertical-align: top; }
+
 table#mapform tr.label
 {
   font-weight: bold;
@@ -275,13 +277,21 @@ div.pagination
   text-align: center;
 }
 
-#map{
-    border: 1px solid black;
-    width:450px;
-    height:350px;
+div#map
+{
+  border: 1px solid black;
+  width: 600px;
+  height: 350px;
+}
+
+#map_bb
+{
+  margin-top: 1em;
 }
 
-#map_bb input{
-    width:100px;
-    margin:6px;
+#map_bb input
+{
+    width: 100px;
+    margin: 6px;
 }
+
diff --git a/www/settings_local.py.template b/www/settings_local.py.template
index fd3febe..19b4ae4 100644
--- a/www/settings_local.py.template
+++ b/www/settings_local.py.template
@@ -49,3 +49,6 @@ DEFAULT_MAPOSMATIC_LOG_FILE = '/tmp/maposmatic.log'
 # Default log level when the env variable DEFAULT_MAPOSMATIC_LOG_LEVEL
 # is not set
 DEFAULT_MAPOSMATIC_LOG_LEVEL = logging.INFO
+
+# Base bounding box
+BASE_BOUNDING_BOX = (51.956, -7.838, 41.458, 11.937)
diff --git a/www/templates/maposmatic/index.html 
b/www/templates/maposmatic/index.html
index 4ca898a..528414e 100644
--- a/www/templates/maposmatic/index.html
+++ b/www/templates/maposmatic/index.html
@@ -37,10 +37,15 @@ function area_selection_mode_switch(mode)
 {
   var arr = document.getElementById('mapform').getElementsByTagName('tr');
   for (i=0; i < arr.length; i++) {
-    arr[i].style.display = '';
-    if ((arr[i].className.startsWith('byadmin') && mode != 'admin-mode') ||
-        (arr[i].className.startsWith('bybbox') && mode != 'bbox-mode')) {
+    if (arr[i].className.startsWith('byadmin')) {
       arr[i].style.display = 'none';
+      if (mode == 'admin-mode')
+        arr[i].style.display = 'table-row';
+    }
+    if (arr[i].className.startsWith('bybbox')) {
+      arr[i].style.display = 'none';
+      if (mode == 'bbox-mode')
+        arr[i].style.display = 'table-row';
     }
   }
 }
@@ -155,7 +160,7 @@ map.{%endblocktrans%}</p>
   <table id="mapform">
     <tr class="label">
       <td>{% trans "Area selection mode:" %}</td>
-      <td rowspan="6" class="image">
+      <td rowspan="4" class="image">
         <input type="image" src="/smedia/Go-next.png" value="{% trans 
"Generate" %}"
                title="{% trans "Generate" %}" />
       </td>
@@ -178,20 +183,9 @@ map.{%endblocktrans%}</p>
         {{ form.maptitle.errors }}
     </td></tr>
 
-    <tr class="bybbox label"><td>{% trans "Bounding box:" %}</td></tr>
-    <tr class="bybbox field"><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 }}
+    <tr class="bybbox label"><td colspan="2">{% trans "Bounding box:" 
%}</td></tr>
+    <tr class="bybbox field"><td colspan="2" style="text-align: center;">
+        {{ form.bbox }}
     </td></tr>
   </table>
 </form>
-- 
1.6.3.3.210.g29cb3





reply via email to

[Prev in Thread] Current Thread [Next in Thread]