@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/components/mapPolygon.md

@@ -3,18 +3,35 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapPolygon
-*Captured:* 2026-03-06T10:41:20.236Z
+*Captured:* 2026-04-20T12:55:30.672Z
+
+Polygons and isolines support click and hover interactions. A typical hover effect can be created by changing the outline via strokeColor and lineWidth in the hoverStyle.
 
 ## Polygon
 
-### Example: Example 1
+### Example: Last map interaction
+
+Terms of use © 1987–2026 HERE
+
+200 m
 
+Choose view
+Map view
+Satellite
 
+Traffic conditions
+Show traffic incidents
+
+Last map interaction
+{
+"clicked": "none",
+"eventType": "none"
+}
 
 #### React (tsx)
 
 ```tsx
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import Map from '@rio-cloud/rio-uikit/Map';
 import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
@@ -26,12 +43,14 @@ import type { MapApi, MapEvent } from '@rio-cloud/rio-uikit/mapTypes';
 import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
 import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
 import Marker from '@rio-cloud/rio-uikit/Marker';
+import { PolygonEventDebug, getPolygonEventDebugData, type PolygonEventDebugData } from './PolygonEventDebug';
 
 const STROKE_COLOR = colorMapMarker['color-map-marker-geofence'].stroke;
 const FILL_COLOR = colorMapMarker['color-map-marker-geofence'].fill;
 
 export default () => {
     const mapApiRef = useRef<MapApi>();
+    const [eventData, setEventData] = useState<PolygonEventDebugData>();
 
     const position = { lat: 48.18009710294023, lng: 11.595117182551355 };
 
@@ -58,76 +77,240 @@ export default () => {
         },
     ];
 
-    const eventListenerMap = {
-        [EventUtils.TAP]: (event: MapEvent) => {
-            console.log(event);
+    const createTapHandler = (clicked: string) => (event: MapEvent) =>
+        setEventData(getPolygonEventDebugData(clicked, event, mapApiRef.current));
 
-            // biome-ignore lint/suspicious/noExplicitAny: we don't specify here which target element it might be
-            const target = event.target as any;
-            console.log({ boundingBox: target.getBoundingBox(), geometry: target.getGeometry() });
+    return (
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={position}
+                zoom={15}
+                height={300}
+                mapSettings={
+                    <MapSettings
+                        options={[
+                            <MapTypeSettings
+                                key='mapTypeSettings'
+                                tooltip='Change map type'
+                                dropdownHeaderText='Map views'
+                                defaultTypeLabel='Default view'
+                                truckTypeLabel='Truck view'
+                                terrainTypeLabel='Terrain view'
+                                satelliteTypeLabel='Satellite view'
+                                nightTypeLabel='Night view'
+                            />,
+                        ]}
+                    />
+                }
+            >
+                {(api: MapApi) => {
+                    mapApiRef.current = api;
 
-            console.log({
-                viewport: mapApiRef.current?.utils?.getViewPort(),
-                baseLayer: mapApiRef.current?.utils?.getBaseLayer(),
-                mapBoundingBox: mapApiRef.current?.utils?.getBounds(),
-                center: mapApiRef.current?.utils?.getCenter(),
-                zoom: mapApiRef.current?.utils?.getZoom(),
-                layers: mapApiRef.current?.utils?.getLayers(),
-            });
-        },
+                    const polygonStyle = { strokeColor: STROKE_COLOR, fillColor: FILL_COLOR } as H.map.SpatialStyle;
+
+                    return (
+                        <>
+                            <Polygon
+                                points={points}
+                                style={polygonStyle}
+                                eventListenerMap={{ [EventUtils.TAP]: createTapHandler('polygon') }}
+                            />
+                            <Marker
+                                position={{ lat: 48.18, lng: 11.5951 }}
+                                icon={
+                                    <SingleMapMarker
+                                        name='Gefoence'
+                                        iconNames={['geofence']}
+                                        markerColor='bg-map-marker-geofence'
+                                    />
+                                }
+                                eventListenerMap={{ [EventUtils.TAP]: createTapHandler('marker') }}
+                            />
+                        </>
+                    );
+                }}
+            </Map>
+            <PolygonEventDebug eventData={eventData} />
+        </>
+    );
+};
+```
+
+#### Props: Polygon
+
+### Polygon
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| points | PolygonPoints | — | Ordered geographic positions that define the polygon geometry. |
+| style | PolygonStyle | H.map.SpatialStyle.DEFAULT_STYLE | Visual style applied to the polygon. |
+| hoverStyle | PolygonStyle | — | Style overrides applied while the polygon is hovered. |
+| eventListenerMap | EventListenerMap | — | Event handlers attached to the polygon. |
+| cursor | CSSProperties['cursor'] | — | Cursor shown while hovering the polygon. If omitted, clickable polygons automatically use pointer. |
+
+## Clickable polygons and isolines
+
+### Example: geofence
+
+Terms of use © 1987–2026 HERE
+
+200 m
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Active polygon: geofence
+Last map interaction
+{
+"clicked": "none",
+"eventType": "none"
+}
+
+#### React (tsx)
+
+```tsx
+import { useRef, useState } from 'react';
+
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import Polygon, { colorMapMarker, colorMapWarmup } from '@rio-cloud/rio-uikit/Polygon';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import type { MapApi, MapEvent } from '@rio-cloud/rio-uikit/mapTypes';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import { PolygonEventDebug, getPolygonEventDebugData, type PolygonEventDebugData } from './PolygonEventDebug';
+
+const geofencePoints = [
+    { lat: 48.1842, lng: 11.5923 },
+    { lat: 48.1824, lng: 11.5981 },
+    { lat: 48.1778, lng: 11.5968 },
+    { lat: 48.1786, lng: 11.5904 },
+];
+
+const isolinePoints = [
+    { lat: 48.1862, lng: 11.6017 },
+    { lat: 48.1836, lng: 11.6072 },
+    { lat: 48.1798, lng: 11.6064 },
+    { lat: 48.1774, lng: 11.6019 },
+    { lat: 48.1805, lng: 11.5984 },
+    { lat: 48.1844, lng: 11.5989 },
+];
+
+const position = { lat: 48.18009710294023, lng: 11.599117182551355 };
+
+type PolygonId = 'geofence' | 'isoline';
+
+export default () => {
+    const mapApiRef = useRef<MapApi>();
+    const [activePolygonId, setActivePolygonId] = useState<PolygonId>('geofence');
+    const [eventData, setEventData] = useState<PolygonEventDebugData>();
+
+    const createTapHandler = (polygonId: PolygonId) => (event: MapEvent) => {
+        event.stopPropagation();
+        setActivePolygonId(polygonId);
+        setEventData(getPolygonEventDebugData(polygonId, event, mapApiRef.current));
+        Notification.info(`${polygonId === 'geofence' ? 'Geofence' : 'Isoline'} clicked`);
     };
 
     return (
-        <Map
-            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-            center={position}
-            zoom={15}
-            height={300}
-            mapSettings={
-                <MapSettings
-                    options={[
-                        <MapTypeSettings
-                            key='mapTypeSettings'
-                            tooltip='Change map type'
-                            dropdownHeaderText='Map views'
-                            defaultTypeLabel='Default view'
-                            truckTypeLabel='Truck view'
-                            terrainTypeLabel='Terrain view'
-                            satelliteTypeLabel='Satellite view'
-                            nightTypeLabel='Night view'
-                        />,
-                    ]}
-                />
-            }
-        >
-            {(api: MapApi) => {
-                mapApiRef.current = api;
-
-                const polygonStyle = { strokeColor: STROKE_COLOR, fillColor: FILL_COLOR } as H.map.SpatialStyle;
-
-                return (
-                    <>
-                        <Polygon points={points} style={polygonStyle} eventListenerMap={eventListenerMap} />
-                        <Marker
-                            position={{ lat: 48.18, lng: 11.5951 }}
-                            icon={
-                                <SingleMapMarker
-                                    name='Gefoence'
-                                    iconNames={['geofence']}
-                                    markerColor='bg-map-marker-geofence'
-                                />
-                            }
-                            eventListenerMap={eventListenerMap}
-                        />
-                    </>
-                );
-            }}
-        </Map>
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={position}
+                zoom={15}
+                height={320}
+                mapSettings={
+                    <MapSettings
+                        options={[
+                            <MapTypeSettings
+                                key='mapTypeSettings'
+                                tooltip='Change map type'
+                                dropdownHeaderText='Map views'
+                                defaultTypeLabel='Default view'
+                                truckTypeLabel='Truck view'
+                                terrainTypeLabel='Terrain view'
+                                satelliteTypeLabel='Satellite view'
+                                nightTypeLabel='Night view'
+                            />,
+                        ]}
+                    />
+                }
+            >
+                {(api: MapApi) => {
+                    mapApiRef.current = api;
+
+                    return (
+                        <>
+                            <Polygon
+                                points={geofencePoints}
+                                style={{
+                                    strokeColor:
+                                        activePolygonId === 'geofence'
+                                            ? colorMapWarmup['color-warmup-salmon'].stroke
+                                            : colorMapMarker['color-map-marker-geofence'].stroke,
+                                    fillColor: colorMapMarker['color-map-marker-geofence'].fill,
+                                    lineWidth: activePolygonId === 'geofence' ? 4 : 2,
+                                }}
+                                hoverStyle={{
+                                    strokeColor: colorMapWarmup['color-warmup-cherokee'].stroke,
+                                    lineWidth: 5,
+                                }}
+                                eventListenerMap={{
+                                    [EventUtils.TAP]: createTapHandler('geofence'),
+                                }}
+                            />
+                            <Polygon
+                                points={isolinePoints}
+                                style={{
+                                    strokeColor:
+                                        activePolygonId === 'isoline'
+                                            ? colorMapWarmup['color-warmup-cherokee'].stroke
+                                            : colorMapWarmup['color-warmup-salmon'].stroke,
+                                    fillColor: 'rgba(255, 255, 255, 0)',
+                                    lineWidth: activePolygonId === 'isoline' ? 4 : 3,
+                                    lineDash: [4, 2],
+                                }}
+                                hoverStyle={{
+                                    strokeColor: colorMapMarker['color-map-marker-poi'].stroke,
+                                    lineWidth: 4,
+                                }}
+                                eventListenerMap={{
+                                    [EventUtils.TAP]: createTapHandler('isoline'),
+                                }}
+                            />
+                        </>
+                    );
+                }}
+            </Map>
+            <div className='margin-top-15'>
+                Active polygon: <strong>{activePolygonId}</strong>
+            </div>
+            <PolygonEventDebug eventData={eventData} />
+        </>
     );
 };
 ```
 
