# Tile coordinates on tileset

**URL:** <https://discourse.mapeditor.org/t/tile-coordinates-on-tileset/217>\
**Category:** Questions\
**Created:** [February 2, 2015, 2:42pm UTC](https://discourse.mapeditor.org/t/tile-coordinates-on-tileset/217 "2015-02-02T14:42:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DrimZ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.mapeditor.org/drimz/32/103_2.png) [@DrimZ](https://discourse.mapeditor.org/u/DrimZ)\
**Post date:** [February 2, 2015, 2:42pm UTC](https://discourse.mapeditor.org/t/tile-coordinates-on-tileset/217/1 "2015-02-02T14:42:32Z")

</div>

Hi there,

I’m creating a game in html5’s canvas just for educational purpose.  
My maths skills are very bad. I can’t understand how to get the tile location x&y on the tileset and i don’t understand either why those informations are not directly stored in the tmx file.

Thank you in advance ! (i will feel stupid soon 😉,)

---

<div class="post-metadata">

**Author:** ![Ablu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.mapeditor.org/ablu/32/1496_2.png) [@Ablu](https://discourse.mapeditor.org/u/Ablu)\
**Post date:** [February 8, 2015, 6:33pm UTC](https://discourse.mapeditor.org/t/tile-coordinates-on-tileset/217/2 "2015-02-08T18:33:07Z")

</div>

Hello,

I somewhen wrote a small renderer for html5 / javascript. This was only a test… But it might help you understanding how to translate the ids to x/y coordinates: [https://gist.github.com/Ablu/0614a5967e17ed0b4380#file-index-htm-L62](https://gist.github.com/Ablu/0614a5967e17ed0b4380#file-index-htm-L62)

The relevant snippet:

```
  var x = cell % map.layers[layer].width;
  var y = Math.floor((cell - x) / map.layers[layer].height);

```

cell is the index of the map cell in the layer array.

Regards,  
Ablu

---

<div class="post-metadata">

**Author:** ![bjorn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.mapeditor.org/bjorn/32/1599_2.png) [@bjorn](https://discourse.mapeditor.org/u/bjorn)\
**Post date:** [April 10, 2015, 8:03am UTC](https://discourse.mapeditor.org/t/tile-coordinates-on-tileset/217/3 "2015-04-10T08:03:38Z")

</div>

Since @DrimZ was asking about the coordinates of the tile, I believe the relevant snippet is rather [minimalistic tiled html5 example · GitHub](https://gist.github.com/Ablu/0614a5967e17ed0b4380#file-index-htm-L44-L54)

```javascript
      var tile_id = id - set.firstgid;
      var set_width = set.imagewidth / set.tilewidth;

      var tile_x = tile_id % set_width
      var tile_y = Math.floor(tile_id / set_width);
      ctx.drawImage(
              set.img, tile_x * set.tilewidth, tile_y * set.tileheight,
              set.tilewidth, set.tileheight,
              x * set.tilewidth, y * set.tileheight,
              set.tilewidth, set.tileheight
      );

```

This code does not take into account tile margin and tile spacing, which also affect where the tile rectangle of a given tile is on the tileset.

> [@DrimZ](#):
>
> i don’t understand either why those informations are not directly stored in the tmx file.

It’s simply because that information would be redundant since it can be derived from the existing information. You can avoid calculating it each time when drawing the tile by producing this data while or directly after loading the map.