# TileMap Image Position not Aligned with Tilemap Layer

**URL:** <https://phaser.discourse.group/t/tilemap-image-position-not-aligned-with-tilemap-layer/13042>\
**Category:** Phaser 3\
**Created:** [March 19, 2023, 6:59pm UTC](https://phaser.discourse.group/t/tilemap-image-position-not-aligned-with-tilemap-layer/13042 "2023-03-19T18:59:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hitthecode](https://avatars.discourse-cdn.com/v4/letter/h/f07891/32.png) [@hitthecode](https://phaser.discourse.group/u/hitthecode)\
**Post date:** [March 19, 2023, 6:59pm UTC](https://phaser.discourse.group/t/tilemap-image-position-not-aligned-with-tilemap-layer/13042/1 "2023-03-19T18:59:27Z")

</div>

hi all,  
I’m trying to load a TileMap (generated in Tiled) and display the image/sprite in phaser.

However, The position of the image seems to be not aligned with the tilemap layer.

Any hints what I’m missing?

here is a very simple setup (codepen below):

- default phaser setup, using matter hysics without collisions or gravity
- tilemap is generated form a 20x20 pixel black square, each pixel is a tile
  - tilemap image: [https://www.benzahler.ch/codepen/blacktest20x20.png](https://www.benzahler.ch/codepen/blacktest20x20.png)
  - tilemap json: [https://www.benzahler.ch/codepen/blacktest20x20.json](https://www.benzahler.ch/codepen/blacktest20x20.json)

This is how I add the tilemap:

```javascript
        var dictTileMap = this.make.tilemap({key: 'blacktiles'});
        var dictImage = dictTileMap.addTilesetImage('blacktiles');
        var dictLayer = dictTileMap.createLayer('Tile Layer 1', dictImage, 10,10);
        console.log(dictLayer.getBounds());

```

I’m placing the tilemap layer at coordinates 10/10, while does position the tilemap layer in the top left corner as you can see from the console.log.  
However, the image is 10px off both horizontally and vertically.

O have created a pen to demonstrate this:  
https://codepen.io/hit-the-code/embed/preview/rNZrXJO?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=rNZrXJO

Any help on how to align image/and layer is greatly appreciated!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 19, 2023, 7:08pm UTC](https://phaser.discourse.group/t/tilemap-image-position-not-aligned-with-tilemap-layer/13042/2 "2023-03-19T19:08:52Z")

</div>

That looks right to me. Tilemap Layer origin is top-left (0, 0), and that’s on the game canvas at (10, 10).

---

<div class="post-metadata">

**Author:** ![hitthecode](https://avatars.discourse-cdn.com/v4/letter/h/f07891/32.png) [@hitthecode](https://phaser.discourse.group/u/hitthecode)\
**Post date:** [March 19, 2023, 7:25pm UTC](https://phaser.discourse.group/t/tilemap-image-position-not-aligned-with-tilemap-layer/13042/3 "2023-03-19T19:25:22Z")

</div>

thanks samme for looking into this, but I’m not sure what exactly “looks right to you”:

- The tilemap layer is as expected for me, it was created at 10/10, so top left is at 0/0 with width and height being 20px
- what does not look as expected for me is: the image should also display top left (0/0), but it is 10 px off for both x and y

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 19, 2023, 7:59pm UTC](https://phaser.discourse.group/t/tilemap-image-position-not-aligned-with-tilemap-layer/13042/4 "2023-03-19T19:59:20Z")

</div>

Oh, I think I see the confusion.

In Phaser v3.55 tilemap layer `getBounds()` is incorrect. In that example `dictLayer.getBounds()` includes `{ x: 0, y: 0 }` but the correct values are `{ x: 10, y: 10 }`. You can “fix” this with

```
dictLayer.setOrigin(0, 0);

```

The tilemap layer is the black square and it appears in the right place, top-left at (10, 10). The white square is just the game background color.

---

<div class="post-metadata">

**Author:** ![hitthecode](https://avatars.discourse-cdn.com/v4/letter/h/f07891/32.png) [@hitthecode](https://phaser.discourse.group/u/hitthecode)\
**Post date:** [March 19, 2023, 8:38pm UTC](https://phaser.discourse.group/t/tilemap-image-position-not-aligned-with-tilemap-layer/13042/5 "2023-03-19T20:38:01Z")

</div>

thanks! that’s what I was looking for!

Unfortunatley, I don’t have time to contribut to phaser at the moment, but I think this should be fixed as this results in click events getting tracked on the wrong bounding box.

since I am trying to track click events, I also had to apply setOrigin() to the gameObject I receive after I doing matter.add.gameObject(dictLayer)