OpenLayers 4.0 reproject World Ocean Base MapArcGIS to EPSG 3408

Question

I need to add layers from geojson files projected as NSIDC ease-Grid North /South or WGS84-NSIDC Sea Ice Polar Stereographic North /South to my map. The map is the Ocean Base Map from Esri (see Esri map source)

The actual map is visible to this link for your reference (actual map). The map is now projected with a EPSG:3857 projection, but I should change it to one of the above projection in order to visualize correctly the layers that I have to add.

Following the documentation in OpenLayers 4, I tried to create a simple html document before implementing the reProjection commands (I should actually add the possibility to change between one map projection to the other one, when dealing with polar layers), in order to check which is the best projection to be used, as follows:

<html>
  <head>
    <link rel="stylesheet" href="includes/ol.css" type="text/css">
    <script src="includes/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
  </head>
  <body>

   <div id="map" class="map"></div>
   <script>
     var NSIDCEaseGridNorth = new ol.proj.Projection({code: 'EPSG:3413',
     extent: [-15725.89, 9010263.32, 970.09, 555817.28], //taken from http://epsg.io
     units: 'm'
     });
     ol.proj.addProjection(NSIDCEaseGridNorth);

     var attribution = new ol.Attribution({
     html: 'Tiles © <a href="https://services.arcgisonline.com/arcgis/' +
        'rest/services/Ocean/World_Ocean_Base/MapServer">ArcGIS</a>'
     });

     var ocean_map =
      new ol.layer.Tile({
        source: new ol.source.XYZ({
         attributions:[attribution],
         url: 'https://services.arcgisonline.com/arcgis/rest/services/' +
        'Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}'
         }),
         visible: true,
         });

     var map = new ol.Map({
      layers: [],
      target: 'map',
      view: new ol.View({
      projection: 'EPSG:3413', //porjection di base (Spherical Mercator)
      center: [0.00, -5131981.97 ],
      zoom: 0
      })
     });

     map.addLayer(ocean_map);

  </script>
 </body>
</html>

The map however is not visualized (the container is white). If I upload the geojson file with the layer to be projected, it appears in the proper projection. Do you have any suggestions how to fix it?

Mike Mike · Accepted Answer · 2020-06-08T10:42:12

You need to include the proj4 definition of the projection, and use a more recent version of proj4js as 2.4.4 is causing some errors. The extent you are using is not correct (it should be [left, bottom, right, top] and your bottom value is greater than the top) so I have calculated it based on the edges at latitude 60. The reprojection isn't working at zoom 0 so I have set a minZoom of 1.

<html>
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4.js"></script>
  </head>
  <body>

   <div id="map" class="map"></div>
   <script>
     proj4.defs("EPSG:3413","+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs");
     var extent = ol.extent.boundingExtent([
       ol.proj.fromLonLat([-135, 60], 'EPSG:3413'),
       ol.proj.fromLonLat([ -45, 60], 'EPSG:3413'),
       ol.proj.fromLonLat([  45, 60], 'EPSG:3413'),
       ol.proj.fromLonLat([ 135, 60], 'EPSG:3413')
     ]);
     ol.proj.get('EPSG:3413').setExtent(extent);

     var attribution = new ol.Attribution({
     html: 'Tiles © <a href="https://services.arcgisonline.com/arcgis/' +
        'rest/services/Ocean/World_Ocean_Base/MapServer">ArcGIS</a>'
     });

     var ocean_map =
      new ol.layer.Tile({
        source: new ol.source.XYZ({
         attributions:[attribution],
         url: 'https://services.arcgisonline.com/arcgis/rest/services/' +
          'Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}'
        }),
        visible: true,
       });

     var map = new ol.Map({
      layers: [],
      target: 'map',
      view: new ol.View({
       projection: 'EPSG:3413', //porjection di base (Spherical Mercator)
       center: ol.proj.fromLonLat([0, 90], 'EPSG:3413'),
       zoom: 1,
       minZoom: 1
      })
     });

     map.addLayer(ocean_map);

  </script>
 </body>
</html>

OpenLayers 4.0 reproject World Ocean Base MapArcGIS to EPSG 3408

1 Answers