maposmatic-dev
[Top][All Lists]
Advanced

[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

Attachment: signature.asc
Description: PGP signature


reply via email to

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