<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
Hi Marc,<br>
<br>
If I leave out extent, the COG is displayed on a wrong place.
(Should be Buonos Aires, but is placed in France). <br>
Increasing the extent shows an visual effect, but still causes the
OSM map to be placed on the wrong place. <br>
<br>
Meanwhile, I made it work inspired by
<a class="moz-txt-link-freetext" href="https://stackoverflow.com/a/70116989">https://stackoverflow.com/a/70116989</a> and
<a class="moz-txt-link-freetext" href="https://codesandbox.io/s/cog-forked-tmswq?file=/main.js">https://codesandbox.io/s/cog-forked-tmswq?file=/main.js</a><br>
<br>
It seems I needed to define the projection using Proj4js and not
with OL directly. <br>
<br>
One learning is that apparently COGs cannot be reprojected by OL.
(Please correct me if I am wrong)<br>
Initially I tried to create something similar as here:
<a class="moz-txt-link-freetext" href="https://cholmes.github.io/cog-map/">https://cholmes.github.io/cog-map/</a><br>
This app displays COGs in any CRS on WebMercator, BUT it actually
uses the backend service <a class="moz-txt-link-freetext" href="https://tiles.rdnt.io/">https://tiles.rdnt.io/</a> for proxying and
reprojection.<br>
<br>
Best,<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><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;">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;">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: #af00db;">import</span><span style="color: #000000;"> </span><span style="color: #001080;">proj4</span><span style="color: #000000;"> </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">"proj4"</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> { </span><span style="color: #001080;">register</span><span style="color: #000000;"> } </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">"ol/proj/proj4"</span><span style="color: #000000;">;</span></div><div><span style="color: #af00db;">import</span><span style="color: #000000;"> { </span><span style="color: #001080;">fromLonLat</span><span style="color: #000000;"> } </span><span style="color: #af00db;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">"ol/proj"</span><span style="color: #000000;">;</span></div>
<div><span style="color: #0000ff;">const</span><span style="color: #000000;"> </span><span style="color: #0070c1;">epsgCode</span><span style="color: #000000;"> = </span><span style="color: #a31515;">"EPSG:32721"</span><span style="color: #000000;">;</span></div>
<div><span style="color: #795e26;">proj4</span><span style="color: #000000;">.</span><span style="color: #795e26;">defs</span><span style="color: #000000;">(</span><span style="color: #0070c1;">epsgCode</span><span style="color: #000000;">,</span><span style="color: #a31515;">"+proj=utm +zone=21 +south +datum=WGS84 +units=m +no_defs"</span><span style="color: #000000;">);</span></div><div><span style="color: #795e26;">register</span><span style="color: #000000;">(</span><span style="color: #795e26;">proj4</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;">epsgCode</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;">fromLonLat</span><span style="color: #000000;">([-</span><span style="color: #098658;">58.205</span><span style="color: #000000;">,-</span><span style="color: #098658;">34.833</span><span style="color: #000000;">], </span><span style="color: #0070c1;">epsgCode</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;">10</span><span style="color: #000000;">,</span></div><div><span style="color: #000000;"> }),</span></div><div><span style="color: #000000;">});</span></div>
</div>
<br>
<br>
<div class="moz-cite-prefix">Am 27.05.22 um 10:35 schrieb Marc
Jansen:<br>
</div>
<blockquote type="cite"
cite="mid:a0c77a4e-f6eb-fdc8-b1f2-042c6b4fae89@terrestris.de">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 moz-txt-link-freetext" href="mailto:Users@lists.osgeo.org" moz-do-not-send="true">Users@lists.osgeo.org</a>
<a class="moz-txt-link-freetext" href="https://lists.osgeo.org/mailman/listinfo/openlayers-users" moz-do-not-send="true">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 moz-txt-link-freetext" href="mailto:jansen@terrestris.de" moz-do-not-send="true">jansen@terrestris.de</a>
Web: <a class="moz-txt-link-freetext" href="https://www.terrestris.de" moz-do-not-send="true">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/" moz-do-not-send="true">https://www.terrestris.de/datenschutzerklaerung/</a></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>
<br>
<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>