Skip to content
Snippets Groups Projects
Commit fcfcda19 authored by Moritz Stückler's avatar Moritz Stückler :cowboy:
Browse files

Merge branch 'feat/change-map-theme' into 'main'

feat: change map theme

Closes #3

See merge request !3
parents ab62da19 97c0d975
No related branches found
No related tags found
1 merge request!3feat: change map theme
VITE_PUBLIC_MAPBOX_TOKEN=abc123
# Map style is optional and not necessary if you want to keep the default "light" theme.
VITE_MAP_STYLE="mapbox://styles/mapbox/dark-v11"
......@@ -16,9 +16,10 @@ interface Props {
mapboxToken: string;
className?: string;
baseUrl?: string;
mapStyle?: string;
}
const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl }) => {
const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl, mapStyle }) => {
const selectedPoi = useStore((state) => state.selectedPoi);
const setPoiData = useStore((state) => state.setPoiData);
......@@ -37,7 +38,7 @@ const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl })
}`}
>
<Route path="/">
<Map mapboxToken={mapboxToken} />
<Map mapboxToken={mapboxToken} mapStyle={mapStyle} />
</Route>
<Route path="/poi/:poiId">{({ match }) => <PoiLoader poiId={match?.params?.poiId as string} />}</Route>
<Route exact path="/">
......
......@@ -9,6 +9,7 @@ import 'mapbox-gl/dist/mapbox-gl.css';
interface Props {
mapboxToken: string;
mapStyle?: string;
}
interface MarkerProps {
......@@ -26,7 +27,7 @@ const MarkerSvg: React.FC<MarkerProps> = ({ className }) => {
);
};
const Map: React.FC<Props> = ({ mapboxToken }) => {
const Map: React.FC<Props> = ({ mapboxToken, mapStyle }) => {
const history = useHistory();
const data = useStore((state) => state.poiData);
const selectedPoi = useStore((state) => state.selectedPoi);
......@@ -56,7 +57,7 @@ const Map: React.FC<Props> = ({ mapboxToken }) => {
zoom: 10,
}}
style={{ width: '100%', height: '100%' }}
mapStyle="mapbox://styles/mapbox/streets-v11"
mapStyle={mapStyle ?? 'mapbox://styles/mapbox/light-v11'}
mapboxAccessToken={mapboxToken}
maxPitch={0}
id="fcmap"
......
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_PUBLIC_MAPBOX_TOKEN: string
readonly VITE_PUBLIC_MAPBOX_TOKEN: string;
readonly VITE_MAP_STYLE: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
\ No newline at end of file
readonly env: ImportMetaEnv;
}
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment