How do I center OpenLayers map over New Mexico

Question

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
    });
};

Answer 1

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

Answer 2

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

Answer 3

try to declare the projection differently in your map object:

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

Answer 4

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);

Answer 5

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
  })
});