From febd7795390421ea84f6c86b6ebeb7518f15beba Mon Sep 17 00:00:00 2001 From: Dan Hirst <93535587+dchirst@users.noreply.github.com> Date: Tue, 21 Mar 2023 15:42:09 +0000 Subject: [PATCH 1/5] Added first draft zoom to point in cog_index.html --- .../extensions/templates/cog_index.html | 50 ++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/src/titiler/extensions/titiler/extensions/templates/cog_index.html b/src/titiler/extensions/titiler/extensions/templates/cog_index.html index e34ea2af2..dea2f18cb 100644 --- a/src/titiler/extensions/titiler/extensions/templates/cog_index.html +++ b/src/titiler/extensions/titiler/extensions/templates/cog_index.html @@ -180,7 +180,7 @@
Enter COG url
- +
@@ -256,6 +256,24 @@ + +
+
Zoom to point
+
+
+ + +
+
+ + +
+
+ +
+
+
+
Histogram
@@ -454,6 +472,10 @@ } } +const addZoomToPoint = () => { + +} + const addHisto3Bands = () => { const r = document.getElementById('r-selector').selectedOptions[0].getAttribute("bname") const g = document.getElementById('g-selector').selectedOptions[0].getAttribute("bname") @@ -652,6 +674,32 @@ table.classList.remove('none') } +var centerMarker; + +document.getElementById('zoom-to-point-form').addEventListener('submit', (e) => { + e.preventDefault() + if (map) { + let lng = document.getElementById('zoomLng').value + let lat = document.getElementById('zoomLat').value + console.log(`${lng}, ${lat}`) + map.flyTo({ + center: [lng, lat], + essential: false // this animation is considered essential with respect to prefers-reduced-motion + }); + + if (!centerMarker) { + centerMarker = new mapboxgl.Marker() + .setLngLat([lng, lat]) + .addTo(map); + } else { + centerMarker.setLngLat([lng, lat]) + } + + } + + +}) + document.getElementById('btn-stats').addEventListener('click', () => { document.getElementById('fetch-stats-div').classList.add('none') document.getElementById('histogram').classList.remove('none') From 13454c83f2436c6e4b0058037ff25fc395e6a721 Mon Sep 17 00:00:00 2001 From: Dan Hirst <93535587+dchirst@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:18:38 +0000 Subject: [PATCH 2/5] Removed placeholder cog url --- .../extensions/titiler/extensions/templates/cog_index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/titiler/extensions/titiler/extensions/templates/cog_index.html b/src/titiler/extensions/titiler/extensions/templates/cog_index.html index dea2f18cb..0bc173ed3 100644 --- a/src/titiler/extensions/titiler/extensions/templates/cog_index.html +++ b/src/titiler/extensions/titiler/extensions/templates/cog_index.html @@ -180,7 +180,7 @@
Enter COG url
- +
From 3e82d6712f31e40c68f49083788d9e5fec20c189 Mon Sep 17 00:00:00 2001 From: Dan Hirst <93535587+dchirst@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:18:49 +0000 Subject: [PATCH 3/5] Added zoom to point for stac --- .../extensions/templates/stac_index.html | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/titiler/extensions/titiler/extensions/templates/stac_index.html b/src/titiler/extensions/titiler/extensions/templates/stac_index.html index 07b887ae0..fe65d66d0 100644 --- a/src/titiler/extensions/titiler/extensions/templates/stac_index.html +++ b/src/titiler/extensions/titiler/extensions/templates/stac_index.html @@ -282,6 +282,24 @@
+ +
+
Zoom to point
+
+
+ + +
+
+ + +
+
+ +
+
+
+
Histogram
@@ -659,6 +677,30 @@ .style('fill', '#69b3a2') } +let centerMarker; + +document.getElementById('zoom-to-point-form').addEventListener('submit', (e) => { + e.preventDefault() + if (map) { + let lng = document.getElementById('zoomLng').value + let lat = document.getElementById('zoomLat').value + console.log(`${lng}, ${lat}`) + map.flyTo({ + center: [lng, lat], + zoom: 10, + essential: false + }); + + if (!centerMarker) { + centerMarker = new mapboxgl.Marker() + .setLngLat([lng, lat]) + .addTo(map); + } else { + centerMarker.setLngLat([lng, lat]) + } + } +}) + document.getElementById('btn-stats').addEventListener('click', () => { document.getElementById('fetch-stats-div').classList.add('none') document.getElementById('histogram').classList.remove('none') From 93421815856c00b4b76dba1fb343aa68ab4a8d2f Mon Sep 17 00:00:00 2001 From: Dan Hirst <93535587+dchirst@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:19:03 +0000 Subject: [PATCH 4/5] Set zoom level of 10 for cog zoom --- .../titiler/extensions/templates/cog_index.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/titiler/extensions/titiler/extensions/templates/cog_index.html b/src/titiler/extensions/titiler/extensions/templates/cog_index.html index 0bc173ed3..d5e3c448f 100644 --- a/src/titiler/extensions/titiler/extensions/templates/cog_index.html +++ b/src/titiler/extensions/titiler/extensions/templates/cog_index.html @@ -674,17 +674,17 @@ table.classList.remove('none') } -var centerMarker; +let centerMarker; document.getElementById('zoom-to-point-form').addEventListener('submit', (e) => { e.preventDefault() if (map) { let lng = document.getElementById('zoomLng').value let lat = document.getElementById('zoomLat').value - console.log(`${lng}, ${lat}`) map.flyTo({ center: [lng, lat], - essential: false // this animation is considered essential with respect to prefers-reduced-motion + zoom: 10, + essential: false }); if (!centerMarker) { @@ -694,10 +694,7 @@ } else { centerMarker.setLngLat([lng, lat]) } - } - - }) document.getElementById('btn-stats').addEventListener('click', () => { From 441e567bf15c5ad35d19195f7be7451962c95bcd Mon Sep 17 00:00:00 2001 From: vincentsarago Date: Thu, 18 May 2023 16:12:38 +0200 Subject: [PATCH 5/5] update changelog --- CHANGES.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGES.md b/CHANGES.md index b2a481a82..05193332b 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -16,6 +16,7 @@ * make HTML `templates` configurable in the factories * rename `cog_index.html` to `cog_viewer.html` * rename `stac_index.html` to `stac_viewer.html` +* add `zoom to point` in `stac` and `cog` viewers (author @dchirst, https://github.com/developmentseed/titiler/pull/614) ## 0.11.6 (2023-04-14)