Add zoom to point (#614)

* Added first draft zoom to point in cog_index.html * Removed placeholder cog url * Added zoom to point for stac * Set zoom level of 10 for cog zoom * update changelog --------- Co-authored-by: vincentsarago <vincent.sarago@gmail.com>
developmentseed · May 18, 2023 · 90f44e1 · 90f44e1
1 parent f3809c5
commit 90f44e1
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 0 deletions.
diff --git 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)
 

diff --git a/src/titiler/extensions/titiler/extensions/templates/cog_viewer.html b/src/titiler/extensions/titiler/extensions/templates/cog_viewer.html
@@ -256,6 +256,24 @@
           <button id="btn-rescale" class='btn bts--xs btn--stroke bg-darken25-on-hover inline-block txt-s color-black mt6'>Apply</button>
         </div>
 
+        <!-- Zoom to point -->
+        <div class="px6 py6 w-full">
+          <div class='txt-h5 color-black'><svg class='icon icon--l inline-block'><use xlink:href='#icon-marker'/></svg> Zoom to point</div>
+          <form class='grid grid--gut12 mx12 mt12' id="zoom-to-point-form">
+            <div class="col">
+              <label for="zoomLng" class='row'>Longitude:</label>
+              <input name="zoomLng" id="zoomLng" type="number" class="input input--s row" min="-180" max="180" required/>
+            </div>
+            <div class="col">
+              <label for="zoomLat" class='row'>Latitude:</label>
+              <input name="zoomLat" id="zoomLat" type="number" class="input input--s row" min="-90" max="90" required/>
+            </div>
+            <div id='zoom-to-point-div' class='w-full align-center'>
+              <button type="submit" class='btn bts--xs btn--stroke bg-darken25-on-hover inline-block txt-s color-black mx12 my12'>Zoom to point</button>
+            </div>
+          </form>
+        </div>
+
         <!-- Histogram -->
         <div class='px6 py6 w-full'>
           <div class='txt-h5 color-black'><svg class='icon icon--l inline-block'><use xlink:href='#icon-graph'/></svg> Histogram</div>
@@ -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,29 @@
     table.classList.remove('none')
 }
 
+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
+    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')

diff --git a/src/titiler/extensions/titiler/extensions/templates/stac_viewer.html b/src/titiler/extensions/titiler/extensions/templates/stac_viewer.html
@@ -282,6 +282,24 @@
           <button id="updateColor" class='btn bts--xs btn--stroke bg-darken25-on-hover txt-s color-black mt6'>Apply</button>
         </div>
 
+        <!-- Zoom to point -->
+        <div class="px6 py6 w-full">
+          <div class='txt-h5 color-black'><svg class='icon icon--l inline-block'><use xlink:href='#icon-marker'/></svg> Zoom to point</div>
+          <form class='grid grid--gut12 mx12 mt12' id="zoom-to-point-form">
+            <div class="col">
+              <label for="zoomLng" class='row'>Longitude:</label>
+              <input name="zoomLng" id="zoomLng" type="number" class="input input--s row" min="-180" max="180" required/>
+            </div>
+            <div class="col">
+              <label for="zoomLat" class='row'>Latitude:</label>
+              <input name="zoomLat" id="zoomLat" type="number" class="input input--s row" min="-90" max="90" required/>
+            </div>
+            <div id='zoom-to-point-div' class='w-full align-center'>
+              <button type="submit" class='btn bts--xs btn--stroke bg-darken25-on-hover inline-block txt-s color-black mx12 my12'>Zoom to point</button>
+            </div>
+          </form>
+        </div>
+
         <!-- Histogram -->
         <div class='px6 py6 w-full'>
           <div class='txt-h5 color-black'><svg class='icon icon--l inline-block'><use xlink:href='#icon-graph'/></svg> Histogram</div>
@@ -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')