<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>Hi Jakob,</p>
<p>what happens if you change the extent of the view (leave it out,
configure it to sth. bigger that the extent of the source)?</p>
<p>Just a wild guess.</p>
<p>Best</p>
<p>Marc</p>
<p><br>
</p>
<div class="moz-cite-prefix">Am 27.05.22 um 10:18 schrieb Jakob
Miksch:<br>
</div>
<blockquote type="cite"
cite="mid:9797393e-ad6c-11ed-dbc9-b749cf0f8b0f@meggsimum.de">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
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" moz-do-not-send="true">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" moz-do-not-send="true">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 moz-txt-link-freetext" href="mailto:info@meggsimum.de" moz-do-not-send="true">info@meggsimum.de</a> | <a class="moz-txt-link-abbreviated" href="http://www.meggsimum.de" moz-do-not-send="true">www.meggsimum.de</a>
T 06231 - 6298988 |</pre>
<br>
<fieldset class="moz-mime-attachment-header"></fieldset>
<pre class="moz-quote-pre" wrap="">_______________________________________________
Users mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Users@lists.osgeo.org">Users@lists.osgeo.org</a>
<a class="moz-txt-link-freetext" href="https://lists.osgeo.org/mailman/listinfo/openlayers-users">https://lists.osgeo.org/mailman/listinfo/openlayers-users</a>
</pre>
</blockquote>
<pre class="moz-signature" cols="72">--
Marc Jansen
— Geschäftsführer —
terrestris GmbH & Co. KG
Kölnstraße 99
53111 Bonn
Tel: +49 (0)228 / 96 28 99 -53
Fax: +49 (0)228 / 96 28 99 -57
Email: <a class="moz-txt-link-abbreviated" href="mailto:jansen@terrestris.de">jansen@terrestris.de</a>
Web: <a class="moz-txt-link-freetext" href="https://www.terrestris.de">https://www.terrestris.de</a>
Amtsgericht Bonn, HRA 6835
Komplementärin: terrestris Verwaltungsgesellschaft mbH
vertreten durch: Torsten Brassat, Marc Jansen
Informationen über Ihre gespeicherten Daten finden Sie auf unserer Homepage unter folgendem Link: <a class="moz-txt-link-freetext" href="https://www.terrestris.de/datenschutzerklaerung/">https://www.terrestris.de/datenschutzerklaerung/</a></pre>
</body>
</html>