Map with marker centering

Who it’s for

Dashboard authors building a map who need it to work with the rest of the dashboard ask “how do I make a table row or an alarm bring the right pin into view, instead of asking the operator to search the whole map for it?” The standard entity map shows every marker at once; this one adds a way for another widget to say which marker matters right now.

What it does

Selecting a row in an entity table broadcasts a markerCentered event with a device’s id, and the map pans to that device’s marker without the operator scrolling or zooming to find it.

• Standard entity map underneath — tile providers, markers, tooltips, widget actions, polygons and circles, so it drops into a dashboard the same way any map widget does
• Any widget can drive it — a table, a list, an alarm widget, or a custom action script can bring a marker into view with one broadcast call
• Can open the marker’s tooltip at the same time, so the operator sees the entity’s details the moment the map settles on it
• An id the map doesn’t know is not an error — broadcasting an entity outside the datasource, or one that has never reported a position, leaves the view exactly where it was
• Displays; it doesn’t track or store movement — pair it with a table or a trend widget for a history of where an entity has been

How to set up

Data keys

Each data layer reads its own keys, and each layer has its own datasource — different entities can feed the markers, the polygons and the circles.

How to customize

Map & layers

• To change the base map — set Map provider; pick a built-in tile source or point it at a server of your own.
• To add or change what’s drawn — edit Data layers; markers, polygons and circles each carry their own datasource and keys.
• To color a marker by a reported value — set Marker icon and color.
• To change what a marker’s tooltip shows — edit Tooltip; it’s a template written over the entity’s own keys.
• To change what a click on a marker does — set Widget actions.

Starting view

• To change where the map opens before anything is centered — set Default map position and zoom.
• To have the map zoom to fit every marker on load — turn on Fit map bounds; a later broadcast still overrides it, since centering on a marker always moves the view.

How another widget centers the map

Broadcast markerCentered with an entity id, and the map pans to that entity’s marker:

const broadcastService = widgetContext.$scope.$injector
    .get(widgetContext.servicesMap.get('broadcastService'));

broadcastService.broadcast('markerCentered', entityId.id, false);

Pass true for the last argument when the operator needs to see the entity’s details right away — from an alarm table, for instance. Pass false when the map is one panel among several and a tooltip would cover the neighboring markers. The call works from anywhere with a widget context: a widget action, a custom action’s script, or another widget’s controller.

Tips

• Wire an alarm widget’s click action to broadcast markerCentered with the alarm’s originator id, so clicking an alarm brings the operator straight to the device on the map.
• Pair this widget with an entity table: keep the table as where the operator searches, and let the map just show where things are.
• Turn off Fit map bounds if the map should stay on one region and only move when something is centered on it — otherwise every reload re-zooms to fit all markers first.