# Floor plan with different markers and colors

**URL:** <https://forums.losant.com/t/floor-plan-with-different-markers-and-colors/1279>\
**Category:** Show Losant\
**Created:** [November 30, 2018, 11:05pm UTC](https://forums.losant.com/t/floor-plan-with-different-markers-and-colors/1279 "2018-11-30T23:05:02Z")\
**Posts on this page:** 1\
**Page:** 1

<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:** [November 30, 2018, 11:05pm UTC](https://forums.losant.com/t/floor-plan-with-different-markers-and-colors/1279/1 "2018-11-30T23:05:02Z")

</div>

This example shows how to use the [Position Chart Block](https://docs.losant.com/dashboards/position-chart/) to display a floor plan with different markers and colors based on device type and attribute values. First, here’s the screenshot.

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

This block has two different shapes of markers: circles and diamonds. The circles change color based on the current state of the device, which are CNC machines in this example. The diamonds represent packaging lines and do not change color.

The various markers are stored as PNG images using Losant Files:

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

Using the Position Chart’s [advanced pin configuration](https://docs.losant.com/dashboards/position-chart/#advanced-pin-style-configuration), I can display one of the images based on the device’s type and current state. Here’s the pin configuration:

```nohighlight
{{#eq data.currentStatus 'cutting'}}
  https://files.onlosant.com/my-application-id/marker-green@2x.png
{{/eq}}

{{#eq data.currentStatus 'stopped'}}
  https://files.onlosant.com/my-application-id/marker-gray@2x.png
{{/eq}}

{{#eq data.currentStatus 'notCutting'}}
  https://files.onlosant.com/my-application-id/marker-blue@2x.png
{{/eq}}

{{#eq data.currentStatus 'alarm'}}
  https://files.onlosant.com/my-application-id/marker-red@2x.png
{{/eq}}

{{#eq deviceTags.type.[0] 'line'}}
  https://files.onlosant.com/my-application-id/diamond-green@2x.png
{{/eq}}

```

`currentStatus` is a string attribute on CNC devices that holds the current state of each CNC machine, which is either “cutting”, “stopped”, “notCutting” or “alarm”. Based on the value, the appropriate image and color is displayed.

Each device also has a `type` tag that controls what type of equipment this is. For this example, it’s either “cnc” or “line”. The last conditional is checking whether or not the device is an assembly line, which will then render the green diamond.

To get all of these devices on the chart, I used two tag queries:

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

Hopefully this example provides a good starting point for you if you’re designing a similar block.