Search code examples
openlayersprojection

Does openlayers View support north american albers equal area conic project (102008)?


I get the following stack trace when trying to use projection in View (in a hello world project that works otherwise without it): “EPSG:102008” in openlayers View:

View.js:1474 Uncaught TypeError: Cannot read property 'getExtent' of null
    at createResolutionConstraint (View.js:1474)
    at View.applyOptions_ (View.js:326)
    at new View (View.js:312)
    at Object.parcelRequire.index.js.ol/ol.css (index.js:43)
 view: new View({
    center: [-10997148, 4569099],
    zoom: 5,
    projection: "EPSG:102008"
  })

without projection the map displays, with, an empty browser pane and the exception above.

update:

These first two answers helped me to get it working. I was not able to use transform (kept giving me an exception about using finite numbers), but simply used proj4() to project the original point. How would I specify a center point in albers format?

proj4.defs('ESRI:102008', '+proj=aea +lat_1=20 +lat_2=60 +lat_0=40 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs');
register(proj4);

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new TileLayer({
      source: new TileArcGISRest({
        url: esriUrl
      })
    })
  ],
  view: new View({
    center: proj4('EPSG:3857', 'ESRI:102008', [-10997148, 4569099]),
    // center: [-10997148, 4569099],
    zoom: 5,
    projection: 'ESRI:102008'
  })
});

update update:

also discovered I can do this:

center:  proj4('EPSG:4326', 'ESRI:102008', [-79.995888, 40.440624]),

Solution

  • The code is "ESRI:102008" (not EPSG). See https://epsg.io/102008 for the proj4 definition. Your center coordinates appear to be web mercator and will need to be transformed.

    proj4.defs("ESRI:102008","+proj=aea +lat_1=20 +lat_2=60 +lat_0=40 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs");
    ol.proj.proj4.register(proj4);
    
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: ol.proj.transform([-10997148, 4569099], "EPSG:3857", "ESRI:102008"),
        zoom: 5,
        projection: "ESRI:102008"
      })
    });
    html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
    <div id="map" class="map"></div>