The Dynamic Image Point Viewer Component is an interactive visualization element that displays an image with configurable interactive points overlaid on it. It enables users to view and interact with specific locations on images, with points that can change appearance based on data values. This component is ideal for creating interactive maps, facility diagrams, process visualizations, or any interface where users need to interact with specific locations on an image.
imageUrl - Sets the URL of the image to be displayed in the viewer. For example, "https://example.com/floorplans/warehouse-a.jpg" provides the base image on which points will be overlaid. This property can also accept relative URLs to images stored within your application.
resizeImageStrategy - Determines how the image should be sized within its container. Options include "fitToContainer" (scales image to fit container while maintaining aspect ratio), "useStaticSize" (uses specified width and height), "fillWholeContent" (fills entire container, may crop image), or "useRealSize" (displays image at its actual size). For example, selecting "fitToContainer" ensures the image fits nicely within its assigned space.
width - Sets the width of the image when using "useStaticSize" strategy. For example, "800px" sets a fixed width for the image viewer. This property accepts any valid CSS size value including pixels, percentages, or other units.
height - Sets the height of the image when using "useStaticSize" strategy. For example, "600px" sets a fixed height for the image viewer. This property accepts any valid CSS size value including pixels, percentages, or other units.
disableScrollbar - Controls whether scrollbars appear when the image is larger than its container. When set to true, scrollbars are hidden even if the image exceeds its container size, which can provide a cleaner appearance but may limit access to parts of the image.
widthAuto - Controls whether the component width automatically adjusts to its content. When set to true, the component will take only as much width as needed; when false, it follows fixed width settings based on the container or specified values.
heightAuto - Controls whether the component height automatically adjusts to its content. When set to true, the component height is determined by its content; when false, it follows fixed height settings based on the container or specified values.
paddingClass - Configures spacing around the image viewer using CSS classes. For example, "p-3" adds medium padding on all sides of the component, improving its visual spacing within its container.
imageDataSourceId - Specifies the data source ID for retrieving the image. For example, "api/images/floorplans" connects to an API endpoint that returns image data, allowing dynamic loading of images from a server.
getImageHttpRequestParametersMap - Configures HTTP parameters for image fetching. This object maps additional parameters needed for the image request, such as {"buildingId": "${context.selectedBuilding}"} to load the image for a specific building.
pointsDataSourceId - Specifies the data source ID for retrieving points to overlay on the image. For example, "api/safety-sensors/status" would connect to an API that returns data about safety sensor locations and their statuses.
getPointsHttpRequestParametersMap - Configures HTTP parameters for points data fetching. This object maps additional parameters needed for the points data request, such as {"floorId": "${context.selectedFloorId}"} to load points for a specific floor.
positionXFieldName - Specifies the field name in the data source that contains the X coordinate for each point. For example, "locationX" tells the component which field in the data represents the horizontal position of each point on the image.
positionYFieldName - Specifies the field name in the data source that contains the Y coordinate for each point. For example, "locationY" tells the component which field in the data represents the vertical position of each point on the image.
keyFieldName - Specifies the field name that uniquely identifies each point. For example, "sensorId" helps the component track individual points and associate them with data records.
displayFieldName - Specifies the field name that contains the display text for each point's tooltip. For example, "sensorName" determines what text is shown when users hover over a point.
thresholdConfig - Configures conditional styling rules that change the color of points based on data values. For example, you can configure rules that render points as green when a status is "normal", yellow for "warning", and red for "critical", providing at-a-glance status information.
events - Configures the events that the component can trigger and respond to:
contextMenuLabel - Sets the text for context menu actions that appear when right-clicking on points. For example, "Edit Sensor" would create a context menu option for editing point properties. This provides a way to offer additional actions for points beyond simple clicks.
dataTestId - Sets the testing hook ID for automated testing. For example, setting to "warehouse-safety-map" allows test scripts to reliably locate this component during automated testing.
enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the image viewer can be highlighted during onboarding or tutorial flows to explain important visualization features to users.
guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Warehouse Safety Map", "de-DE": "Lagerhaus-Sicherheitskarte"} provides clear identification during guided tours.
guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This map shows real-time safety sensor data", "de-DE": "Diese Karte zeigt Echtzeitdaten der Sicherheitssensoren"} provides detailed context during guided tours.