Skip to content

Commit

Permalink
Merge pull request #121 from Canadian-Geospatial-Platform/dev-112
Browse files Browse the repository at this point in the history 
use cog tile service to display stac thumbnail in search page
  • Loading branch information
@johnweng001
johnweng001 authored Sep 19, 2023
2 parents fc341ec + 05a7479 commit fbe2662
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 15 deletions.
9 changes: 9 additions & 0 deletions src/common/envglobals.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export function envglobals(): globalValues {
SITE_NAME: 'localhost',
JSON_SERVER_URL: 'http://localhost:3000',
APP_GEOLOCATOR_URL: 'https://tkyuwlg5f7.execute-api.ca-central-1.amazonaws.com/live/',
COG_TILESERVICE_URL:'https://fyhjej9kzc.execute-api.ca-central-1.amazonaws.com/cog/tiles/WebMercatorQuad/{z}/{x}/{y}@1x',
COG_META_URL:'https://fyhjej9kzc.execute-api.ca-central-1.amazonaws.com/cog/metadata',
COG_TILEJSON_URL:'https://fyhjej9kzc.execute-api.ca-central-1.amazonaws.com/cog/tilejson.json'
};
case 'app-dev.geo.ca':
return {
Expand All @@ -35,6 +38,9 @@ export function envglobals(): globalValues {
APP_GEOCORE_URL: 'https://geocore-dev.metadata.geo.ca',
SITE_NAME: 'dev.geo.ca',
APP_GEOLOCATOR_URL: 'https://geolocator-dev.api.geo.ca/',
COG_TILESERVICE_URL:'https://fyhjej9kzc.execute-api.ca-central-1.amazonaws.com/cog/tiles/WebMercatorQuad/{z}/{x}/{y}@1x',
COG_META_URL:'https://fyhjej9kzc.execute-api.ca-central-1.amazonaws.com/cog/metadata',
COG_TILEJSON_URL:'https://fyhjej9kzc.execute-api.ca-central-1.amazonaws.com/cog/tilejson.json'
};
case 'app-stage.geo.ca':
return {
Expand Down Expand Up @@ -90,4 +96,7 @@ interface globalValues {
SITE_NAME: string;
JSON_SERVER_URL?: string;
APP_GEOLOCATOR_URL?: string;
COG_TILESERVICE_URL?:string;
COG_TILEJSON_URL?:string;
COG_META_URL?:string;
}
54 changes: 40 additions & 14 deletions src/components/search/geosearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,25 +176,51 @@ const GeoSearch = (
analyticPost(selectedParams);
// eslint-disable-next-line new-cap
new L.geoJSON(data).addTo(map);
if(result.options){
let imageUrls=JSON.parse(result.options.replaceAll('""','"')).filter(o=>o.url && o.url !==null && o.description && o.description.en && (o.description.en.indexOf("image/png")>0 || o.description.en.indexOf("image/jpeg")>0));
if(imageUrls.length>0 && result.keywords.toLowerCase().indexOf("stac")>=0){
const imageBounds = L.latLngBounds([[coordinates[0][2][1], coordinates[0][1][0]],[coordinates[0][0][1],coordinates[0][0][0]]]
);
const image=L.imageOverlay(imageUrls[0].url, imageBounds, {opacity: 1}).addTo(map);
setImage(image);
}
}

const center=new LatLng((coordinates[0][2][1] + coordinates[0][0][1]) / 2, (coordinates[0][1][0] + coordinates[0][0][0]) / 2);
const bounds = L.latLngBounds([[coordinates[0][2][1], coordinates[0][1][0]],[coordinates[0][0][1],coordinates[0][0][0]]]);
//console.log(bounds, center);
map.fitBounds(bounds, {padding: [50,50]});
//map.fitBounds(bounds);
//map.panTo(center);
setTimeout(()=>map.setView(center, map.getZoom()>5?map.getZoom()-1:map.getZoom()), 500);
//console.log(center, bounds);
if(result.options){
let imageUrls=JSON.parse(result.options.replaceAll('""','"')).filter(o=>o.url && o.url !==null && o.description && o.description.en && (o.description.en.indexOf("image/tiff")>0 || o.description.en.indexOf("image/png")>0 || o.description.en.indexOf("image/jpeg")>0));
if(imageUrls.length>0 && result.keywords.toLowerCase().indexOf("stac")>=0){
let imgUrls=imageUrls.filter(o=>o.description.en.indexOf("image/tiff")>0);
let url=imageUrls[0].url;
if(imgUrls.length>0){
url=imgUrls[0].url;
}
//const imageBounds = L.latLngBounds([[coordinates[0][2][1], coordinates[0][1][0]],[coordinates[0][0][1],coordinates[0][0][0]]]
//);
//const image=L.imageOverlay(url, imageBounds, {opacity: 1}).addTo(map);
//setImage(image);
axios.get(`${EnvGlobals.COG_TILEJSON_URL}`, {params: {url}}).then((res)=>{
console.log(res);
const centers=res.data.center;
axios.get(`${EnvGlobals.COG_META_URL}`, {params: {url}}).then((res2)=>{
console.log(res2);
const min=res2.data.statistics['1'].min;
const max=res2.data.statistics['1'].max;
const imageBounds = L.latLngBounds([[res2.data.bounds[3], res2.data.bounds[2]],[res2.data.bounds[1], res2.data.bounds[0]]]);
var layer=new L.TileLayer(`${EnvGlobals.COG_TILESERVICE_URL}?url=${url}&resampling_method=nearest&bidx=1&rescale=${min}%2C${max}`, {bounds:imageBounds});
map.addLayer(layer);
console.log('added', layer);
map.setView(new LatLng(centers[1], centers[0]), centers[2]);
});
});

}else{
setMapView(center, bounds);
}
} else{
setMapView(center, bounds);
}
}
};

const setMapView=(center, bounds)=>{
map.fitBounds(bounds);
setTimeout(()=>map.setView(center, map.getZoom()>5?map.getZoom()-1:map.getZoom()), 500);
}

const handleSelect = (event: string) => {
// const {selectResult} = this.props;
const cardOpen = selected === event ? !open : true;
Expand Down
2 changes: 2 additions & 0 deletions src/components/search/sorting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,11 @@ export default function Sorting(props: SortingProps): JSX.Element {
const onChange = (event) => {
onSorting(event.target.value);
};
/*
useEffect(() => {
console.log(props);
}, []);
*/
return (
<>
{/*
Expand Down
2 changes: 1 addition & 1 deletion webpack.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const config = {
overlay: true,
},
hot: true,
port: 8090,
port: 8080,
compress: true,
open: true,
},
Expand Down

0 comments on commit fbe2662

Please sign in to comment.