Skip to content

Commit

Permalink
fix(management): allow loading custom pmtiles basemaps on react frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
spwoodcock committed Nov 30, 2024
1 parent afe61c6 commit 6334903
Show file tree
Hide file tree
Showing 7 changed files with 23 additions and 26 deletions.
6 changes: 3 additions & 3 deletions src/frontend/src/api/Project.ts
Original file line number Diff line number Diff line change
Expand Up @@ -167,11 +167,11 @@ export const GenerateProjectTiles = (url: string, projectId: string, data: objec
};
};

export const DownloadTile = (url: string) => {
export const DownloadBasemapFile = (url: string) => {
return async (dispatch) => {
dispatch(ProjectActions.SetDownloadTileLoading({ loading: true }));

const getDownloadTile = async (url: string) => {
const downloadBasemapFromAPI = async (url: string) => {
try {
// Open S3 url directly
window.open(url);
Expand All @@ -183,7 +183,7 @@ export const DownloadTile = (url: string) => {
dispatch(ProjectActions.SetDownloadTileLoading({ loading: false }));
}
};
await getDownloadTile(url);
await downloadBasemapFromAPI(url);
};
};

Expand Down
11 changes: 4 additions & 7 deletions src/frontend/src/components/GenerateBasemap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import CoreModules from '@/shared/CoreModules';
import AssetModules from '@/shared/AssetModules';
import { CommonActions } from '@/store/slices/CommonSlice';
import environment from '@/environment';
import { DownloadTile, GenerateProjectTiles, GetTilesList, ProjectById } from '@/api/Project';
import { DownloadBasemapFile, GenerateProjectTiles, GetTilesList, ProjectById } from '@/api/Project';
import { ProjectActions } from '@/store/slices/ProjectSlice';
import { projectInfoType } from '@/models/project/projectModel';
import { useAppSelector } from '@/types/reduxTypes';
Expand Down Expand Up @@ -31,9 +31,6 @@ const GenerateBasemap = ({ projectInfo }: { projectInfo: Partial<projectInfoType
padding: '16px 32px 24px 32px',
maxWidth: '1000px',
});
const downloadBasemap = (url) => {
dispatch(DownloadTile(url));
};

const getTilesList = () => {
dispatch(GetTilesList(`${import.meta.env.VITE_API_URL}/projects/${id}/tiles`));
Expand Down Expand Up @@ -306,16 +303,16 @@ const GenerateBasemap = ({ projectInfo }: { projectInfo: Partial<projectInfoType
<CoreModules.TableCell align="center">
<div className="fmtm-flex fmtm-gap-4 fmtm-float-right">
{list.status === 'SUCCESS' && list.format === 'pmtiles' && (
<AssetModules.BoltIcon
<AssetModules.VisibilityOutlinedIcon
sx={{ cursor: 'pointer', fontSize: '22px' }}
onClick={() => downloadBasemap(list.url, true)}
onClick={() => dispatch(ProjectActions.SetPmtileBasemapUrl(list.url))}
className="fmtm-text-red-500 hover:fmtm-text-red-700"
/>
)}
{list.status === 'SUCCESS' && (
<AssetModules.FileDownloadIcon
sx={{ cursor: 'pointer', fontSize: '22px' }}
onClick={() => downloadBasemap(list.url)}
onClick={() => dispatch(DownloadBasemapFile(list.url))}
className="fmtm-text-gray-500 hover:fmtm-text-blue-500"
/>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,9 @@ const LayerSwitchMenu = ({ map, pmTileLayerUrl = null }: { map: any; pmTileLayer
}, [projectInfo, pathname, map]);

useEffect(() => {
if (!pmTileLayerUrl || baseLayers.includes('PMTile')) return;
if (!pmTileLayerUrl || baseLayers.includes('Custom')) return;
setHasPMTile(true);
setActiveTileLayer('PMTile');
setActiveTileLayer('Custom');
}, [pmTileLayerUrl]);

const changeBaseLayer = (baseLayerTitle: string) => {
Expand All @@ -90,7 +90,7 @@ const LayerSwitchMenu = ({ map, pmTileLayerUrl = null }: { map: any; pmTileLayer
);
const baseLayersCollection: Record<string, any>[] = filteredBaseLayers?.values_?.layers.array_;
baseLayersCollection
?.filter((bLayer) => bLayer?.values_?.title !== 'PMTile')
?.filter((bLayer) => bLayer?.values_?.title !== 'Custom')
?.forEach((baseLayer) => {
if (baseLayer?.values_?.title === baseLayerTitle) {
baseLayer.setVisible(true);
Expand Down Expand Up @@ -158,10 +158,10 @@ const LayerSwitchMenu = ({ map, pmTileLayerUrl = null }: { map: any; pmTileLayer
<h6 className="fmtm-text-base fmtm-mb-1">Tiles</h6>
<div className="fmtm-flex fmtm-flex-wrap fmtm-justify-between fmtm-gap-y-2">
<LayerCard
key="PMTile"
layer="PMTile"
changeBaseLayerHandler={() => toggleTileLayer('PMTile')}
active={'PMTile' === activeTileLayer}
key="Custom"
layer="Custom"
changeBaseLayerHandler={() => toggleTileLayer('Custom')}
active={'Custom' === activeTileLayer}
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import LayerSwitcher from 'ol-layerswitcher';
import React, { useEffect, useState } from 'react';
import { XYZ } from 'ol/source';
import { useLocation } from 'react-router-dom';
import DataTile from 'ol/source/DataTile.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import WebGLTile from 'ol/layer/WebGLTile.js';
import { PMTilesRasterSource } from 'ol-pmtiles';
import windowDimention from '@/hooks/WindowDimension';
import { useAppSelector } from '@/types/reduxTypes';
Expand Down Expand Up @@ -136,8 +135,8 @@ const monochromeMidNight = (visible = false) =>

const pmTileLayer = (pmTileLayerUrl, visible = true) => {
return new WebGLTile({
title: `PMTile`,
type: 'raster pm tiles',
title: 'Custom',
type: 'custom',
visible: visible,
source: new PMTilesRasterSource({
url: pmTileLayerUrl,
Expand Down
4 changes: 4 additions & 0 deletions src/frontend/src/store/slices/ProjectSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const initialState: ProjectStateTypes = {
tilesList: [],
tilesListLoading: false,
downloadTilesLoading: false,
customBasemapUrl: null,
downloadDataExtractLoading: false,
taskModalStatus: false,
toggleGenerateMbTilesModal: false,
Expand Down Expand Up @@ -85,6 +86,9 @@ const ProjectSlice = createSlice({
SetDownloadTileLoading(state, action) {
state.downloadTilesLoading = action.payload;
},
SetPmtileBasemapUrl(state, action) {
state.customBasemapUrl = action.payload;
},
SetDownloadDataExtractLoading(state, action) {
state.downloadDataExtractLoading = action.payload;
},
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/store/types/IProject.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export type ProjectStateTypes = {
tilesList: tilesListTypes[];
tilesListLoading: boolean;
downloadTilesLoading: boolean;
customBasemapUrl: string | null;
downloadDataExtractLoading: boolean;
taskModalStatus: boolean;
toggleGenerateMbTilesModal: boolean;
Expand Down
6 changes: 1 addition & 5 deletions src/frontend/src/views/ProjectDetailsV2.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,7 @@ const ProjectDetailsV2 = () => {
const [dataExtractUrl, setDataExtractUrl] = useState<string | undefined>();
const [dataExtractExtent, setDataExtractExtent] = useState(null);
const [taskBoundariesLayer, setTaskBoundariesLayer] = useState<null | Record<string, any>>(null);
// FIXME currently we have no logic to retrieve the PMTiles for a project and pass
// FIXME as the customBasemapUrl.
// FIXME This should probably be triggered based on project customTmsUrl being set.
// FIXME If set, then we search for the first PMTiles archive available?
const [customBasemapUrl, setcustomBasemapUrl] = useState<File | string | null>();
const customBasemapUrl = useAppSelector((state) => state.project.customBasemapUrl);
const [viewState, setViewState] = useState('project_info');
const projectId: string = params.id;
const defaultTheme = useAppSelector((state) => state.theme.hotTheme);
Expand Down

0 comments on commit 6334903

Please sign in to comment.