Rendering a COG over another layer in a different projection.
Example of using fromEPSGCode()
to enable a COG to be rendered over another layer in a different projection.
import proj4 from 'proj4';
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import {
epsgLookupMapTiler,
fromEPSGCode,
register,
setEPSGLookup,
} from 'ol/proj/proj4.js';
import GeoTIFF from 'ol/source/GeoTIFF.js';
import XYZ from 'ol/source/XYZ.js';
const key = 'Get your own API key at https://www.maptiler.com/cloud/';
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>';
register(proj4);
setEPSGLookup(epsgLookupMapTiler(key));
const cogSource = new GeoTIFF({
sources: [
{
url: 'https://mikenunn.net/data/MiniScale_(std_with_grid)_R23.tif',
nodata: 0,
},
],
});
cogSource.setAttributions(
'Contains OS data © Crown Copyright and database right ' +
new Date().getFullYear(),
);
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
attributions: attributions,
url:
'https://api.maptiler.com/maps/satellite/{z}/{x}/{y}.jpg?key=' + key,
tileSize: 512,
maxZoom: 20,
crossOrigin: '',
}),
style: {exposure: 0.2},
}),
new TileLayer({
source: cogSource,
opacity: 0.7,
style: {gamma: 0.7},
}),
],
view: cogSource
.getView()
.then((viewConfig) =>
fromEPSGCode(viewConfig.projection.getCode()).then(() => viewConfig),
),
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COG with Projection Lookup</title>
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="module" src="main.js"></script>
</body>
</html>
{
"name": "cog-projection",
"dependencies": {
"ol": "10.4.0",
"proj4": "2.15.0"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}