SurveyResponse: show Radnetz BB in overview map

FixMyBerlin · Dec 5, 2024 · 8be02f0 · 8be02f0
1 parent c9bf24b
commit 8be02f0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/src/pages/[projectSlug]/surveys/[surveyId]/responses/map/[surveyResponseId].tsx b/src/pages/[projectSlug]/surveys/[surveyId]/responses/map/[surveyResponseId].tsx
@@ -82,6 +82,7 @@ export const SurveyResponseWithLocation = () => {
               selectedSurveyResponse={selectedSurveyResponse}
               surveyResponsesFeedbackPartWithLocation={feedbackSurveyResponses}
               locationRef={locationRef!}
+              surveySlug={survey.slug}
             />
           </section>
           <section className="flex-grow rounded-md drop-shadow-md">

diff --git a/src/survey-responses/components/feedback/SurveyFeedbackWithLocationOverviewMap.tsx b/src/survey-responses/components/feedback/SurveyFeedbackWithLocationOverviewMap.tsx
@@ -1,18 +1,27 @@
 import { BackgroundSwitcher, LayerType } from "@/src/core/components/Map/BackgroundSwitcher"
 import SurveyStaticPin from "@/src/core/components/Map/SurveyStaticPin"
 import { useProjectSlug } from "@/src/core/routes/useProjectSlug"
+import { AllowedSurveySlugs } from "@/src/survey-public/utils/allowedSurveySlugs"
 import { Routes, useParam } from "@blitzjs/next"
 import "maplibre-gl/dist/maplibre-gl.css"
 import router from "next/router"
 import { useState } from "react"
-import Map, { LngLatBoundsLike, Marker, NavigationControl } from "react-map-gl/maplibre"
+import Map, {
+  Layer,
+  LngLatBoundsLike,
+  Marker,
+  NavigationControl,
+  Source,
+} from "react-map-gl/maplibre"
 
 type Props = {
   maptilerUrl: string
   defaultViewState?: LngLatBoundsLike
   selectedSurveyResponse: any
   surveyResponsesFeedbackPartWithLocation: any[]
   locationRef: number
+  //todo survey clean up after survey BB
+  surveySlug: AllowedSurveySlugs
 }
 
 export const SurveyFeedbackWithLocationOverviewMap: React.FC<Props> = ({
@@ -21,6 +30,7 @@ export const SurveyFeedbackWithLocationOverviewMap: React.FC<Props> = ({
   selectedSurveyResponse,
   locationRef,
   surveyResponsesFeedbackPartWithLocation,
+  surveySlug,
 }) => {
   const [selectedLayer, setSelectedLayer] = useState<LayerType>("vector")
   const surveyId = useParam("surveyId", "number")
@@ -58,6 +68,30 @@ export const SurveyFeedbackWithLocationOverviewMap: React.FC<Props> = ({
         mapStyle={selectedLayer === "vector" ? vectorStyle : satelliteStyle}
         RTLTextPlugin={false}
       >
+        {/*  todo survey clean up after survey BB */}
+        {surveySlug === "radnetz-brandenburg" && (
+          <Source
+            key="SourceNetzentwurf"
+            type="vector"
+            minzoom={6}
+            maxzoom={10}
+            tiles={[
+              "https://api.maptiler.com/tiles/650084a4-a206-4873-8873-e3a43171b6ea/{z}/{x}/{y}.pbf?key=ECOoUBmpqklzSCASXxcu",
+            ]}
+          >
+            <Layer
+              id="LayerNetzentwurf"
+              type="line"
+              source-layer="default"
+              beforeId="Fühung unklar"
+              paint={{
+                "line-color": "hsl(30, 100%, 50%)",
+                "line-width": ["interpolate", ["linear"], ["zoom"], 0, 1, 8, 1.5, 13.8, 5],
+                "line-dasharray": [3, 2],
+              }}
+            />
+          </Source>
+        )}
         {surveyResponsesFeedbackPartWithLocation.map((r) => (
           <Marker
             key={r.id}