The improvements were made in the middle of 2022, and we gradually added more features and updates afterward. My role was a UI designer. I worked with a UX designer on this topic.

The issues to be addressed

Before the improvements were taken, we had had several tickets regarding the issues with the map symbols. We got feedback from users that

• they can’t tell the cabinet types on the map,
• they can’t tell whether a manual fault has been added to an unconnected asset,
• they can’t tell directly from the map which streetlights include solar panels or sensors,
• cabinets are hard to see among streetlights,
• they can’t use special asset states like “under construction”, “decoration”, “physically
  removed”, “installation” etc.

All these topics are related to map symbols. We were in desperate need of upgrading and improving our map symbol language.

We had several rounds of discussions and learned together on different maps displaying the symbols and what are our special traits and challenges. Below is our solution.

Principles and state definitions

Normal state: In a normal situation the icon reflects the nature of the asset.

By normal situation, we mean the state we expect the asset to be in for most of its lifetime. For a remotely managed asset, this is the commissioned state.



We determine the nature of the asset, and therefore which icon it should use in a normal situation, by using criteria. In theory, the criteria could be any expression, similar to those in advanced queries. For now, however, it is sufficient to rely on the 3 following indications: asset type, presence of a key component, and an explicit tag set by the user that we call Asset kind (see below).

Asset types represent the main asset categories. Asset types not only enjoy a specific icon shape, they also have a proper definition in the data model. Currently, there are only 3 asset types in the data model:

• Streetlight
• Cabinet
• Sensor station (eg. Upciti, not lighting related)

Asset kind is a new property that users can refine the asset type. When you set an Asset kind to a certain value, the icon associated with this value (if any) will be used instead of the default one. For instance, a decorative streetlight has all the characteristics and the data model of a standard streetlight, except that its icon will show the symbol that means “decorative”. Asset kinds allow us to declare a special trait of the asset (e.g. decorative) when that trait cannot be inferred from other criteria, for instance, there are no particular components in the tree that tell us this light is decorative.


The streetlight asset type has the predefined Asset kinds listed below, with more to come in the future according to needs. Other asset types currently don’t use subtyping.

• Catenary support
• Decorative
• Illuminated sign

So what are the built-in assets, and what criteria does Interact City use to determine which icon should be displayed?

Note that multiple criteria could be true simultaneously for an asset. For instance, a streetlight could be solar-powered and at the same time have a sensor node. In this case, evaluate the criteria in the order they are listed here, and pick the first one that matches. In our example, the solar streetlight would appear as a sensor-equipped light, because the sensor node criteria have higher priority than the solar criteria.



To keep the icon up-to-date, an option would be to re-evaluate the criteria whenever the user makes changes to the asset, for instance, modifying the component tree or some property. In our example, remove the sensor node and the icon will change to the solar one, because solar is the next matching criteria in the priority list.

Special state: When the asset is in a special state, the icon reflects that special state. This takes priority over the normal state.

Special states, in contrast to faults, are normally expected by the user. They’re not accidental. Some well-known special states are Not commissioned, Updating, and Manual override. There is nothing new in the logic, however, we introduce extra special states inherited from CityTouch, such as Planned or Under construction.

Below we specify all states on the streetlight example, but the same states apply to other asset types too (there will be some exceptions though, for example, an electrical cabinet will never be in Manual override).

The new special states In maintenance, Installation mode, Under construction, Disposed, etc. always apply to the full asset. For the others, in case there are multiple OLCs, the usual priorities apply.

Fault: When an asset has faults, the icon reflects the fault severity. This takes priority over normal state and special state.
When zooming in, the fault appears as a badge on top of the icon (as in CityTouch) so that the state remains visible. When zooming out, the fault covers the entire icon and the state is no longer visible.

A fault is not a state. In contrast to the asset state, a fault represents a situation that users are usually not expecting (apart from manually added faults).

An asset can have faults anytime irrespective of the asset’s nature or state. For instance, a streetlight could be solar, in manual override, and still have a fault.

If you get close enough to the assets (zooming in), the fault indication now appears as a badge on top of the asset icon, like in CityTouch. You can thus see there’s a fault and at the same time still see the main icon.

As you zoom out, at some point the badge becomes so tiny that it can’t be displayed anymore. From there on, the icon gets simplified and only represents the fault, as per classic Interact City design.

See the example below: A sensor-equipped streetlight with a fault.

Users can set Asset kind and Asset state in View properties dialog.

Asset icon sizes

On the UI (tables, cards, etc)

Sizes for the map

• Selected assets are displayed from zoom level 15-20.
• Communication node is displayed from zoom level 16-20. There is always an offset between the node and the streetlight. The nodes are at the top of other assets when there is overlapping.
• There is always a 2dips border around all the icons on the map to protect its display while no borders for the icons on the UI.

Asset sizes and states snapshot

Map demo

Refined base map style

The initial base map is from HERE map. There are very limited styles. I also did some research on the customization of the base map styles so that all the colors can from our own color palette, which is more harmonized with all the asset icons.