react/kiezradar: fix github issues

liqd · Feb 11, 2025 · 1ead2e4 · 1ead2e4
1 parent 91080e7
commit 1ead2e4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/meinberlin/assets/scss/components_user_facing/_kiezradar.scss b/meinberlin/assets/scss/components_user_facing/_kiezradar.scss
@@ -297,6 +297,12 @@
   margin: 0;
   cursor: pointer;
 
+  &:focus {
+    outline: 3px auto Highlight;
+    outline: 3px auto -webkit-focus-ring-color;
+    outline-offset: 3px;
+  }
+
   &::-webkit-slider-thumb {
     appearance: none;
     width: 1.25rem;

diff --git a/meinberlin/react/kiezradar/KiezradarMap.jsx b/meinberlin/react/kiezradar/KiezradarMap.jsx
@@ -2,7 +2,7 @@ import L from 'leaflet'
 import React, { useRef } from 'react'
 import { createPortal } from 'react-dom'
 import django from 'django'
-import { Circle, MapContainer, Marker, useMap, ZoomControl } from 'react-leaflet'
+import { Circle, MapContainer, Marker, useMap, useMapEvents, ZoomControl } from 'react-leaflet'
 import { AddressSearch } from 'adhocracy4'
 import ControlWrapper from 'adhocracy4/adhocracy4/maps_react/static/a4maps_react/ControlWrapper'
 import MaplibreGlLayer from 'adhocracy4/adhocracy4/maps_react/static/a4maps_react/MaplibreGlLayer'
@@ -65,6 +65,24 @@ function Radius ({
   onChange
 }) {
   const markerRef = useRef(null)
+  const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
+
+  useMapEvents({
+    click: (e) => {
+      if (isTouchDevice) {
+        onChange({
+          point: {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [e.latlng.lng, e.latlng.lat]
+            }
+          },
+          radius
+        })
+      }
+    }
+  })
 
   const radiusControls = (
     <RadiusControls