-### Example: Example 2
+#### Props: Polygon
+
+### Polygon
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| points | PolygonPoints | — | Ordered geographic positions that define the polygon geometry. |
+| style | PolygonStyle | H.map.SpatialStyle.DEFAULT_STYLE | Visual style applied to the polygon. |
+| hoverStyle | PolygonStyle | — | Style overrides applied while the polygon is hovered. |
+| eventListenerMap | EventListenerMap | — | Event handlers attached to the polygon. |
+| cursor | CSSProperties['cursor'] | — | Cursor shown while hovering the polygon. If omitted, clickable polygons automatically use pointer. |
+
+### Example: Last map interaction
 
 Color color-warmup-salmon Coldplay
 color-coldplay-wine
@@ -197,6 +380,23 @@ color-highlight-lighter
 color-highlight-lightest
 color-highlight-decent
 
+Terms of use © 1987–2026 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Last map interaction
+{
+"clicked": "none",
+"eventType": "none"
+}
+
 #### React (tsx)
 
 ```tsx
@@ -222,6 +422,7 @@ import Polygon, {
 import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
 
 import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import { PolygonEventDebug, getPolygonEventDebugData, type PolygonEventDebugData } from './PolygonEventDebug';
 
 type HeaderOption = {
     id: string;
@@ -270,6 +471,7 @@ const colorOptions: ColorOptions = [
 
 export default () => {
     const mapApiRef = useRef<MapApi>();
+    const [eventData, setEventData] = useState<PolygonEventDebugData>();
 
     const [currentColor, setCurrentColor] = useState('color-warmup-salmon');
 
@@ -277,24 +479,8 @@ export default () => {
 
     const points = isoline.points;
 
-    const eventListenerMap = {
-        [EventUtils.TAP]: (event: MapEvent) => {
-            console.log(event);
-
-            // biome-ignore lint/suspicious/noExplicitAny: we don't specify here which target element it might be
-            const target = event.target as any;
-            console.log({ boundingBox: target.getBoundingBox(), geometry: target.getGeometry() });
-
-            console.log({
-                viewport: mapApiRef.current?.utils?.getViewPort(),
-                baseLayer: mapApiRef.current?.utils?.getBaseLayer(),
-                mapBoundingBox: mapApiRef.current?.utils?.getBounds(),
-                center: mapApiRef.current?.utils?.getCenter(),
-                zoom: mapApiRef.current?.utils?.getZoom(),
-                layers: mapApiRef.current?.utils?.getLayers(),
-            });
-        },
-    };
+    const createTapHandler = (clicked: string) => (event: MapEvent) =>
+        setEventData(getPolygonEventDebugData(clicked, event, mapApiRef.current));
 
     const handleSelectedColor = (item: SelectOption | undefined) => setCurrentColor(item?.id || '');
 
@@ -338,7 +524,11 @@ export default () => {
 
                     return (
                         <>
-                            <Polygon points={points} style={polygonStyle} eventListenerMap={eventListenerMap} />
+                            <Polygon
+                                points={points}
+                                style={polygonStyle}
+                                eventListenerMap={{ [EventUtils.TAP]: createTapHandler('isoline polygon') }}
+                            />
                             <Marker
                                 position={{ lat: 48.18, lng: 11.5951 }}
                                 icon={
@@ -348,12 +538,13 @@ export default () => {
                                         clickable={false}
                                     />
                                 }
-                                eventListenerMap={eventListenerMap}
+                                eventListenerMap={{ [EventUtils.TAP]: createTapHandler('poi marker') }}
                             />
                         </>
                     );
                 }}
             </Map>
+            <PolygonEventDebug eventData={eventData} />
         </div>
     );
 };
@@ -838,4 +1029,16 @@ const isoline = {
         },
     ],
 };
-```
+```
+
+#### Props: Polygon
+
+### Polygon
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| points | PolygonPoints | — | Ordered geographic positions that define the polygon geometry. |
+| style | PolygonStyle | H.map.SpatialStyle.DEFAULT_STYLE | Visual style applied to the polygon. |
+| hoverStyle | PolygonStyle | — | Style overrides applied while the polygon is hovered. |
+| eventListenerMap | EventListenerMap | — | Event handlers attached to the polygon. |
+| cursor | CSSProperties['cursor'] | — | Cursor shown while hovering the polygon. If omitted, clickable polygons automatically use pointer. |