1

I'm trying to center an OpenLayers map over New Mexico (NM) and having a hard time to get it working.

Here is my code. I'm trying to use decimal values and not the pixel values OpenLayers uses by default.

var init = function () {
    // create map
     map = new OpenLayers.Map({
        div: "map",
        theme: null,
        projection:"EPSG:4326",
        controls: [
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.TouchNavigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            }),
            new OpenLayers.Control.Zoom()
        ],
        layers: [
            new OpenLayers.Layer.OSM()
        ],
        center: new OpenLayers.LonLat(105.9372, 35.6869),
        zoom: 5
    });
};
  • 2
    Santa FE, NM, USA is (35.6869, -105.9372) - maps.google.com/… – Mapperz Jan 23 '13 at 19:24
  • changing to what you suggest doesn't make a difference. It loads zoomed in somewhere in Africa d.pr/i/JTVd – mattwallace Jan 23 '13 at 21:41
  • 1
    I think providing only a single layer (OSM) makes that the base layer, and that in turn sets your map's spatial reference to the base layer's (someone please correct me if I'm wrong). In this case your centre coordinate needs to be in 3857 / 900913 - try @GeoSteve's numbers below. -105,35 in metres from 0,0 will be somewhere close to Africa. – tomfumb Jan 23 '13 at 22:29
4

The easiest way to solve your problem is set your center attribute to something like this:

center: new OpenLayers.LonLat(-11794645.148075,4106844.3420342),

~Update for how I quickly pulled the lat/lon value listed above:

I pulled your code into a demo from the OpenLayers website (openlayers.org/dev/examples/mobile-navigation.html).

Then I used Chrome Dev Tools to actually find your location in the current projections units. To do this, I panned the map over to New Mexico. Then in the console tab in Dev tools, I called the OpenLayers getCenter method, and inspected the object that came back as a result. This is basically what you would see:

map.getCenter()

OpenLayers.LonLat.OpenLayers.Class.initialize

  lat: 4257624.3792627
  lon: -11792875.158424
  __proto__: Object

Screenshot of the dev console Screenshot of the dev console

  • Well that seemed to work but what would help if I'm going to do it this way is how did you do the conversion from the other lat long that I was trying to use? – mattwallace Jan 23 '13 at 23:09
  • I updated the post to include a response to your question, explaining how I determined the appropriate lat/lon values. – GeoSteve Jan 24 '13 at 1:39
3

You shouldn't calculate center's coordinates manually. Use transform method:

center: new OpenLayers.LonLat(-105.9372, 35.6869).transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:3857'))

LIVE DEMO

  • What's going on here? Why are we converting something? Can you please explain why his wouldn't work? I see here we're converting his original coordinates from epsg:4326 to ESPG:3857how can you tell what they are and why ESPG:3857? Thanks man! – Philll_t Mar 4 '14 at 1:45
  • 1
    Because base layer is OpenLayers.Layer.OSM and projection of OSM tiled data is epsg:3857. – drnextgis Mar 4 '14 at 5:28
1

try to declare the projection differently in your map object:

Projection: new OpenLayers.Projection("EPSG: 4326")

  • I tried declaring as you suggested and still getting the same "wrong" result – mattwallace Jan 23 '13 at 23:11
0

Another way that you could try (allowing you to enter the coordinates in your standard decimal degrees format).

After you create your map object:

map = new OpenLayers.Map({
    div: "map",
    theme: null,
    projection:"EPSG:4326",
    controls: [
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.TouchNavigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new OpenLayers.Control.Zoom()
    ],
    layers: [
        new OpenLayers.Layer.OSM()
    ],
    zoom: 5
});

You can execute a statement like this, using the setCenter method and the transform method:

map.setCenter(new OpenLayers.LonLat(-105.9372, 35.6869).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),5);
0

Just to update an answer for 2019, using OpenLayers v5.3+. Since you are using OSM (EPSG:3875), you can easily navigate through EPSG website and get the coordinates from there. Then paste in the center variable in your code:

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [-11802783, 4057552],
    zoom: 5
  })
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.