reproject map extent in openlayers 3

Question

I want to set an extend on my Openlayers 3.9.0 map.

When the page loads, I want the map to already be centered in that extend, no matter the layers. So I guess I will set an extend to the view, right?

Map contains a single OSM layer like

var layer = new ol.layer.Tile({
    source: new ol.source.OSM(

        {
        attributions: [
          new ol.Attribution({
            html: 'All maps &copy; ' +
                '<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
          })
        ]            
      }             

    ),
    opacity: 0.8,
    brightness: 0.8
});

Then I set the view

var center = ol.proj.transform([21.54967, 38.70250], 'EPSG:4326', 'EPSG:3857');
    var view = new ol.View({
        center: center,
        zoom: 6,
        extent: [2297128.5,4618333.0 , 2459120.25,4763120.0]
    });

And then the map

var map = new ol.Map({
        target: 'map',
        layers: [layer],
        view: view,     
    });

I used my extend in an older project, with EPSG 900913. So to convert the extend from 900913 to default Openlayers 3 3857 I went here here and I put 2297128.5, 4618333 that convereted to 2297128.5,4618333.0

and then

2459120.25, 4763120that convereted to 2459120.25,4763120.0

my two problems

1- the converted coords look similar. Did I do something wrong?

2- the map is centered ok, but not zoomed in the extend. The coords define a county in Greece and the map does not zoom there, I see the whole Greece, along with Turkey and Italy.

What I did wrong? Thanks

don't forget to give some feedback! – Jonatas Walker Sep 28 '15 at 20:18 — Jonatas Walker, Sep 28 '15 at 20:18
So choose an answer as correct and finish this question. – Jonatas Walker Sep 30 '15 at 12:26 — Jonatas Walker, Sep 30 '15 at 12:26

score 5 · Answer 1 · edited May 23 '17 at 10:33

Thanks everyone. What I did was

Keep the OSM layer as is.

Define the limits of the county. Turns out it was EPSG 900913

var countyLimits= ol.proj.transformExtent([2297128.5, 4618333, 2459120.25, 4763120], 'EPSG:900913', 'EPSG:3857');

View is now

var view = new ol.View({
    center: center,
    zoom: 6,
    extent : countyLimits,
    maxZoom:20
});

map is

var map = new ol.Map({
    target: 'map',
    layers:[layer],
    view: view
});

After the map is defined, fit its view in the limits

    map.getView().fit(countyLimits, map.getSize()); 
//get the view of the map and fit it to the limits, according to the map's size

fitExtend is now deprecated, so I used fit. It is experimental , but I guess it will become standard since it replaced fitExtend.

Thanks anyway people

Sources

OL answer

OL3 API

900913 is an old name for 3857 and is an alias for it in ol, so you actually do not need the transform. See http://gis.stackexchange.com/questions/40538/what-is-the-difference-between-epsg900913-and-epsg3857 http://openlayers.org/en/v3.1.0/apidoc/ol.proj.Projection.html — headuck, Sep 29 '15 at 01:05

headuck · Accepted Answer · 2017-11-10T15:31:28.857

Several issues:

The extent [2297128.5,4618333.0, 2459120.25,4763120.0] seems to be in EPSG 3857 already and there is no need to transform it.
The extent option of ol.View is experimental and does not seem to work well. You can do the following to set the bounding box (after you declare map):

var extent = [2297128.5, 4618333.0, 2459120.25, 4763120.0]; view.fitExtent(extent, map.getSize());
The initial zoom in your example was due to the zoom level set on the view (zoom: 6). Using fitExtent() should override the initial zoom level. You can remove the zoom, center and extent options from your view declaration.

By the way, regarding the http://cs2cs.mygeodata.eu/ site, it seems that you have to specify EPSG:4326 instead of EPSG:900913 for the input coordinate, for the transformation to work correctly.

Note: ol.View.fitExtent() was renamed to ol.View.fit() in OpenLayers v3.7.0

score 2 · Answer 3 · answered Sep 28 '15 at 10:28

It can be as easy as:

var min = [2297128.5, 4618333.0];
var max = [2459120.25, 4763120.0];
var extent = ol.extent.boundingExtent([min, max]);

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([21.54967, 38.70250]),
        zoom: 3,
        extent: extent
    })
});

http://jsfiddle.net/jonataswalker/zc3uL66q/

reproject map extent in openlayers 3

3 Answers3