Raster Reprojection

This example uses OpenLayers v4.0.1. The latest is v.

#### Raster Reprojection

Base map:
Overlay map:
View projection:
Render reprojection edges

Demonstrates client-side raster reprojection between various projections.

This example shows client-side raster reprojection between various projections.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.extent
,
- ol.format.WMTSCapabilities
,
- ol.layer.Tile
,
- ol.proj
,
- ol.source.OSM
,
- ol.source.TileImage
,
- ol.source.TileWMS
,
- ol.source.WMTS
,
- ol.source.XYZ
,
- ol.tilegrid.TileGrid

Copy Edit
Raster Reprojection Demonstrates client-side raster reprojection between various projections. proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' + '+x_0=400000 +y_0=-100000 +ellps=airy ' + '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' + '+units=m +no_defs'); var proj27700 = ol.proj.get('EPSG:27700'); proj27700.setExtent([0, 0, 700000, 1300000]); proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl ' + '+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs'); var proj23032 = ol.proj.get('EPSG:23032'); proj23032.setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]); proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=' + '-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 ' + '+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'); var proj5479 = ol.proj.get('EPSG:5479'); proj5479.setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]); proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 ' + '+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' + '+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs'); var proj21781 = ol.proj.get('EPSG:21781'); proj21781.setExtent([485071.54, 75346.36, 828515.78, 299941.84]); 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 proj3413 = ol.proj.get('EPSG:3413'); proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]); proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 ' + '+a=6370997 +b=6370997 +units=m +no_defs'); var proj2163 = ol.proj.get('EPSG:2163'); proj2163.setExtent([-8040784.5135, -2577524.9210, 3668901.4484, 4785105.1096]); proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' + '+units=m +no_defs'); var proj54009 = ol.proj.get('ESRI:54009'); proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]); var layers = {}; layers['bng'] = new ol.layer.Tile({ source: new ol.source.XYZ({ projection: 'EPSG:27700', url: 'https://tileserver.maptiler.com/miniscale/{z}/{x}/{y}.png', crossOrigin: '', maxZoom: 6 }) }); layers['osm'] = new ol.layer.Tile({ source: new ol.source.OSM() }); layers['wms4326'] = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'https://ahocevar.com/geoserver/wms', crossOrigin: '', params: { 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR' }, projection: 'EPSG:4326' }) }); layers['wms21781'] = new ol.layer.Tile({ source: new ol.source.TileWMS({ attributions: '© <a href="http://www.geo.admin.ch/internet/geoportal/' + 'en/home.html">Pixelmap 1:1000000 / geo.admin.ch</a>', crossOrigin: 'anonymous', params: { 'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale', 'FORMAT': 'image/jpeg' }, url: 'https://wms.geo.admin.ch/', projection: 'EPSG:21781' }) }); var parser = new ol.format.WMTSCapabilities(); var url = 'https://map1.vis.earthdata.nasa.gov/wmts-arctic/' + 'wmts.cgi?SERVICE=WMTS&request=GetCapabilities'; fetch(url).then(function(response) { return response.text(); }).then(function(text) { var result = parser.read(text); var options = ol.source.WMTS.optionsFromCapabilities(result, {layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'}); options.crossOrigin = ''; options.projection = 'EPSG:3413'; options.wrapX = false; layers['wmts3413'] = new ol.layer.Tile({ source: new ol.source.WMTS(options) }); }); layers['grandcanyon'] = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png', crossOrigin: '', tilePixelRatio: 2, maxZoom: 15, attributions: 'Tiles © USGS, rendered with ' + '<a href="http://www.maptiler.com/">MapTiler</a>' }) }); var startResolution = ol.extent.getWidth(ol.proj.get('EPSG:3857').getExtent()) / 256; var resolutions = new Array(22); for (var i = 0, ii = resolutions.length; i < ii; ++i) { resolutions[i] = startResolution / Math.pow(2, i); } layers['states'] = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'https://ahocevar.com/geoserver/wms', crossOrigin: '', params: {'LAYERS': 'topp:states', 'TILED': true}, serverType: 'geoserver', tileGrid: new ol.tilegrid.TileGrid({ extent: [-13884991, 2870341, -7455066, 6338219], resolutions: resolutions, tileSize: [512, 256] }), projection: 'EPSG:3857' }) }); var map = new ol.Map({ layers: [ layers['osm'], layers['bng'] ], target: 'map', view: new ol.View({ projection: 'EPSG:3857', center: [0, 0], zoom: 2 }) }); var baseLayerSelect = document.getElementById('base-layer'); var overlayLayerSelect = document.getElementById('overlay-layer'); var viewProjSelect = document.getElementById('view-projection'); var renderEdgesCheckbox = document.getElementById('render-edges'); var renderEdges = false; function updateViewProjection() { var newProj = ol.proj.get(viewProjSelect.value); var newProjExtent = newProj.getExtent(); var newView = new ol.View({ projection: newProj, center: ol.extent.getCenter(newProjExtent || [0, 0, 0, 0]), zoom: 0, extent: newProjExtent || undefined }); map.setView(newView); // Example how to prevent double occurence of map by limiting layer extent if (newProj == ol.proj.get('EPSG:3857')) { layers['bng'].setExtent([-1057216, 6405988, 404315, 8759696]); } else { layers['bng'].setExtent(undefined); } } /** * Handle change event. */ viewProjSelect.onchange = function() { updateViewProjection(); }; updateViewProjection(); var updateRenderEdgesOnLayer = function(layer) { if (layer instanceof ol.layer.Tile) { var source = layer.getSource(); if (source instanceof ol.source.TileImage) { source.setRenderReprojectionEdges(renderEdges); } } }; /** * Handle change event. */ baseLayerSelect.onchange = function() { var layer = layers[baseLayerSelect.value]; if (layer) { layer.setOpacity(1); updateRenderEdgesOnLayer(layer); map.getLayers().setAt(0, layer); } }; /** * Handle change event. */ overlayLayerSelect.onchange = function() { var layer = layers[overlayLayerSelect.value]; if (layer) { layer.setOpacity(0.7); updateRenderEdgesOnLayer(layer); map.getLayers().setAt(1, layer); } }; /** * Handle change event. */ renderEdgesCheckbox.onchange = function() { renderEdges = renderEdgesCheckbox.checked; map.getLayers().forEach(function(layer) { updateRenderEdgesOnLayer(layer); }); }; <div id="map" class="map"></div> <form class="form-inline"> <div class="col-md-3"> <label>Base map:</label> <select id="base-layer"> <option value="osm">OSM (EPSG:3857)</option> <option value="wms4326">WMS (EPSG:4326)</option> </select> </div> <div class="col-md-4"> <label>Overlay map:</label> <select id="overlay-layer"> <option value="bng">British National Grid (EPSG:27700)</option> <option value="wms21781">Swisstopo WMS (EPSG:21781)</option> <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option> <option value="grandcanyon">Grand Canyon HiDPI (EPSG:3857)</option> <option value="states">United States (EPSG:3857)</option> </select> </div> <div class="col-md-5"> <label>View projection:</label> <select id="view-projection"> <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option> <option value="EPSG:4326">WGS 84 (EPSG:4326)</option> <option value="ESRI:54009">Mollweide (ESRI:54009)</option> <option value="EPSG:27700">British National Grid (EPSG:27700)</option> <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option> <option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option> <option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option> <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option> </select> </div> <label> Render reprojection edges <input type="checkbox" id="render-edges"> </label> </form>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Raster Reprojection</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <form class="form-inline">
          <div class="col-md-3">
            <label>Base map:</label>
            <select id="base-layer">
              <option value="osm">OSM (EPSG:3857)</option>
              <option value="wms4326">WMS (EPSG:4326)</option>
            </select>
          </div>
          <div class="col-md-4">
            <label>Overlay map:</label>
            <select id="overlay-layer">
              <option value="bng">British National Grid (EPSG:27700)</option>
              <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
              <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
              <option value="grandcanyon">Grand Canyon HiDPI (EPSG:3857)</option>
              <option value="states">United States (EPSG:3857)</option>
            </select>
          </div>
          <div class="col-md-5">
            <label>View projection:</label>
            <select id="view-projection">
              <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
              <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
              <option value="ESRI:54009">Mollweide (ESRI:54009)</option>
              <option value="EPSG:27700">British National Grid (EPSG:27700)</option>
              <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
              <option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
              <option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
              <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
            </select>
          </div>
          <label>
            Render reprojection edges
            <input type="checkbox" id="render-edges">
          </label>
        </form>
        <script>
          proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
              '+x_0=400000 +y_0=-100000 +ellps=airy ' +
              '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
              '+units=m +no_defs');
          var proj27700 = ol.proj.get('EPSG:27700');
          proj27700.setExtent([0, 0, 700000, 1300000]);

          proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl ' +
              '+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs');
          var proj23032 = ol.proj.get('EPSG:23032');
          proj23032.setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]);

          proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=' +
              '-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 ' +
              '+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
          var proj5479 = ol.proj.get('EPSG:5479');
          proj5479.setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);

          proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 ' +
              '+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' +
              '+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
          var proj21781 = ol.proj.get('EPSG:21781');
          proj21781.setExtent([485071.54, 75346.36, 828515.78, 299941.84]);

          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 proj3413 = ol.proj.get('EPSG:3413');
          proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);

          proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 ' +
              '+a=6370997 +b=6370997 +units=m +no_defs');
          var proj2163 = ol.proj.get('EPSG:2163');
          proj2163.setExtent([-8040784.5135, -2577524.9210, 3668901.4484, 4785105.1096]);

          proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' +
              '+units=m +no_defs');
          var proj54009 = ol.proj.get('ESRI:54009');
          proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);

          var layers = {};

          layers['bng'] = new ol.layer.Tile({
            source: new ol.source.XYZ({
              projection: 'EPSG:27700',
              url: 'https://tileserver.maptiler.com/miniscale/{z}/{x}/{y}.png',
              crossOrigin: '',
              maxZoom: 6
            })
          });

          layers['osm'] = new ol.layer.Tile({
            source: new ol.source.OSM()
          });

          layers['wms4326'] = new ol.layer.Tile({
            source: new ol.source.TileWMS({
              url: 'https://ahocevar.com/geoserver/wms',
              crossOrigin: '',
              params: {
                'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
              },
              projection: 'EPSG:4326'
            })
          });

          layers['wms21781'] = new ol.layer.Tile({
            source: new ol.source.TileWMS({
              attributions: '© <a href="http://www.geo.admin.ch/internet/geoportal/' +
                'en/home.html">Pixelmap 1:1000000 / geo.admin.ch</a>',
              crossOrigin: 'anonymous',
              params: {
                'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
                'FORMAT': 'image/jpeg'
              },
              url: 'https://wms.geo.admin.ch/',
              projection: 'EPSG:21781'
            })
          });

          var parser = new ol.format.WMTSCapabilities();
          var url = 'https://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
              'wmts.cgi?SERVICE=WMTS&request=GetCapabilities';
          fetch(url).then(function(response) {
            return response.text();
          }).then(function(text) {
            var result = parser.read(text);
            var options = ol.source.WMTS.optionsFromCapabilities(result,
                {layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'});
            options.crossOrigin = '';
            options.projection = 'EPSG:3413';
            options.wrapX = false;
            layers['wmts3413'] = new ol.layer.Tile({
              source: new ol.source.WMTS(options)
            });
          });

          layers['grandcanyon'] = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: 'https://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png',
              crossOrigin: '',
              tilePixelRatio: 2,
              maxZoom: 15,
              attributions: 'Tiles © USGS, rendered with ' +
                '<a href="http://www.maptiler.com/">MapTiler</a>'
            })
          });

          var startResolution =
              ol.extent.getWidth(ol.proj.get('EPSG:3857').getExtent()) / 256;
          var resolutions = new Array(22);
          for (var i = 0, ii = resolutions.length; i < ii; ++i) {
            resolutions[i] = startResolution / Math.pow(2, i);
          }

          layers['states'] = new ol.layer.Tile({
            source: new ol.source.TileWMS({
              url: 'https://ahocevar.com/geoserver/wms',
              crossOrigin: '',
              params: {'LAYERS': 'topp:states', 'TILED': true},
              serverType: 'geoserver',
              tileGrid: new ol.tilegrid.TileGrid({
                extent: [-13884991, 2870341, -7455066, 6338219],
                resolutions: resolutions,
                tileSize: [512, 256]
              }),
              projection: 'EPSG:3857'
            })
          });

          var map = new ol.Map({
            layers: [
              layers['osm'],
              layers['bng']
            ],
            target: 'map',
            view: new ol.View({
              projection: 'EPSG:3857',
              center: [0, 0],
              zoom: 2
            })
          });

          var baseLayerSelect = document.getElementById('base-layer');
          var overlayLayerSelect = document.getElementById('overlay-layer');
          var viewProjSelect = document.getElementById('view-projection');
          var renderEdgesCheckbox = document.getElementById('render-edges');
          var renderEdges = false;

          function updateViewProjection() {
            var newProj = ol.proj.get(viewProjSelect.value);
            var newProjExtent = newProj.getExtent();
            var newView = new ol.View({
              projection: newProj,
              center: ol.extent.getCenter(newProjExtent || [0, 0, 0, 0]),
              zoom: 0,
              extent: newProjExtent || undefined
            });
            map.setView(newView);

            // Example how to prevent double occurence of map by limiting layer extent
            if (newProj == ol.proj.get('EPSG:3857')) {
              layers['bng'].setExtent([-1057216, 6405988, 404315, 8759696]);
            } else {
              layers['bng'].setExtent(undefined);
            }
          }

          /**
           * Handle change event.
           */
          viewProjSelect.onchange = function() {
            updateViewProjection();
          };

          updateViewProjection();

          var updateRenderEdgesOnLayer = function(layer) {
            if (layer instanceof ol.layer.Tile) {
              var source = layer.getSource();
              if (source instanceof ol.source.TileImage) {
                source.setRenderReprojectionEdges(renderEdges);
              }
            }
          };

          /**
           * Handle change event.
           */
          baseLayerSelect.onchange = function() {
            var layer = layers[baseLayerSelect.value];
            if (layer) {
              layer.setOpacity(1);
              updateRenderEdgesOnLayer(layer);
              map.getLayers().setAt(0, layer);
            }
          };

          /**
           * Handle change event.
           */
          overlayLayerSelect.onchange = function() {
            var layer = layers[overlayLayerSelect.value];
            if (layer) {
              layer.setOpacity(0.7);
              updateRenderEdgesOnLayer(layer);
              map.getLayers().setAt(1, layer);
            }
          };

          /**
           * Handle change event.
           */
          renderEdgesCheckbox.onchange = function() {
            renderEdges = renderEdgesCheckbox.checked;
            map.getLayers().forEach(function(layer) {
              updateRenderEdgesOnLayer(layer);
            });
          };
        </script>
      </body>
    </html>