[Maposmatic-dev] Re: First draft of a bounding box with map

[David MENTRE]

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 %}