[Top][All Lists]
[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
Re: [Maposmatic-dev] [PATCH 1/3] Style improvements, Thomas Petazzoni, 2009/09/09