[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Re: [Maposmatic-dev] [PATCH 3/3] Improve slippy map integration.
From: |
Thomas Petazzoni |
Subject: |
Re: [Maposmatic-dev] [PATCH 3/3] Improve slippy map integration. |
Date: |
Wed, 9 Sep 2009 14:05:55 +0200 |
Pulled and pushed, thanks.
Le Wed, 9 Sep 2009 13:04:50 +0200,
Maxime Petazzoni <address@hidden> a écrit :
> * 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>
--
Thomas Petazzoni http://thomas.enix.org
Promouvoir et défendre le Logiciel Libre http://www.april.org
Logiciels Libres à Toulouse http://www.toulibre.org
signature.asc
Description: PGP signature
Re: [Maposmatic-dev] [PATCH 1/3] Style improvements, Thomas Petazzoni, 2009/09/09