# GPS Maps - Data for each map point?

**URL:** <https://forums.losant.com/t/gps-maps-data-for-each-map-point/544>\
**Category:** Feature Request\
**Created:** [July 10, 2017, 9:25pm UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544 "2017-07-10T21:25:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![RWB](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/rwb/32/2205_2.png) [@RWB](https://forums.losant.com/u/RWB)\
**Post date:** [July 10, 2017, 9:25pm UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544/1 "2017-07-10T21:25:37Z")

</div>

![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/2fc05250d72c2832b361641532b8dd0532534a44.jpg)

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? :

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/8f978ff0120b13d5fbd8ddcfbdef3b915a107d43.jpg)

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

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/3d5d298744cc0bcfb74d786bf8ac0eb00146789f.jpg)

---

<div class="post-metadata">

**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [July 11, 2017, 9:44pm UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544/2 "2017-07-11T21:44:37Z")

</div>

This can be done using the [Popup Style Configuration](https://docs.losant.com/dashboards/gps-history/#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:

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

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

```

---

<div class="post-metadata">

**Author:** ![RWB](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/rwb/32/2205_2.png) [@RWB](https://forums.losant.com/u/RWB)\
**Post date:** [July 11, 2017, 10:11pm UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544/3 "2017-07-11T22:11:02Z")

</div>

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

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

Really appreciate how the widget windows are so customizable.

---

<div class="post-metadata">

**Author:** ![RWB](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/rwb/32/2205_2.png) [@RWB](https://forums.losant.com/u/RWB)\
**Post date:** [July 12, 2017, 2:53pm UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544/4 "2017-07-12T14:53:00Z")

</div>

Got it working!

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

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/c1e25bf3490b539c664203866594d5ab6433bc26.jpg)

---

<div class="post-metadata">

**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [July 13, 2017, 4:56pm UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544/5 "2017-07-13T16:56:11Z")

</div>

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.

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/56ef9a09713c9d0000b2a5c795adb41baa28dac0.png)

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.

---

<div class="post-metadata">

**Author:** ![RWB](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/rwb/32/2205_2.png) [@RWB](https://forums.losant.com/u/RWB)\
**Post date:** [July 13, 2017, 5:14pm UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544/6 "2017-07-13T17:14:00Z")

</div>

> [@Brandon\_Cannaday](#):
>
> 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:  
[https://icons8.com/icon/pack/maps/color](https://icons8.com/icon/pack/maps/color)

---

<div class="post-metadata">

**Author:** ![RWB](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/rwb/32/2205_2.png) [@RWB](https://forums.losant.com/u/RWB)\
**Post date:** [July 22, 2017, 12:39am UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544/7 "2017-07-22T00:39:56Z")

</div>

@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.

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/96f064cd955f0da6482f6d9d35be72e731693f99.jpg)

Can you get something to work?

Here is the 60x140 pixel image: [https://cdn.shopify.com/s/files/1/0072/9612/files/GPSDot\_c3367dc3-a779-42a8-b807-e013996e1d02.png](https://cdn.shopify.com/s/files/1/0072/9612/files/GPSDot_c3367dc3-a779-42a8-b807-e013996e1d02.png)

Here is the 30x70 image: [https://cdn.shopify.com/s/files/1/0072/9612/files/GPSDot\_3b725b52-71ef-473f-9aa2-0f54ec889cf2.png](https://cdn.shopify.com/s/files/1/0072/9612/files/GPSDot_3b725b52-71ef-473f-9aa2-0f54ec889cf2.png)

Any idea as to what is going on?

---

<div class="post-metadata">

**Author:** ![RWB](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/rwb/32/2205_2.png) [@RWB](https://forums.losant.com/u/RWB)\
**Post date:** [July 22, 2017, 12:58am UTC](https://forums.losant.com/t/gps-maps-data-for-each-map-point/544/8 "2017-07-22T00:58:15Z")

</div>

Figured it out after looking at the docs more.

I had to remove the

`![]( )`

You had in the example code above.

Working now!

 ![](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/b045c8b204c063170b9f47fa9e07d1e95dc88a63.jpg)
