highlight onClick

src/KartaPage.tsx

@@ -10,7 +10,8 @@ export function KartaPage() {
   const [initial, setInitial] = useState(null);
   const [articles, setArticles] = useState(null);
   const [search, setSearch] = useState('');
-  const [res, setRes] = useState();
+  const [selected, setSelected] = useState(-1);
+  const [cursor, setCursor] = useState('grab');
 
   useEffect(() => {
     // let initialArticles
@@ -60,7 +61,12 @@ export function KartaPage() {
         style={{
           height: '90vh'
         }}
+        cursor={cursor}
         mapStyle={mapstyle}
+        interactiveLayerIds={['points-layer']}
+        onClick={e => e.features[0] ? setSelected(e.features[0].properties.id) : setSelected(-1)}
+        onMouseEnter={e => setCursor('pointer')}
+        onMouseLeave={e => setCursor('grab')}
         >
           <Source
             id='points'
@@ -73,6 +79,9 @@ export function KartaPage() {
               type='circle'
               source-layer='layer'
               filter={articles === null || articles.length == 0 ? false : ['in', 'id', ...articles.map(a => a.id)]}
+              paint={{
+                "circle-color": ['match', ['get', 'id'], selected, '#FF0000', '#000000']
+              }}
             />
           </Source>