@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/mapPolygon.md

@@ -0,0 +1,959 @@
+# Polygon
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapPolygon
+*Captured:* 2025-12-12T12:39:15.395Z
+
+## Polygon
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+200 m
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+200 m
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+import { useRef } from 'react';
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import Polygon, { colorMapMarker } from '@rio-cloud/rio-uikit/Polygon';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+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';
+
+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 position = { lat: 48.18009710294023, lng: 11.595117182551355 };
+
+    const points = [
+        {
+            lat: 48.18209710294023,
+            lng: 11.595137182551355,
+            address: 'A',
+        },
+        {
+            lat: 48.18119573935276,
+            lng: 11.597476068812341,
+            address: 'B',
+        },
+        {
+            lat: 48.177132252764345,
+            lng: 11.593699518519372,
+            address: 'C',
+        },
+        {
+            lat: 48.178162462939774,
+            lng: 11.591360632258386,
+            address: 'D',
+        },
+    ];
+
+    const eventListenerMap = {
+        [EventUtils.TAP]: (event: MapEvent) => {
+            console.log(event);
+
+            const target = event.target;
+            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(),
+            });
+        },
+    };
+
+    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;
+
+                return (
+                    <>
+                        <Polygon
+                            points={points}
+                            style={{ strokeColor: STROKE_COLOR, fillColor: FILL_COLOR }}
+                            eventListenerMap={eventListenerMap}
+                        />
+                        <Marker
+                            position={{ lat: 48.18, lng: 11.5951 }}
+                            icon={
+                                <SingleMapMarker
+                                    name='Gefoence'
+                                    iconNames={['geofence']}
+                                    markerColor='bg-map-marker-geofence'
+                                />
+                            }
+                            eventListenerMap={eventListenerMap}
+                        />
+                    </>
+                );
+            }}
+        </Map>
+    );
+};
+```
+
+### Example: Example 2
+
+Colorcolor-warmup-salmonColdplay
+color-coldplay-wine
+color-coldplay-aubergine
+color-coldplay-kashmir
+color-coldplay-fountain
+color-coldplay-turquoise
+color-coldplay-bermuda
+color-coldplay-moos
+color-coldplay-primrose
+color-coldplay-khaki
+Warmup
+color-warmup-crimson
+color-warmup-victoria
+color-warmup-cadillac
+color-warmup-raspberry
+color-warmup-cerise
+color-warmup-charm
+color-warmup-salmon
+color-warmup-cherokee
+color-warmup-corn
+Gray
+gray-darkest
+gray-darker
+gray-dark
+gray
+gray-light
+gray-lighter
+gray-lightest
+gray-decent
+Brand
+brand-primary
+brand-secondary
+brand-info
+brand-success
+brand-warning
+brand-danger
+Status
+color-status-available
+color-status-driving
+color-status-resting
+color-status-working
+Map Marker
+color-map-marker-text
+color-map-marker-active
+color-map-marker-asset
+color-map-marker-poi
+color-map-marker-geofence
+color-map-marker-route
+color-map-marker-info
+color-map-marker-success
+color-map-marker-warning
+color-map-marker-danger
+Rating
+color-rating-1
+color-rating-2
+color-rating-3
+color-rating-4
+color-rating-5
+Highlight
+color-highlight-darkest
+color-highlight-darker
+color-highlight-dark
+color-highlight
+color-highlight-light
+color-highlight-lighter
+color-highlight-lightest
+color-highlight-decent
+
+Terms of use© 1987–2025 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Colorcolor-warmup-salmonColdplay
+color-coldplay-wine
+color-coldplay-aubergine
+color-coldplay-kashmir
+color-coldplay-fountain
+color-coldplay-turquoise
+color-coldplay-bermuda
+color-coldplay-moos
+color-coldplay-primrose
+color-coldplay-khaki
+Warmup
+color-warmup-crimson
+color-warmup-victoria
+color-warmup-cadillac
+color-warmup-raspberry
+color-warmup-cerise
+color-warmup-charm
+color-warmup-salmon
+color-warmup-cherokee
+color-warmup-corn
+Gray
+gray-darkest
+gray-darker
+gray-dark
+gray
+gray-light
+gray-lighter
+gray-lightest
+gray-decent
+Brand
+brand-primary
+brand-secondary
+brand-info
+brand-success
+brand-warning
+brand-danger
+Status
+color-status-available
+color-status-driving
+color-status-resting
+color-status-working
+Map Marker
+color-map-marker-text
+color-map-marker-active
+color-map-marker-asset
+color-map-marker-poi
+color-map-marker-geofence
+color-map-marker-route
+color-map-marker-info
+color-map-marker-success
+color-map-marker-warning
+color-map-marker-danger
+Rating
+color-rating-1
+color-rating-2
+color-rating-3
+color-rating-4
+color-rating-5
+Highlight
+color-highlight-darkest
+color-highlight-darker
+color-highlight-dark
+color-highlight
+color-highlight-light
+color-highlight-lighter
+color-highlight-lightest
+color-highlight-decent
+
+Terms of use© 1987–2025 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+import { useRef, useState } from 'react';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import type { MapApi, MapEvent } from '@rio-cloud/rio-uikit/mapTypes';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+import Marker from '@rio-cloud/rio-uikit/Marker';
+import Polygon, {
+    colorMapColdplay,
+    colorMapWarmup,
+    colorMapGray,
+    colorMapBrand,
+    colorMapStatus,
+    colorMapMarker,
+    colorMapRating,
+    colorMapHighlight,
+} from '@rio-cloud/rio-uikit/Polygon';
+import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
+
+type HeaderOption = {
+    id: string;
+    label: string;
+    header: true;
+};
+
+type ColorOption = {
+    id: string;
+    label: string;
+    colors: {
+        stroke: string;
+        fill: string;
+    };
+};
+
+type ColorSelectOption = HeaderOption | ColorOption;
+
+type ColorOptions = ColorSelectOption[];
+
+const colorOptions: ColorOptions = [
+    { id: 'coldplayHeader', label: 'Coldplay', header: true },
+    ...Object.entries(colorMapColdplay).map(([key, value]) => ({ id: key, label: key, colors: value })),
+
+    { id: 'warmupHeader', label: 'Warmup', header: true },
+    ...Object.entries(colorMapWarmup).map(([key, value]) => ({ id: key, label: key, colors: value })),
+
+    { id: 'grayHeader', label: 'Gray', header: true },
+    ...Object.entries(colorMapGray).map(([key, value]) => ({ id: key, label: key, colors: value })),
+
+    { id: 'brandHeader', label: 'Brand', header: true },
+    ...Object.entries(colorMapBrand).map(([key, value]) => ({ id: key, label: key, colors: value })),
+
+    { id: 'statusHeader', label: 'Status', header: true },
+    ...Object.entries(colorMapStatus).map(([key, value]) => ({ id: key, label: key, colors: value })),
+
+    { id: 'markerHeader', label: 'Map Marker', header: true },
+    ...Object.entries(colorMapMarker).map(([key, value]) => ({ id: key, label: key, colors: value })),
+
+    { id: 'ratingHeader', label: 'Rating', header: true },
+    ...Object.entries(colorMapRating).map(([key, value]) => ({ id: key, label: key, colors: value })),
+
+    { id: 'highlightHeader', label: 'Highlight', header: true },
+    ...Object.entries(colorMapHighlight).map(([key, value]) => ({ id: key, label: key, colors: value })),
+];
+
+export default () => {
+    const mapApiRef = useRef<MapApi>();
+
+    const [currentColor, setCurrentColor] = useState('color-warmup-salmon');
+
+    const position = { lat: 48.18009710294023, lng: 11.595117182551355 };
+
+    const points = isoline.points;
+
+    const eventListenerMap = {
+        [EventUtils.TAP]: (event: MapEvent) => {
+            console.log(event);
+
+            const target = event.target;
+            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 handleSelectedColor = (item: SelectOption | undefined) => setCurrentColor(item?.id || '');
+
+    const currentOption = colorOptions.find(colorOption => colorOption.id === currentColor) as ColorOption;
+
+    return (
+        <div>
+            <div className='form-group'>
+                <label htmlFor='1'>Color</label>
+                <Select id='1' options={colorOptions} value={[currentColor]} onChange={handleSelectedColor} />
+            </div>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={position}
+                zoom={8}
+                height={400}
+                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={points}
+                                style={{
+                                    strokeColor: currentOption?.colors.stroke,
+                                    fillColor: currentOption?.colors.fill,
+                                }}
+                                eventListenerMap={eventListenerMap}
+                            />
+                            <Marker
+                                position={{ lat: 48.18, lng: 11.5951 }}
+                                icon={
+                                    <SingleMapMarker
+                                        markerColor='bg-map-marker-poi'
+                                        anchorSize='lg'
+                                        clickable={false}
+                                    />
+                                }
+                                eventListenerMap={eventListenerMap}
+                            />
+                        </>
+                    );
+                }}
+            </Map>
+        </div>
+    );
+};
+
+const isoline = {
+    id: 'SRP_shape_1',
+    type: 'POLYGON',
+    strokeColor: 'rgba(90, 72, 118, 1)',
+    fillColor: 'rgba(90, 72, 118, 0.3)',
+    points: [
+        {
+            lat: 48.438721,
+            lng: 10.717163,
+        },
+        {
+            lat: 48.460693,
+            lng: 10.733643,
+        },
+        {
+            lat: 48.482666,
+            lng: 10.799561,
+        },
+        {
+            lat: 48.592529,
+            lng: 10.909424,
+        },
+        {
+            lat: 48.603516,
+            lng: 10.942383,
+        },
+        {
+            lat: 48.603516,
+            lng: 11.030273,
+        },
+        {
+            lat: 48.614502,
+            lng: 11.063232,
+        },
+        {
+            lat: 48.68042,
+            lng: 11.085205,
+        },
+        {
+            lat: 48.691406,
+            lng: 11.118164,
+        },
+        {
+            lat: 48.691406,
+            lng: 11.162109,
+        },
+        {
+            lat: 48.68042,
+            lng: 11.195068,
+        },
+        {
+            lat: 48.658447,
+            lng: 11.217041,
+        },
+        {
+            lat: 48.647461,
+            lng: 11.25,
+        },
+        {
+            lat: 48.647461,
+            lng: 11.293945,
+        },
+        {
+            lat: 48.636475,
+            lng: 11.326904,
+        },
+        {
+            lat: 48.614502,
+            lng: 11.348877,
+        },
+        {
+            lat: 48.614502,
+            lng: 11.37085,
+        },
+        {
+            lat: 48.68042,
+            lng: 11.392822,
+        },
+        {
+            lat: 48.724365,
+            lng: 11.436768,
+        },
+        {
+            lat: 48.735352,
+            lng: 11.469727,
+        },
+        {
+            lat: 48.724365,
+            lng: 11.502686,
+        },
+        {
+            lat: 48.702393,
+            lng: 11.524658,
+        },
+        {
+            lat: 48.702393,
+            lng: 11.546631,
+        },
+        {
+            lat: 48.724365,
+            lng: 11.568604,
+        },
+        {
+            lat: 48.735352,
+            lng: 11.601563,
+        },
+        {
+            lat: 48.735352,
+            lng: 11.645508,
+        },
+        {
+            lat: 48.724365,
+            lng: 11.678467,
+        },
+        {
+            lat: 48.702393,
+            lng: 11.700439,
+        },
+        {
+            lat: 48.691406,
+            lng: 11.733398,
+        },
+        {
+            lat: 48.691406,
+            lng: 11.777344,
+        },
+        {
+            lat: 48.68042,
+            lng: 11.810303,
+        },
+        {
+            lat: 48.614502,
+            lng: 11.876221,
+        },
+        {
+            lat: 48.614502,
+            lng: 11.898193,
+        },
+        {
+            lat: 48.636475,
+            lng: 11.920166,
+        },
+        {
+            lat: 48.647461,
+            lng: 11.953125,
+        },
+        {
+            lat: 48.636475,
+            lng: 11.986084,
+        },
+        {
+            lat: 48.614502,
+            lng: 12.008057,
+        },
+        {
+            lat: 48.603516,
+            lng: 12.041016,
+        },
+        {
+            lat: 48.603516,
+            lng: 12.084961,
+        },
+        {
+            lat: 48.592529,
+            lng: 12.11792,
+        },
+        {
+            lat: 48.548584,
+            lng: 12.161865,
+        },
+        {
+            lat: 48.515625,
+            lng: 12.172852,
+        },
+        {
+            lat: 48.482666,
+            lng: 12.161865,
+        },
+        {
+            lat: 48.460693,
+            lng: 12.139893,
+        },
+        {
+            lat: 48.427734,
+            lng: 12.128906,
+        },
+        {
+            lat: 48.394775,
+            lng: 12.139893,
+        },
+        {
+            lat: 48.383789,
+            lng: 12.172852,
+        },
+        {
+            lat: 48.383789,
+            lng: 12.216797,
+        },
+        {
+            lat: 48.372803,
+            lng: 12.249756,
+        },
+        {
+            lat: 48.35083,
+            lng: 12.249756,
+        },
+        {
+            lat: 48.328857,
+            lng: 12.183838,
+        },
+        {
+            lat: 48.306885,
+            lng: 12.183838,
+        },
+        {
+            lat: 48.284912,
+            lng: 12.249756,
+        },
+        {
+            lat: 48.251953,
+            lng: 12.260742,
+        },
+        {
+            lat: 48.164063,
+            lng: 12.260742,
+        },
+        {
+            lat: 48.131104,
+            lng: 12.249756,
+        },
+        {
+            lat: 48.109131,
+            lng: 12.227783,
+        },
+        {
+            lat: 48.087158,
+            lng: 12.227783,
+        },
+        {
+            lat: 48.065186,
+            lng: 12.249756,
+        },
+        {
+            lat: 48.043213,
+            lng: 12.249756,
+        },
+        {
+            lat: 48.02124,
+            lng: 12.227783,
+        },
+        {
+            lat: 47.955322,
+            lng: 12.205811,
+        },
+        {
+            lat: 47.93335,
+            lng: 12.139893,
+        },
+        {
+            lat: 47.911377,
+            lng: 12.11792,
+        },
+        {
+            lat: 47.889404,
+            lng: 12.052002,
+        },
+        {
+            lat: 47.823486,
+            lng: 12.030029,
+        },
+        {
+            lat: 47.823486,
+            lng: 12.008057,
+        },
+        {
+            lat: 47.845459,
+            lng: 11.986084,
+        },
+        {
+            lat: 47.856445,
+            lng: 11.953125,
+        },
+        {
+            lat: 47.856445,
+            lng: 11.90918,
+        },
+        {
+            lat: 47.845459,
+            lng: 11.876221,
+        },
+        {
+            lat: 47.823486,
+            lng: 11.854248,
+        },
+        {
+            lat: 47.8125,
+            lng: 11.821289,
+        },
+        {
+            lat: 47.823486,
+            lng: 11.78833,
+        },
+        {
+            lat: 47.845459,
+            lng: 11.766357,
+        },
+        {
+            lat: 47.845459,
+            lng: 11.744385,
+        },
+        {
+            lat: 47.779541,
+            lng: 11.722412,
+        },
+        {
+            lat: 47.779541,
+            lng: 11.700439,
+        },
+        {
+            lat: 47.801514,
+            lng: 11.678467,
+        },
+        {
+            lat: 47.8125,
+            lng: 11.645508,
+        },
+        {
+            lat: 47.801514,
+            lng: 11.612549,
+        },
+        {
+            lat: 47.735596,
+            lng: 11.546631,
+        },
+        {
+            lat: 47.724609,
+            lng: 11.513672,
+        },
+        {
+            lat: 47.724609,
+            lng: 11.337891,
+        },
+        {
+            lat: 47.735596,
+            lng: 11.304932,
+        },
+        {
+            lat: 47.757568,
+            lng: 11.282959,
+        },
+        {
+            lat: 47.768555,
+            lng: 11.25,
+        },
+        {
+            lat: 47.757568,
+            lng: 11.217041,
+        },
+        {
+            lat: 47.735596,
+            lng: 11.195068,
+        },
+        {
+            lat: 47.724609,
+            lng: 11.162109,
+        },
+        {
+            lat: 47.735596,
+            lng: 11.12915,
+        },
+        {
+            lat: 47.757568,
+            lng: 11.107178,
+        },
+        {
+            lat: 47.779541,
+            lng: 11.04126,
+        },
+        {
+            lat: 47.845459,
+            lng: 11.019287,
+        },
+        {
+            lat: 47.856445,
+            lng: 10.986328,
+        },
+        {
+            lat: 47.856445,
+            lng: 10.942383,
+        },
+        {
+            lat: 47.867432,
+            lng: 10.909424,
+        },
+        {
+            lat: 47.900391,
+            lng: 10.898438,
+        },
+        {
+            lat: 47.944336,
+            lng: 10.898438,
+        },
+        {
+            lat: 47.977295,
+            lng: 10.887451,
+        },
+        {
+            lat: 47.988281,
+            lng: 10.854492,
+        },
+        {
+            lat: 47.988281,
+            lng: 10.766602,
+        },
+        {
+            lat: 47.999268,
+            lng: 10.733643,
+        },
+        {
+            lat: 48.032227,
+            lng: 10.722656,
+        },
+        {
+            lat: 48.065186,
+            lng: 10.733643,
+        },
+        {
+            lat: 48.087158,
+            lng: 10.799561,
+        },
+        {
+            lat: 48.109131,
+            lng: 10.799561,
+        },
+        {
+            lat: 48.131104,
+            lng: 10.733643,
+        },
+        {
+            lat: 48.164063,
+            lng: 10.722656,
+        },
+        {
+            lat: 48.208008,
+            lng: 10.722656,
+        },
+        {
+            lat: 48.240967,
+            lng: 10.733643,
+        },
+        {
+            lat: 48.262939,
+            lng: 10.755615,
+        },
+        {
+            lat: 48.284912,
+            lng: 10.755615,
+        },
+        {
+            lat: 48.306885,
+            lng: 10.733643,
+        },
+        {
+            lat: 48.372803,
+            lng: 10.71167,
+        },
+        {
+            lat: 48.394775,
+            lng: 10.689697,
+        },
+        {
+            lat: 48.416748,
+            lng: 10.684204,
+        },
+        {
+            lat: 48.438721,
+            lng: 10.717163,
+        },
+    ],
+};
+```