Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add zoom to point #614

Merged
merged 6 commits into from
May 18, 2023
Merged

Add zoom to point #614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
febd779
Added first draft zoom to point in cog_index.html
dchirst Mar 21, 2023
13454c8
Removed placeholder cog url
dchirst Mar 21, 2023
3e82d67
Added zoom to point for stac
dchirst Mar 21, 2023
9342181
Set zoom level of 10 for cog zoom
dchirst Mar 21, 2023
1719aab
Merge branch 'main' of https://github.com/developmentseed/titiler int…
vincentsarago May 18, 2023
441e567
update changelog
vincentsarago May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
45 changes: 45 additions & 0 deletions src/titiler/extensions/titiler/extensions/templates/cog_viewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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')
Expand Down
42 changes: 42 additions & 0 deletions src/titiler/extensions/titiler/extensions/templates/stac_viewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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')
Expand Down