Loan JSON map on demand

This commit is contained in:
koalasat
2025-07-10 21:26:31 +02:00
parent 1b6638d04d
commit f5d9d8855e
2 changed files with 18 additions and 22 deletions

View File

@ -1,11 +1,14 @@
import React, { useContext } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { MapContainer, GeoJSON, useMapEvents, TileLayer, Tooltip, Marker } from 'react-leaflet';
import { useTheme, LinearProgress } from '@mui/material';
import { type GeoJsonObject } from 'geojson';
import { DivIcon, type LeafletMouseEvent } from 'leaflet';
import { type PublicOrder } from '../../models';
import OrderTooltip from '../Charts/helpers/OrderTooltip';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
import getWorldmapGeojson from '../../geo/Web';
import { apiClient } from '../../services/api';
interface MapPinProps {
fillColor: string;
@ -41,7 +44,18 @@ const Map = ({
interactive = false,
}: Props): React.JSX.Element => {
const theme = useTheme();
const { worldmap } = useContext<UseAppStoreType>(AppContext);
const { hostUrl } = useContext<UseAppStoreType>(AppContext);
const [worldmap, setWorldmap] = useState<GeoJsonObject>();
useEffect(() => {
getWorldmapGeojson(apiClient, hostUrl)
.then((data) => {
setWorldmap(data);
})
.catch((error) => {
console.error('Error:', error);
});
}, []);
const RobotMarker = (
key: string | number,
@ -112,8 +126,8 @@ const Map = ({
attributionControl={false}
style={{ height: '100%', width: '100%', backgroundColor: theme.palette.background.paper }}
>
{!useTiles && worldmap == null && <LinearProgress />}
{!useTiles && worldmap != null && (
{!useTiles && !worldmap && <LinearProgress />}
{!useTiles && worldmap && (
<GeoJSON
data={worldmap}
style={{

View File

@ -9,7 +9,6 @@ import React, {
import { type Page } from '../basic/NavBar';
import { type OpenDialogs } from '../basic/MainDialogs';
import { ThemeProvider } from '@mui/material';
import { type GeoJsonObject } from 'geojson';
import { Settings, type Version, type Origin, type Favorites } from '../models';
@ -18,8 +17,6 @@ import { getClientVersion, getHost } from '../utils';
import defaultFederation from '../../static/federation.json';
import { createTheme, type Theme } from '@mui/material/styles';
import i18n from '../i18n/Web';
import getWorldmapGeojson from '../geo/Web';
import { apiClient } from '../services/api';
import SettingsSelfhosted from '../models/Settings.default.basic.selfhosted';
import SettingsSelfhostedPro from '../models/Settings.default.pro.selfhosted';
import SettingsPro from '../models/Settings.default.pro';
@ -156,7 +153,6 @@ export interface UseAppStoreType {
hostUrl: string;
fav: Favorites;
setFav: Dispatch<SetStateAction<Favorites>>;
worldmap?: GeoJsonObject;
client: 'mobile' | 'web' | 'desktop' | string;
view: 'basic' | 'pro' | string;
}
@ -219,7 +215,6 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): React
const [acknowledgedWarning, setAcknowledgedWarning] = useState<boolean>(
initialAppContext.acknowledgedWarning,
);
const [worldmap, setWorldmap] = useState<GeoJsonObject>();
useEffect(() => {
setTheme(makeTheme(settings));
@ -251,18 +246,6 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): React
};
}, []);
useEffect(() => {
if (['offers', 'create'].includes(page) && !worldmap) {
getWorldmapGeojson(apiClient, hostUrl)
.then((data) => {
setWorldmap(data);
})
.catch((error) => {
console.error('Error:', error);
});
}
}, [page]);
useEffect(() => {
setWindowSize(getWindowSize(theme.typography.fontSize));
}, [theme.typography.fontSize]);
@ -293,7 +276,6 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): React
origin,
fav,
setFav,
worldmap,
client,
view,
}}