[Solved] Trying to understand how to set a different icon for each device on GPS map using handlerbars

Help
1

Hi

I am trying to set a different color indicator for each device (last know point) on a GPS map.

I am not at all familiar with handlebars and I am having trouble working out how to
combine #if with #eq helpers to get the desired result.

I don’t seem to even be able to work out valid syntax for nesting #if and #eq.

I haven;t been able to find any examples.

Thanks

Tim

2

The first step will be to create the colored marker images for each of your devices. Losant currently only provides the two built-in ones: greenMarker.png and redMarker.png. You’ll also have to host these images somewhere. AWS S3 and Dropbox are good options, but any static hosting service will work.

The handlebar template will then look something like the following:

{{#if isLastPoint}}
  {{#eq deviceId "my-device-id-1"}}
    https://my-static-server/blueMarker.png
  {{/eq}}
  {{#eq deviceId "my-device-id-2"}}
    https://my-static-server/purpleMarker.png
  {{/eq}}
{{/if}}

If you want markers that look just like our built-in ones, the originals are below. You’ll just need to tweak their colors and host them somewhere.


3

Alternatively, you could eliminate all the extra {{#eq}} statements by naming your marker images the same as your device IDs. This would reduce the template to:

{{#if isLastPoint}}
    https://my-static-server/{{deviceId}}.png
{{/if}}
4

Thanks heaps.

Not sure why I couldn’t work it out. I was excluding the isLastPoint as I am only showing the last known point, and maybe that was part of the problem.

Again thanks for your timely response.

Cheers

T

5

Based on your use-case, we released the ability to easily change the color of the marker without having to host new images for each. Details here: https://www.losant.com/blog/platform-update-20170215

Thanks for the idea!

6

Great stuff.

Thanks for doing this.

T