How to set the initial map area in OpenLayers?

Question

I'm using Patrick Wied's OpenLayers Heatmap layer, but only for locations in the UK.

How can I preset the initial map display area to show just the UK?

Here's the code I've used in an ASPX page

  var map, layer, heatmap;
  function init() {
    var testData = <asp:literal id="cLtMapData" runat="server" />    
    var transformedTestData = { max: testData.max, data: [] },
        data = testData.data,
        datalen = data.length,
        nudata = [];
    // in order to use the OpenLayers Heatmap Layer we have to transform our data into
    // { max: <max>, data: [{lonlat: <OpenLayers.LonLat>, count: <count>},...]}
    while (datalen--) {
      nudata.push({
        lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
        count: data[datalen].count
      });
    }
    transformedTestData.data = nudata;
    map = new OpenLayers.Map('heatmapArea');
    layer = new OpenLayers.Layer.OSM();

    // create our heatmap layer
    heatmap = new OpenLayers.Layer.Heatmap("Heatmap Layer", map, layer, { visible: true, radius: 10 }, { isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326") });
    map.addLayers([layer, heatmap]);
    map.zoomToMaxExtent();
    //maxExtent: new OpenLayers.Bounds(-1*b, -1*b, b, b);
    map.zoomIn();
    heatmap.setDataSet(transformedTestData);
  }

It's almost exactly like Patrick's demo pages, but with one difference - var testData = (an asp literal) - so that I can use dynamic data selected bu the user, and retrieved from an SQL Database via a stored procedure that translates UK postcodes into latitude and longitude.

score 0 · Answer 1 · answered Dec 21 '12 at 08:24

    var lat = -3.841867446899414;
        var lon = 43.466002139041116;
        var zoom = 0;


        var fromProjection = new OpenLayers.Projection("EPSG:28992");   // EPSG:4326Transform from WGS 1984
        var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);



        var options = {

            controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.MousePosition(),

        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.Permalink()

      ]
        };

        map = new OpenLayers.Map("basicMap", options);
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);          
       map.setCenter(position, zoom);

score 0 · Accepted Answer · answered Feb 13 '12 at 19:36

0

I would do it in the map initialization. Something like this:

map = new OpenLayers.Map({
        projection: new OpenLayers.Projection("EPSG:900913"),
        units: "m",
        numZoomLevels: 18,
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(
            -20037508.34, -20037508.34, 20037508.34, 20037508.34
        ),
        layers: [
            new OpenLayers.Layer.OSM("OpenStreetMap", null, {
                transitionEffect: 'resize'
            })
        ],
        center: new OpenLayers.LonLat(-10309900, 4215100),
        zoom: 4
    });

answered Feb 13 '12 at 19:36

the_skua

1,230
17
30

That looks useful, I'm just wondering about this line of code "center: new OpenLayers.LonLat(-10309900, 4215100)," - and what the LonLat units are? Are they "normal" long/lat x 10^6 ? – Keith MacDonald Feb 14 '12 at 15:03
I must be doing something wrong... if I try this, " var lat = 52; var lon = -1; var zoom = 3; map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);" it does zoom in, but the map is centred in West Africa, not the UK – Keith MacDonald Feb 14 '12 at 15:25
The LonLat is in the projection of the map. So, in this case Web Mercator, which uses meters. You'll need to get the web mercator coordinates (and center) of your region OR do a projection. – the_skua Feb 14 '12 at 15:47
2

Success! // to set view centre in latitude and longitude values, // those values have to be transformed from one coordinate system to another // http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example var fromProjection = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984 var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection // set the map centre on the middle of the UK var lat = 55.5; var lon = -2.80; var zoom = 5; map.setCenter(new OpenLayers.LonLat(lon,lat).transform(fromProjection,toProjection), zoom); – Keith MacDonald Feb 14 '12 at 15:50
Great! Please accept the answer so that this can be removed from the "unanswered" category. – the_skua Feb 14 '12 at 16:51

How to set the initial map area in OpenLayers?

2 Answers2