Robosats/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-07-17 16:23:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2061 from RoboSats/load-json-map-on-demand

Browse Source 
Loan JSON map on demand
This commit is contained in:
KoalaSat
2025-07-10 19:27:43 +00:00
committed by GitHub
parent 1b6638d04d f5d9d8855e
commit 1ba0711b6d
2 changed files with 18 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/Map/index.tsx
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 { MapContainer, GeoJSON, useMapEvents, TileLayer, Tooltip, Marker } from 'react-leaflet';
import { useTheme, LinearProgress } from '@mui/material'; import { useTheme, LinearProgress } from '@mui/material';
import { type GeoJsonObject } from 'geojson';
import { DivIcon, type LeafletMouseEvent } from 'leaflet'; import { DivIcon, type LeafletMouseEvent } from 'leaflet';
import { type PublicOrder } from '../../models'; import { type PublicOrder } from '../../models';
import OrderTooltip from '../Charts/helpers/OrderTooltip'; import OrderTooltip from '../Charts/helpers/OrderTooltip';
import MarkerClusterGroup from 'react-leaflet-markercluster'; import MarkerClusterGroup from 'react-leaflet-markercluster';
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext'; import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
import getWorldmapGeojson from '../../geo/Web';
import { apiClient } from '../../services/api';
interface MapPinProps { interface MapPinProps {
fillColor: string; fillColor: string;
@ -41,7 +44,18 @@ const Map = ({
interactive = false, interactive = false,
}: Props): React.JSX.Element => { }: Props): React.JSX.Element => {
const theme = useTheme(); 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 = ( const RobotMarker = (
key: string | number, key: string | number,
@ -112,8 +126,8 @@ const Map = ({
attributionControl={false} attributionControl={false}
style={{ height: '100%', width: '100%', backgroundColor: theme.palette.background.paper }} style={{ height: '100%', width: '100%', backgroundColor: theme.palette.background.paper }}
> >
{!useTiles && worldmap == null && <LinearProgress />} {!useTiles && !worldmap && <LinearProgress />}
{!useTiles && worldmap != null && ( {!useTiles && worldmap && (
<GeoJSON <GeoJSON
data={worldmap} data={worldmap}
style={{ style={{

18
frontend/src/contexts/AppContext.tsx
View File

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