From b6b1a7afaaeffc6d70654428e1db162afe75cf85 Mon Sep 17 00:00:00 2001 From: johnweng001 Date: Tue, 26 Sep 2023 11:57:02 -0400 Subject: [PATCH 1/7] Revert "remove thumbnail tile" This reverts commit d5ec8ab7e76560682352062782575f48be3fd0bf. --- src/components/search/geosearch.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/search/geosearch.tsx b/src/components/search/geosearch.tsx index 7464258f..a3c04aff 100644 --- a/src/components/search/geosearch.tsx +++ b/src/components/search/geosearch.tsx @@ -128,9 +128,6 @@ const GeoSearch = ( } map.eachLayer((layer: unknown) => { // console.log(layer); - if(layer.options && layer.options.zIndex && layer.options.zIndex === 9999){ - map.removeLayer(layer); - } const { feature } = layer; if ( !!feature && @@ -142,7 +139,7 @@ const GeoSearch = ( ) { map.removeLayer(layer); } - }); + }); if (result) { const coordinates=JSON.parse(result.coordinates); @@ -203,7 +200,7 @@ const GeoSearch = ( 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, zIndex:9999}); + 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]); From 0803acd9f0adc6b1ec253d151153bde66de4337f Mon Sep 17 00:00:00 2001 From: johnweng001 Date: Tue, 26 Sep 2023 11:57:47 -0400 Subject: [PATCH 2/7] Revert "added cog tile for stac in metadata page" This reverts commit f1e914dee63c8591a2852d376740ddcefec5ac9c. --- src/components/search/metadatapage.jsx | 65 +++----------------------- 1 file changed, 6 insertions(+), 59 deletions(-) diff --git a/src/components/search/metadatapage.jsx b/src/components/search/metadatapage.jsx index ccecc2ad..ef3fc201 100644 --- a/src/components/search/metadatapage.jsx +++ b/src/components/search/metadatapage.jsx @@ -17,8 +17,7 @@ import { useLocation, useHistory } from 'react-router'; // import {useParams} from 'react-router-dom'; import { useDispatch, useSelector } from "react-redux"; import { useTranslation } from 'react-i18next'; -import { MapContainer, TileLayer, GeoJSON, AttributionControl, ImageOverlay } from 'react-leaflet'; -import { LatLng, LatLngBounds} from 'leaflet'; +import { MapContainer, TileLayer, GeoJSON, AttributionControl, ImageOverlay } from 'react-leaflet'; import axios from "axios"; import BeatLoader from "react-spinners/BeatLoader"; import { @@ -59,10 +58,6 @@ const MetaDataPage = (props) => { const mapping = useSelector(state => state.mappingReducer.mapping); const dispatch = useDispatch(); - const [tileServiceUrl, setTileServiceUrl]=useState(null); - const [cogCenter, setCogCenter]=useState([]); - const [cogBounds, setCogBounds]=useState([]); - const [cogZoom, setCogZoom]=useState(0); const [similarRec, setSimilarRec] = useState(true); const [similarRecords, setSimilarRecords] = useState([]); const [showSimilarRecords, setShowSimilarRecords] = useState([]); @@ -162,44 +157,13 @@ const MetaDataPage = (props) => { res.title = language === 'en' ? res.title_en : res.title_fr; res.mappingtitle = { en: res.title_en, fr: res.title_fr }; setResult(res); - + setLoading1(false); //const sims = [{ uuid: 'a4d4b53b-143a-4d10-9ded-45abb164d239', title_en: 'Lost, Stolen and Found Sealed Sources and Radiation Devices', title_fr: 'Ensemble de données sur les sources scellées et les appareils à rayonnement perdus, volés ou trouvés' }, { uuid: '701e5144-5047-4a14-2c0b-03f97ffb7334', title_en: 'Referrals, Investigations and Founded Cases', title_fr: 'Orientations, enquêtes et affaires fondées - Services de délivrance de licences et protection pour les personnes prises en charge' }, { title_en: 'similar3' }, { title_en: 'similar4' }, { title_en: 'similar5' }, { title_en: 'similar6' }, { title_en: 'similar7' }, { title_en: 'similar8' }, { title_en: 'similar9' }, { title_en: 'similar10' }] if (res.similarity) { const sims = res.similarity; setSimilarRecords(sims); setShowSimilarRecords(sims.slice(0, 5)); } - if(res.options){ - const imageUrls=res.options.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)); - const hasImage=imageUrls.length>0 && res.keywords.toLowerCase().indexOf("stac")>=0; - let url; - if(hasImage){ - let imgUrls=imageUrls.filter(o=>o.description.en.indexOf("image/tiff")>0); - url=imageUrls[0].url; - if(imgUrls.length>0){ - url=imgUrls[0].url; - } - axios.get(`${EnvGlobals.COG_TILEJSON_URL}`, {params: {url}}).then((res)=>{ - console.log(res); - const centers=res.data.center; - setCogCenter(new LatLng(centers[1], centers[0])); - setCogZoom(centers[2]); - 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]]]); - setCogBounds(imageBounds); - setTileServiceUrl(`${EnvGlobals.COG_TILESERVICE_URL}?url=${url}&resampling_method=nearest&bidx=1&rescale=${min}%2C${max}`); - setLoading1(false); - }); - }); - }else{ - setLoading1(false); - } - }else{ - setLoading1(false); - } }) .catch(error => { // console.log(error); @@ -744,7 +708,7 @@ const MetaDataPage = (props) => {
- {!hasImage && { "properties": { "id": result.id, "tag": "geoViewGeoJSON" }, "geometry": { "type": "Polygon", "coordinates": coordinates } }} /> - - } - {hasImage && - - - - - - {/*hasImage && - */} - } + } +
From e0fa8730a01c725ed48e531a12ee16889f1761b3 Mon Sep 17 00:00:00 2001 From: johnweng001 Date: Tue, 26 Sep 2023 11:58:09 -0400 Subject: [PATCH 3/7] Revert "use cog tile service to display stac thumbnail in search page" This reverts commit 05a747989d742a1cfb6b46160983c116c808a27b. --- src/common/envglobals.ts | 9 ----- src/components/search/geosearch.tsx | 54 ++++++++--------------------- src/components/search/sorting.tsx | 2 -- webpack.dev.js | 2 +- 4 files changed, 15 insertions(+), 52 deletions(-) diff --git a/src/common/envglobals.ts b/src/common/envglobals.ts index 68ae9c61..e961e0ac 100644 --- a/src/common/envglobals.ts +++ b/src/common/envglobals.ts @@ -23,9 +23,6 @@ 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 { @@ -38,9 +35,6 @@ 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 { @@ -96,7 +90,4 @@ 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; } diff --git a/src/components/search/geosearch.tsx b/src/components/search/geosearch.tsx index a3c04aff..1437cb85 100644 --- a/src/components/search/geosearch.tsx +++ b/src/components/search/geosearch.tsx @@ -176,51 +176,25 @@ const GeoSearch = ( analyticPost(selectedParams); // eslint-disable-next-line new-cap new L.geoJSON(data).addTo(map); - - 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(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)); + 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){ - 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 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); } }; - 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; diff --git a/src/components/search/sorting.tsx b/src/components/search/sorting.tsx index 1c265011..07c0fb33 100644 --- a/src/components/search/sorting.tsx +++ b/src/components/search/sorting.tsx @@ -64,11 +64,9 @@ export default function Sorting(props: SortingProps): JSX.Element { const onChange = (event) => { onSorting(event.target.value); }; - /* useEffect(() => { console.log(props); }, []); - */ return ( <> {/* diff --git a/webpack.dev.js b/webpack.dev.js index 2b6bdf4e..d330fb51 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -21,7 +21,7 @@ const config = { overlay: true, }, hot: true, - port: 8080, + port: 8090, compress: true, open: true, }, From 76a880b2437866f96fb1fe4095ad34cf055ae4b8 Mon Sep 17 00:00:00 2001 From: johnweng001 Date: Tue, 26 Sep 2023 11:58:57 -0400 Subject: [PATCH 4/7] Revert "adjusted padding and zoom for bbox" This reverts commit 4dae18fecd91f3af7eff39fece3604d8b4e89bf5. --- src/components/search/geosearch.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/search/geosearch.tsx b/src/components/search/geosearch.tsx index 1437cb85..4030c6ec 100644 --- a/src/components/search/geosearch.tsx +++ b/src/components/search/geosearch.tsx @@ -188,10 +188,9 @@ const GeoSearch = ( 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.fitBounds(bounds); //map.panTo(center); - setTimeout(()=>map.setView(center, map.getZoom()>5?map.getZoom()-1:map.getZoom()), 500); + //map.setView(center, map.getZoom()); } }; From 63a9180a79ee723f6c11e9682fa933b77e6c8e31 Mon Sep 17 00:00:00 2001 From: johnweng001 Date: Tue, 26 Sep 2023 11:59:16 -0400 Subject: [PATCH 5/7] Revert "removed setview" This reverts commit 15258a5942e32e353201d6c60a1d8a6ab979c5a0. --- src/components/search/geosearch.tsx | 5 ++--- webpack.dev.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/search/geosearch.tsx b/src/components/search/geosearch.tsx index 4030c6ec..3baf1aab 100644 --- a/src/components/search/geosearch.tsx +++ b/src/components/search/geosearch.tsx @@ -187,10 +187,9 @@ const GeoSearch = ( } 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); + console.log(bounds, center); map.fitBounds(bounds); - //map.panTo(center); - //map.setView(center, map.getZoom()); + map.setView(center, map.getZoom()); } }; diff --git a/webpack.dev.js b/webpack.dev.js index d330fb51..2b6bdf4e 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -21,7 +21,7 @@ const config = { overlay: true, }, hot: true, - port: 8090, + port: 8080, compress: true, open: true, }, From 90e7d8cab38b5aa6865dec006ac584dac2783d19 Mon Sep 17 00:00:00 2001 From: johnweng001 Date: Tue, 26 Sep 2023 11:59:35 -0400 Subject: [PATCH 6/7] Revert "fixed search button not to shift" This reverts commit 54fc43bcb368289f71ddb41424a4d5fe83521084. --- src/components/search/geosearch.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/search/geosearch.scss b/src/components/search/geosearch.scss index 98859b87..3d5f940e 100644 --- a/src/components/search/geosearch.scss +++ b/src/components/search/geosearch.scss @@ -25,7 +25,7 @@ .searchButton { width: auto; - padding: 4px 15px; + padding: 4px 20px; margin-bottom: 2em; } From cadd783daacef8dfdd39924ea1a6e918ad4250eb Mon Sep 17 00:00:00 2001 From: johnweng001 Date: Tue, 26 Sep 2023 12:00:02 -0400 Subject: [PATCH 7/7] Revert "initial change for displaying stac thumbnail" This reverts commit 7bedcf150509a65acb4b4000be03575c7f3d9e58. --- src/components/search/geosearch.tsx | 27 ++++---------------------- src/components/search/metadatapage.jsx | 15 +++----------- 2 files changed, 7 insertions(+), 35 deletions(-) diff --git a/src/components/search/geosearch.tsx b/src/components/search/geosearch.tsx index 3baf1aab..68897f9c 100644 --- a/src/components/search/geosearch.tsx +++ b/src/components/search/geosearch.tsx @@ -99,7 +99,6 @@ const GeoSearch = ( const storestacfilters = useSelector((state) => (state.mappingReducer.stacfilter ? state.mappingReducer.stacfilter : [])); const storespatempfilters = useSelector((state) => state.mappingReducer.spatempfilter); const dispatch = useDispatch(); - const [image, setImage]=useState(null); const [zoom, setZoom] = useState(null); const [center, setCenter] = useState(null); const [boundbox, setBoundbox] = useState(useSelector((state) => state.mappingReducer.boundbox)); @@ -122,10 +121,6 @@ const GeoSearch = ( const dispatch = useDispatch(); */ const selectResult = (result: SearchResult | undefined) => { - if(image!==null){ - map.removeLayer(image); - setImage(null); - } map.eachLayer((layer: unknown) => { // console.log(layer); const { feature } = layer; @@ -142,13 +137,12 @@ const GeoSearch = ( }); if (result) { - const coordinates=JSON.parse(result.coordinates); const data = { type: 'Feature', properties: { id: result.id, tag: 'geoViewGeoJSON' }, geometry: { type: 'Polygon', - coordinates, + coordinates: JSON.parse(result.coordinates), }, }; const selectedParams: AnalyticParams = { @@ -176,20 +170,6 @@ 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); - map.setView(center, map.getZoom()); } }; @@ -197,7 +177,8 @@ const GeoSearch = ( // const {selectResult} = this.props; const cardOpen = selected === event ? !open : true; const result = - Array.isArray(results) && results.length > 0 && cardOpen ? results.find((r: SearchResult) => r.id === event) : undefined; + Array.isArray(results) && results.length > 0 && cardOpen ? results.find((r: SearchResult) => r.id === event) : undefined; + setSelected(event); setOpen(cardOpen); selectResult(result); @@ -1470,7 +1451,7 @@ interface SearchResult { description: string; published: string; keywords: string; - options: string; + options: []; contact: []; created: string; spatialRepresentation: string; diff --git a/src/components/search/metadatapage.jsx b/src/components/search/metadatapage.jsx index ef3fc201..f7f34b31 100644 --- a/src/components/search/metadatapage.jsx +++ b/src/components/search/metadatapage.jsx @@ -17,7 +17,7 @@ import { useLocation, useHistory } from 'react-router'; // import {useParams} from 'react-router-dom'; import { useDispatch, useSelector } from "react-redux"; import { useTranslation } from 'react-i18next'; -import { MapContainer, TileLayer, GeoJSON, AttributionControl, ImageOverlay } from 'react-leaflet'; +import { MapContainer, TileLayer, GeoJSON, AttributionControl } from 'react-leaflet'; import axios from "axios"; import BeatLoader from "react-spinners/BeatLoader"; import { @@ -381,8 +381,7 @@ const MetaDataPage = (props) => { const desc = option.description[language].split(";"); return { name: option.name[language], type: desc[0], format: desc[1], language: t(`page.${desc[2].toLowerCase().replace(',', '')}`), url: option.url }; }); - const imageUrls=formattedOption.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)); - const hasImage=imageUrls.length>0 && result.keywords.toLowerCase().indexOf("stac")>=0; + const tcRange = ['N/A', 'N/A']; tcRange[0] = result.temporalExtent.begin; tcRange[1] = result.temporalExtent.end; @@ -405,8 +404,7 @@ const MetaDataPage = (props) => { const mapButtonClass = activeMap ? 'btn btn-search' : 'btn btn-search disabled'; const contact = formattedContact; const coordinates = JSON.parse(result.coordinates); - const bounds = L.latLngBounds([[coordinates[0][2][1], coordinates[0][1][0]],[coordinates[0][0][1],coordinates[0][0][0]]] - ); + const langInd = (language === 'en') ? 0 : 1; const status = result.status.split(';')[langInd]; const maintenance = result.maintenance.split(';')[langInd]; @@ -722,13 +720,6 @@ const MetaDataPage = (props) => { "properties": { "id": result.id, "tag": "geoViewGeoJSON" }, "geometry": { "type": "Polygon", "coordinates": coordinates } }} /> - {hasImage && - }