[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Maposmatic-dev] Re: First draft of a bounding box with map
From: |
David MENTRE |
Subject: |
[Maposmatic-dev] Re: First draft of a bounding box with map |
Date: |
Sun, 06 Sep 2009 21:45:16 +0200 |
User-agent: |
Gnus/5.11 (Gnus v5.11) Emacs/22.2 (gnu/linux) |
Hi!
David MENTRE <address@hidden> writes:
> In the following code:
>
> * Usual OSM controls to navigate into the map (like SHIFT+mouse to zoom
> in);
>
> * CTRL+mouse to chose the selection for the city map.
>
> The generated latitude and longitude are obviously wrong, I don't known
> where the error has slipped in. If anybody has an idea...
Found it! It was again a projection issue! ;-)
Apparently, OSM works in meters and one needs to do a .transform() on a
LonLat object to have it in EPSG:4326, i.e. latitude & longitude.
Here is the patch. I'll make a cleaner version once other patches are
integrated in main repository.
Two small issues with this patch:
* The script need to be put at the *end* of the page[1], otherwise the map
is not created because the <div id="map"> must be already in the DOM
before the map javascript code is executed;
* The size of the <div id="map"> is using absolute dimensions,
otherwise the div is not visible. If you have any idea on how to fix
this.
Yours,
d.
Footnotes:
[1] This is not a real issue because, for performance reason, all
javascript should be put at the bottom of the page:
http://developer.yahoo.com/performance/rules.html#js_bottom
--
GPG/PGP key: A3AD7A2A -- address@hidden
5996 CC46 4612 9CA4 3562 D7AC 6C67 9E96 A3AD 7A2A
diff --git a/www/templates/maposmatic/index.html
b/www/templates/maposmatic/index.html
index 2faabe1..8bd835f 100644
--- a/www/templates/maposmatic/index.html
+++ b/www/templates/maposmatic/index.html
@@ -61,6 +61,10 @@ onload='pageinit()'
{% endblock %}
{% block page %}
+
+<script src="http://openlayers.org/api/OpenLayers.js"></script>
+<script
src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
+
<h1>MapOSMatic</h1>
<h2>{% trans "Introduction" %}</h2>
@@ -168,6 +172,10 @@ map.{%endblocktrans%}</p>
<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 }}
</td>
+ <td>
+ <!-- forced to give absolute size, otherwise nothing is displayed -->
+ <div style="width:400px; height:300px" id="map"></div>
+ </td>
</tr>
<tr>
<td></td>
@@ -177,4 +185,77 @@ map.{%endblocktrans%}</p>
</form>
+<script type="text/javascript">
+var epsg4326 = new OpenLayers.Projection("EPSG:4326");
+// center of the newly created map: France
+var lat=46.4485036;
+var lon=2.2096674;
+var zoom=5;
+
+var map;
+
+function map_init()
+{
+ //Initialise the 'map' object
+ map = new OpenLayers.Map ("map",
+ {
+ controls:[
+ new OpenLayers.Control.Navigation(),
+ new OpenLayers.Control.PanZoomBar(),
+ new OpenLayers.Control.Attribution()],
+ maxExtent: new
OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
+ maxResolution: 156543.0399,
+ numZoomLevels: 19,
+ units: 'm',
+ projection: new OpenLayers.Projection("EPSG:900913"),
+ units: 'degrees',
+ displayProjection: new OpenLayers.Projection("EPSG:4326")
+ });
+
+
+ // Define the map layer
+ // Note that we use a predefined layer that will be
+ // kept up to date with URL changes
+ // Here we define just one layer, but providing a choice
+ // of several layers is also quite simple
+ // Other defined layers are OpenLayers.Layer.OSM.Mapnik,
OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
+
+ layerTilesMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
+ map.addLayer(layerTilesMapnik);
+
+ if( ! map.getCenter() ){
+ var lonLat = new OpenLayers.LonLat(lon, lat).transform(epsg4326,
map.getProjectionObject());
+ map.setCenter (lonLat, zoom);
+ }
+
+ // Add controls to select an area with Ctrl+mouse
+ var control = new OpenLayers.Control();
+ OpenLayers.Util.extend(control,
+ {
+ draw: function () {
+ // this Handler.Box will intercept the ctrl-mousedown
+ // before Control.MouseDefault gets to see it
+ this.box = new OpenLayers.Handler.Box(control,
+ {"done": this.notice},
+ {keyMask:
OpenLayers.Handler.MOD_CTRL});
+ this.box.activate();
+ },
+ notice: function (bounds) {
+ var ul = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left,
bounds.top));
+ var br = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right,
bounds.bottom));
+
+ ul.transform(map.getProjectionObject(), epsg4326);
+ br.transform(map.getProjectionObject(), epsg4326);
+ (document.getElementsByName("lat_upper_left"))[0].value =
ul.lat.toFixed(4);
+ (document.getElementsByName("lon_upper_left"))[0].value =
ul.lon.toFixed(4);
+ (document.getElementsByName("lat_bottom_right"))[0].value =
br.lat.toFixed(4);
+ (document.getElementsByName("lon_bottom_right"))[0].value =
br.lon.toFixed(4);
+ }
+ });
+ map.addControl(control);
+}
+
+map_init();
+</script>
+
{% endblock %}
- [Maposmatic-dev] Re: First draft of a bounding box with map,
David MENTRE <=