Image Map
Displays the indoor or relative location of entities on an image map, making it ideal for floor plans, smart parking, and more. Entity coordinates are expected to range from 0 to 1. Supports markers, marker tooltips, widget actions, polygons, and circles for enhanced spatial representation.
Who it’s for
Anyone tracking positions indoors or against a plan rather than against the world — sensors on a floor plan, vehicles in a car park, equipment on a warehouse layout, machines on a plant drawing. GPS does not work here, and the position is relative to a picture.
What it does
The Image Map plots entities on a background image using relative coordinates from 0 to 1. A device reporting xPos = 0.4 and yPos = 0.7 appears four tenths across and seven tenths down the image, labelled and with a tooltip built from its own keys, and it stays in that spot however the widget is resized.
- Positions are relative, so the markers track the picture at any widget size and on any screen.
- The background is any image the platform holds — a floor plan, a site layout, a schematic, a photograph.
- Markers carry data, not just position, with labels and tooltips written as patterns over the entity’s keys.
- The same layer types as the geographic map: markers, polygons, circles and polylines, so zones can be drawn on a floor plan.
- Marker appearance can follow the data, which turns a floor plan into a live status board.
- The background image can itself come from an entity attribute, so one widget can show a different plan per floor or per site.
- The Image Map expects coordinates between 0 and 1: an entity reporting real-world latitude and longitude will not appear, and belongs on the Map instead.
How to set up
Data keys
The Image Map takes a relative position per entity from the keys named in each layer’s configuration.
| Key | Role | Type | Description |
|---|---|---|---|
xPos | Horizontal position as a fraction of the image width | Timeseries | Must be between 0 and 1. Attributes work equally well for fixed equipment. The key name is configured per layer. |
yPos | Vertical position as a fraction of the image height | Timeseries | Must be between 0 and 1. An entity outside that range is drawn off the image or not at all. |
| Additional keys | Values used in labels and tooltips | Timeseries | Any keys the marker’s patterns reference, such as temperature. |
Work out how the 0-to-1 coordinates are produced before configuring anything. A positioning system reporting metres has to be converted against the plan’s real dimensions, and that conversion is usually a calculated field rather than something the widget can do.
Layers
| Setting | Default | Effect |
|---|---|---|
| Map type | Image | Uses a background image rather than map tiles |
| Image source | A sample plan | The background; can be a fixed image or one from an entity attribute |
| Markers | One demo layer | Entities drawn as markers, with label, tooltip and appearance settings |
| Polygons / Circles / Polylines | Empty | Zones and lines drawn on the plan |
How to customize
- To use your own plan — set the Image source to an image from the platform’s library, or to an entity attribute holding the URL.
- To show a different plan per entity — drive the image source from an attribute, which is how one widget serves several floors.
- To show status on the plan — set the marker appearance to follow a key, turning the layout into a live board.
- To draw zones on the plan — add a Polygons layer bound to the entities defining them.
- To say more in a tooltip — edit the tooltip pattern, which accepts entity variables and decimal specifiers such as
${xPos:2}. - To fit the card — set the background and card padding.
Tips
- Keep the plan’s aspect ratio the same as the widget’s. Relative coordinates are computed against the rendered image, so a plan stretched to fit a differently shaped tile puts every marker slightly wrong in a way that looks like sensor drift.
- Do the metres-to-fraction conversion in a calculated field rather than in the device. The plan gets replaced when a building is remodelled, and a conversion held on the platform is corrected once instead of reflashed onto every device.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.