Hi,

You can achieve this in Mendix by capturing the click position on an image using a small JavaScript action or custom widget, and then storing the coordinates.

Basic Approach

1. Display your image (floor plan) on a page
2. Capture the click event on the image
3. Calculate the X and Y coordinates relative to the image
4. Store those values in an entity (e.g., XCoordinate, YCoordinate)
5. Use those coordinates to position text dynamically

How to capture coordinates

You need a JavaScript action for this.

Example logic:

document.getElementById("myImage").addEventListener("click", function (event) {
    const rect = this.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    console.log("X:", x, "Y:", y);
});

Then:

• Pass these values back to Mendix using a JS action
• Store them in your entity

Important

If your image is scaled, store relative coordinates instead of absolute:

const xPercent = x / rect.width;
const yPercent = y / rect.height;

This ensures:

• Coordinates work across different screen sizes

Display text at positions

Once stored:

• Use a container/div positioned over the image
• Apply dynamic styling:

position: absolute;
left: {X}%;
top: {Y}%;

You can bind these values using Mendix expressions or dynamic classes.

Automation advanced

If you want automatic coordinate identification:

• Predefine zones (e.g., rooms) with coordinates
• Or use a mapping approach:
  • Store regions with boundaries
  • Match clicked coordinates to a region

Alternative (No custom JS)

You can also:

• Build a pluggable widget
• Or use existing image annotation widgets from Marketplace

• Capture click using JS → calculate coordinates
• Store as absolute or percentage values
• Use those values to position text dynamically
• Prefer percentage-based coordinates for responsive behavior

You are right. You can handle this by creating a small custom pluggable web widget.

The widget would display the floor image, listen for the user’s click, calculate the clicked position inside the image, and then pass those values back to Mendix. In practice, it usually calculates the x and y position relative to the image container, then stores them in Mendix attributes or sends them to a nanoflow.

I would strongly recommend storing the coordinates as relative values such as percentages, not fixed pixels. That way, if the image is resized on different screens, the marker positions still stay correct.

A typical approach is:

Display the floor plan image in the custom widget.

When the user clicks, capture the click event and calculate the position inside the image.

Convert that position into relative X/Y values.

Send those values back to Mendix through widget properties, attributes, or a nanoflow.

Store them in an entity such as FloorPlanMarker with fields like X, Y, and LabelText.

Then render those markers back on top of the image using absolute positioning.

So the main reason for using a custom widget is that the standard Mendix Image widget can handle clicks, but it does not provide the exact click coordinates out of the box. A custom widget gives you full control and is usually the cleanest long-term solution for this type of requirement.

If this resolves your issue, you can mark it as accepted.

Hi Ahmet Kudu,

Thanks.

Requesting you to guide to creat a small custom pluggable web widget for this purpose.

Regards

Sudhir