From c2fd2ba7d302ebf5d87f247c482ef5f7ace9c6b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20St=C3=BCckler?= <moritz@bitbetter.de>
Date: Sat, 4 Mar 2023 14:37:24 +0100
Subject: [PATCH] fix: initial view
---
.eslintrc.js | 1 +
src/components/FabCityMap.tsx | 6 +++++-
src/components/Map/Map.tsx | 12 ++++++++----
src/components/PoiLoader.tsx | 3 ++-
src/index.tsx | 20 ++++++++++----------
tailwind.config.js | 1 +
6 files changed, 27 insertions(+), 16 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index b784a6e..2488d98 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,6 +2,7 @@ module.exports = {
env: {
browser: true,
es2021: true,
+ node: true
},
extends: [
'eslint:recommended',
diff --git a/src/components/FabCityMap.tsx b/src/components/FabCityMap.tsx
index 64baa19..3274d88 100644
--- a/src/components/FabCityMap.tsx
+++ b/src/components/FabCityMap.tsx
@@ -38,9 +38,13 @@ const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl, ma
}`}
>
<Route path="/">
+ {/* This route will always match, so the Map is always visible */}
<Map mapboxToken={mapboxToken} mapStyle={mapStyle} />
</Route>
- <Route path="/poi/:poiId">{({ match }) => <PoiLoader poiId={match?.params?.poiId as string} />}</Route>
+ <Route path="/poi/:poiId">
+ {/* This route loads individual POIs */}
+ {({ match }) => <PoiLoader poiId={match?.params?.poiId as string} />}
+ </Route>
<Route exact path="/">
<PoiLoader poiId={null} />
</Route>
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 6506653..fd209f2 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -43,11 +43,15 @@ const Map: React.FC<Props> = ({ mapboxToken, mapStyle }) => {
}, [JSON.stringify(data)]);
useEffect(() => {
- if (selectedPoi) fcmap?.easeTo({ center: [selectedPoi.lng, selectedPoi.lat], zoom: 14, duration: 1500 });
- else {
- bounds && fcmap?.fitBounds(bounds, { padding: 50, maxZoom: 16 });
+ if (fcmap) {
+ if (selectedPoi) {
+ fcmap?.easeTo({ center: [selectedPoi.lng, selectedPoi.lat], zoom: 14, duration: 1500 });
+ } else if (!selectedPoi && bounds) {
+ fcmap?.fitBounds(bounds, { padding: 50, maxZoom: 16 });
+ }
}
- }, [selectedPoi]);
+ }, [selectedPoi, bounds, fcmap]);
+
return (
<ReactMapGl
diff --git a/src/components/PoiLoader.tsx b/src/components/PoiLoader.tsx
index 47abad9..b0e888e 100644
--- a/src/components/PoiLoader.tsx
+++ b/src/components/PoiLoader.tsx
@@ -12,11 +12,12 @@ const PoiLoader: React.FC<Props> = ({ poiId }) => {
useEffect(() => {
if (data && poiId !== undefined) {
const poi = poiId ? data.find((poi) => String(poi.id) === poiId) : null;
+
if (poi !== undefined) {
setSelectedPoi(poi);
}
}
- }, [poiId]);
+ }, [poiId, data]);
return <></>;
};
diff --git a/src/index.tsx b/src/index.tsx
index cfdb1a8..a356d1e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -12,7 +12,7 @@ const exampleData = [
address: 'Musterstraße. 123, 20457 Hamburg',
lat: 53.541955879117,
lng: 10.010503310879,
- image: 'https://map-api.fabcity.hamburg/uploads/images/dKAtCcP6DDY83nFkS1SUXBzXLd0e9dhCnxFh29jS.jpg',
+ image: 'https://picsum.photos/id/1033/800/600',
category: 'Fab Lab / Offene Werkstatt',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
@@ -33,7 +33,7 @@ const exampleData = [
address: 'Bürgerhaus Wilhelmsburg, Mengestraße 20, 21107 Hamburg',
lat: 53.500543446403,
lng: 9.9962177938385,
- image: 'https://map-api.fabcity.hamburg/uploads/images/FkXmcxFHqgoUCPpxktz8rAcq8p6O9c5YQRnnG2W8.jpg',
+ image: 'https://picsum.photos/id/1013/800/600',
category: 'Fab Lab / Offene Werkstatt',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
@@ -52,7 +52,7 @@ const exampleData = [
address: 'Bachstraße 98, 22083 Hamburg',
lat: 53.579789405468,
lng: 10.02200822904,
- image: 'https://map-api.fabcity.hamburg/uploads/images/AE1Ig73qHanJFKu9ZTRxsw70yMHTgGRflURXfKQO.jpg',
+ image: 'https://picsum.photos/id/15/800/600',
category: 'Fab Lab / Offene Werkstatt',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
@@ -73,7 +73,7 @@ const exampleData = [
address: 'Eschelsweg 4, 22767 Hamburg',
lat: 53.549864003284,
lng: 9.9464665686577,
- image: 'https://map-api.fabcity.hamburg/uploads/images/ipM4GoMnXzP1Pc63nL6H1e7sEIZY83f7ZK8RMhuV.jpg',
+ image: 'https://picsum.photos/id/790/800/600',
category: 'Fab Lab / Offene Werkstatt',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
@@ -95,7 +95,7 @@ const exampleData = [
address: 'Stockmeyerstr. 43, Halle 4K, Eingang von der Wasserseite, 20457 Hamburg',
lat: 53.541994386894,
lng: 10.010334958155,
- image: 'https://map-api.fabcity.hamburg/uploads/images/sFtxfseZAC1PNur5zfQeZriJ6OExkAtqqpDxP9Mv.jpg',
+ image: 'https://picsum.photos/id/862/800/600',
category: 'Fab Lab / Offene Werkstatt',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
@@ -113,7 +113,7 @@ const exampleData = [
address: 'Lange Reihe 89, 20099 Hamburg',
lat: 53.558563745016,
lng: 10.012549674438,
- image: 'https://map-api.fabcity.hamburg/uploads/images/FG9f7HYGkYwaX8NDemer11GP7u8llIsvtKHeUcKN.jpg',
+ image: 'https://picsum.photos/id/123/800/600',
category: 'Handwerksbetrieb',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
@@ -131,7 +131,7 @@ const exampleData = [
address: 'Hongkongstraße 5, 20457 Hamburg',
lat: 53.542208035899,
lng: 10.001291735134,
- image: 'https://map-api.fabcity.hamburg/uploads/images/kq1N6EnvZXNSNlXvvO3YgcoAvUf4A6DUHXvFvFyI.jpg',
+ image: 'https://picsum.photos/id/19/800/600',
category: 'Bildungs- und Veranstaltungsort',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [{ id: '8', displayName: 'Workshops', color: 'hsl(229,60%,80%)' }],
@@ -145,7 +145,7 @@ const exampleData = [
address: 'Karlshöhe 60, 22175 Hamburg',
lat: 53.63006349047,
lng: 10.110588334093,
- image: 'https://map-api.fabcity.hamburg/uploads/images/IQdyJ1knlSxXDT1CrzT7uZQmqgmZgfTxRhsatN5r.jpg',
+ image: 'https://picsum.photos/id/26/800/600',
category: 'Bildungs- und Veranstaltungsort',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
@@ -162,7 +162,7 @@ const exampleData = [
address: 'Holstenhofweg 85, 22043 Hamburg',
lat: 53.567516952488,
lng: 10.113037061205,
- image: 'https://map-api.fabcity.hamburg/uploads/images/SKFzkd6OYwomC640B9ZxdRDtyRAUArQLwVN1xjuo.jpg',
+ image: 'https://picsum.photos/id/86/800/600',
category: 'Fab Lab / Offene Werkstatt',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
@@ -184,7 +184,7 @@ const exampleData = [
address: 'Stockmeyerstr. 43, Halle 4K, 20457 Hamburg',
lat: 53.541914624826,
lng: 10.010271399351,
- image: 'https://map-api.fabcity.hamburg/uploads/images/boFp8pUb7GjZZvp4JSzOY72oKwnUxklgw0BoowTk.jpg',
+ image: 'https://picsum.photos/id/190/800/600',
category: 'Digital-handwerkliche Produktionsstätte',
relationStatus: 'Vereinsmitglied Fab City Hamburg e.V.',
tags: [
diff --git a/tailwind.config.js b/tailwind.config.js
index dde25a5..36b2ab2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
content: ['./src/**/*.{html,js,jsx,tsx,md,mdx,astro}'],
prefix: 'fcmap-',
plugins: [
+ /* eslint-disable */
require('@tailwindcss/forms')({
strategy: 'class',
}),
--
GitLab