<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
Dear list,<br>
<br>
I am trying to display COGs in OpenLayers. This works well for
single images. However, I would like to add more more layers like a
basemap. But then the view is blocked to the extent of the COG. See
my example below.<br>
<br>
Is there a way to overlay a COG on a basemap and still be able to
zoom and pan wherever I want and not being restricted by the extent
of the COG?<br>
<br>
best regards,<br>
Jakob<br>
<br>
<div style="color: #000000;background-color: #ffffff;font-family: 'Droid Sans Mono', 'monospace', monospace;font-weight: normal;font-size: 13px;line-height: 18px;white-space: pre;"><div>
</div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> </span><span style="color: #001080;">GeoTIFF</span><span style="color: #000000;"> </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">'ol/source/GeoTIFF.js'</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> </span><span style="color: #001080;">Map</span><span style="color: #000000;"> </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">'ol/Map.js'</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> </span><span style="color: #001080;">Projection</span><span style="color: #000000;"> </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">'ol/proj/Projection.js'</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> </span><span style="color: #001080;">WebGLTileLayer</span><span style="color: #000000;"> </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">'ol/layer/WebGLTile.js'</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> </span><span style="color: #001080;">View</span><span style="color: #000000;"> </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">'ol/View.js'</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> {</span><span style="color: #001080;">getCenter</span><span style="color: #000000;">} </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">'ol/extent.js'</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> </span><span style="color: #001080;">TileLayer</span><span style="color: #000000;"> </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">'ol/layer/Tile'</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> </span><span style="color: #001080;">OSM</span><span style="color: #000000;"> </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">'ol/source/OSM'</span><span style="color: #000000;">;</span></div>
<div><span style="color: #0000ff;">const</span><span style="color: #000000;"> </span><span style="color: #0070c1;">projection</span><span style="color: #000000;"> = </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> </span><span style="color: #267f99;">Projection</span><span style="color: #000000;">({</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">code</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #a31515;">'EPSG:32721'</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">units</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #a31515;">'m'</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;">});</span></div>
<div><span style="color: #008000;">// metadata from <a class="moz-txt-link-freetext" href="https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/S2B_21HUB_20210915_0_L2A.json">https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/S2B_21HUB_20210915_0_L2A.json</a></span></div><div><span style="color: #0000ff;">const</span><span style="color: #000000;"> </span><span style="color: #0070c1;">sourceExtent</span><span style="color: #000000;"> = [</span><span style="color: #098658;">300000</span><span style="color: #000000;">, </span><span style="color: #098658;">6090260</span><span style="color: #000000;">, </span><span style="color: #098658;">409760</span><span style="color: #000000;">, </span><span style="color: #098658;">6200020</span><span style="color: #000000;">];</span></div>
<div><span style="color: #0000ff;">const</span><span style="color: #000000;"> </span><span style="color: #0070c1;">cogSource</span><span style="color: #000000;"> = </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> </span><span style="color: #267f99;">GeoTIFF</span><span style="color: #000000;">({</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">sources</span><span style="color: #001080;">:</span><span style="color: #000000;"> [</span></div><div><span style="color: #000000;"> {</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">url</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #a31515;">'<a class="moz-txt-link-freetext" href="https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/TCI.tif">https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/TCI.tif</a>'</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;"> },</span></div><div><span style="color: #000000;"> ],</span></div><div><span style="color: #000000;">});</span></div>
<div><span style="color: #0000ff;">const</span><span style="color: #000000;"> </span><span style="color: #0070c1;">cogLayer</span><span style="color: #000000;"> = </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> </span><span style="color: #267f99;">WebGLTileLayer</span><span style="color: #000000;">({</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">source</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #0070c1;">cogSource</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;">});</span></div>
<div><span style="color: #0000ff;">new</span><span style="color: #000000;"> </span><span style="color: #267f99;">Map</span><span style="color: #000000;">({</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">target</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #a31515;">'map'</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">layers</span><span style="color: #001080;">:</span><span style="color: #000000;"> [</span></div><div><span style="color: #000000;"> </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> </span><span style="color: #267f99;">TileLayer</span><span style="color: #000000;">({</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">source</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> </span><span style="color: #267f99;">OSM</span><span style="color: #000000;">()</span></div><div><span style="color: #000000;"> }),</span></div><div><span style="color: #000000;"> </span><span style="color: #0070c1;">cogLayer</span></div><div><span style="color: #000000;"> ],</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">view</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> </span><span style="color: #267f99;">View</span><span style="color: #000000;">({</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">projection</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #0070c1;">projection</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">center</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #795e26;">getCenter</span><span style="color: #000000;">(</span><span style="color: #0070c1;">sourceExtent</span><span style="color: #000000;">),</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">extent</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #0070c1;">sourceExtent</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;"> </span><span style="color: #001080;">zoom</span><span style="color: #001080;">:</span><span style="color: #000000;"> </span><span style="color: #098658;">1</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;"> }),</span></div><div><span style="color: #000000;">});</span></div></div>
<pre class="moz-signature" cols="72">--
Jakob Miksch
Geoinformatiker
meggsimum - Büro für Geoinformatik
Christian Mayer
Schillerstr. 2a | 67112 Mutterstadt
<a class="moz-txt-link-abbreviated" href="mailto:info@meggsimum.de">info@meggsimum.de</a> | <a class="moz-txt-link-abbreviated" href="http://www.meggsimum.de">www.meggsimum.de</a>
T 06231 - 6298988 |</pre>
</body>
</html>