.gitlab-ci.yml

@@ -28,4 +28,4 @@ lftp deploy:
   only:
     - main
   script:
-    - lftp -e "set net:timeout 5; set net:max-retries 3; set net:reconnect-interval-base 5; open sftp://$SFTP_HOST; user $SFTP_USER $SFTP_PASSWORD; mirror -X .* -X .*/ --reverse --verbose build/ live/; bye"
+    - lftp -e "set net:timeout 5; set net:max-retries 3; set net:reconnect-interval-base 5; open sftp://$SFTP_HOST; user $SFTP_USER $SFTP_PASSWORD; mirror -X .* -X .*/ --reverse --verbose build/ /httpdocs/map; bye"
\ No newline at end of file

snowpack.config.js

@@ -5,11 +5,10 @@ module.exports = {
     src: { url: '/dist' },
   },
   plugins: [
-    '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-dotenv',
+    '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-typescript',
     '@snowpack/plugin-postcss',
-    '@snowpack/plugin-dotenv',
   ],
   routes: [
     /* Enable an SPA Fallback in development: */

src/components/Form/TagInput.tsx

@@ -80,7 +80,7 @@ const TagInput: React.FC<Props> = ({ label, tags, options, onTagsChange, require
         <div className="flex flex-wrap items-center flex-1 p-2">
           {tags.map((selectedTag) => (
             <Tag
-              key={`selected${selectedTag.id}`}
+              key={`selected${selectedTag.color}`}
               onClickDelete={() => handleClickDeleteTag(selectedTag)}
               color={selectedTag.color}
             >

src/components/Map/Map.tsx

 import type { LatLngTuple } from 'leaflet';
 import { divIcon, DivIconOptions } from 'leaflet';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { MapContainer, Marker, TileLayer } from 'react-leaflet';
 import { useStore } from '../../hooks';
 import MapViewController from './MapViewController';
@@ -30,22 +30,27 @@ export const Map: React.FC<Props> = ({ createMode }) => {
   );
   const { data } = useFilteredPoiData();
   const draftPoi = useStore((state) => state.draftPoi);
+  const [mapBounds, setMapBounds] = useState<Array<LatLngTuple>>([DEFAULT_CENTER]);
   const hoveredPoi = useStore((state) => state.hoveredPoi);
   const setHoveredPoi = useStore((state) => state.setHoveredPoi);
   const selectedPoi = useStore((state) => state.selectedPoi);
   const history = useHistory();
   const selectedLatlng: LatLngTuple | undefined = selectedPoi ? [selectedPoi?.lat, selectedPoi?.lng] : undefined;
 
+  useEffect(() => {
+    let newBounds = [DEFAULT_CENTER];
+    if (selectedPoi) {
+      newBounds = [[selectedPoi.lat, selectedPoi.lng] as LatLngTuple];
+    } else if (data?.length) {
+      newBounds = data?.map((poi) => [poi.lat, poi.lng] as LatLngTuple) || [];
+    }
+    setMapBounds(newBounds);
+  }, [JSON.stringify(data), selectedPoi]);
+
   return (
     <div className="relative h-full w-full z-0">
-      {!createMode && <MapLayerControl />}
-      <MapContainer
-        id={'mapid'}
-        className={'h-full w-full z-0'}
-        center={DEFAULT_CENTER}
-        zoom={13}
-        scrollWheelZoom={true}
-      >
+      {!createMode && !selectedPoi && <MapLayerControl />}
+      <MapContainer id={'mapid'} className={'h-full w-full z-0'} scrollWheelZoom={true}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
@@ -55,7 +60,7 @@ export const Map: React.FC<Props> = ({ createMode }) => {
           zoomOffset={-1}
           maxZoom={18}
         />
-        <MapViewController center={selectedLatlng ?? DEFAULT_CENTER} zoom={13} createPoiMode={createMode} />
+        <MapViewController bounds={mapBounds} createPoiMode={createMode} />
         {/* Single marker when creating a new POI */}
         {!!(createMode && draftPoi) && <Marker icon={greenLargeIcon} position={draftPoi} />}
         {/* Single marker when POI is selected */}

src/components/Map/MapLayerControl.tsx

@@ -18,7 +18,7 @@ const MapLayerControl: React.FC = () => {
   };
 
   return (
-    <div className="border-2 border-black w-48 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
+    <div className="border-2 border-black w-52 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
       <div className={`flex justify-between cursor-pointer ${isOpen ? 'mb-2' : ''}`} onClick={() => setIsOpen(!isOpen)}>
         <h3 className="text-base font-semibold text-gray-900">Kategorien:</h3>
         <DownIcon
@@ -28,7 +28,7 @@ const MapLayerControl: React.FC = () => {
       {isOpen &&
         layers.map((layer) => {
           return (
-            <div key={layer}>
+            <div key={layer} className="my-2">
               <label className="inline-flex items-center">
                 <input
                   type="checkbox"

src/components/Map/MapViewController.tsx

@@ -4,12 +4,11 @@ import { useMap, useMapEvent } from 'react-leaflet';
 import { useStore } from '../../hooks';
 
 interface Props {
-  center: LatLngTuple;
-  zoom: number;
+  bounds: Array<LatLngTuple>;
   createPoiMode?: boolean;
 }
 
-const MapViewController: React.FC<Props> = ({ center, zoom, createPoiMode }) => {
+const MapViewController: React.FC<Props> = ({ bounds, createPoiMode }) => {
   const setDraftPoi = useStore((state) => state.setDraftPoi);
   const map = useMap();
 
@@ -20,8 +19,8 @@ const MapViewController: React.FC<Props> = ({ center, zoom, createPoiMode }) =>
   });
 
   useEffect(() => {
-    map.setView(center, zoom);
-  }, [center, zoom]);
+    map.fitBounds(bounds, { maxZoom: 16 });
+  }, [bounds]);
 
   return <></>;
 };

src/components/Sidebar/ListElement.tsx

@@ -16,7 +16,7 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
         {...restProps}
         className={`border-2 border-black border-opacity-20 ${
           hovered ? 'border-opacity-40' : 'hover:border-opacity-40'
-        } cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2`}
+        } cursor-pointer rounded-lg mx-4 my-2`}
       >
         <div className="p-3">
           <h2 className="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">

src/util/color.ts

-export function generateRandomHslColor(saturation = 100, lightness = 50): string {
-  const randomHue = getRandomIntInclusive(0, 360);
-  const color = `hsl(${randomHue},${saturation}%,${lightness}%)`;
+export function generateRandomHslColor(saturation = 100, lightness = 50, distinctValues = 20): string {
+  const randomColorIndex = getRandomIntInclusive(0, distinctValues);
+  const color = `hsl(${Math.floor(randomColorIndex * (360 / distinctValues))},${saturation}%,${lightness}%)`;
   return color;
 }