GPS Maps - Data for each map point?


Is there a way to show the status info for certain variables for each received GPS message so when you use your mouse and hover over a GPS location data point a window will pop up to show the GPS, Time, Speed, and other data you pick for every data point on the map?

Now it only shows GPS data and time when I hover over the starting and stopping points.

I’m thinking of something like the image below for each data point but with not quite as much data? :

Or like this where each pin is clickable with data for that specific received event.


This can be done using the Popup Style Configuration. This can be configured with any markdown you’d like to be displayed when one of the pins is clicked. If other data was reported on the device’s state at the same time as the location, those attributes will be available on the data field. For example, if my device was reporting location and temperature on each state message, you could display the temperature using the a popup style configuration of:

The location is: {{format latitude}}, {{format longitude}}.

The temperature at this location is {{data.temperature}}.

Didn’t see that when I was rushing together a quick GPS tracking dashboard :slight_smile:

Nice to see this is fully configurable like most of your other widgets.

Really appreciate how the widget windows are so customizable.


Got it working!

I just need to add a custom smaller pin icon next.


Awesome! Currently the easiest way to use a custom pin icon is to host the image somewhere (dropbox, s3, etc) and then use the markdown image tag to display it.

The inline instructions also mention the recommended ratio for the best presentation: 30x70px or larger with the same ratio. If you want the icon smaller, you’ll want to keep the image the same size, just put the icon in the center with transparent space around it.


Sweet! I was hoping that would work.

Found a decent site with quality icons here if anybody else is looking for pins:

1 Like

@Brandon_Cannaday I have tried to switch the pin marker image with 30x70 pixel images and 60x140 pixels same as the current image marker but I always end up with broken image link icon.

The images are PNG files with transparent backgrounds.

Can you get something to work?

Here is the 60x140 pixel image:

Here is the 30x70 image:

Any idea as to what is going on?


Figured it out after looking at the docs more.

I had to remove the

![]( )

You had in the example code above.

Working now!