# Really struggling with JSON tilemap

**URL:** <https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450>\
**Category:** Phaser 3\
**Created:** [October 25, 2022, 2:26am UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450 "2022-10-25T02:26:01Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![LCA102](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/lca102/32/7020_2.png) [@LCA102](https://phaser.discourse.group/u/LCA102)\
**Post date:** [October 25, 2022, 2:26am UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450/1 "2022-10-25T02:26:01Z")

</div>

Hi

I’m trying to implement a simple tilemap in my game but I’m stuck in Invalid Tilemap Layer ID error.

My code:

```javascript
        function preload() {
            this.load.image("player", "assets/Texture/TXPlayerFront.png");
            this.load.image("floorTiles", "assets/Texture/TXTilesetGrass.png");
            this.load.image("wallTiles", "assets/Texture/TXTilesetWall.png");
            this.load.tilemapTiledJSON("level1", "assets/Texture/map.json");
        }

        function create() {
            console.log(this.cache.tilemap.get('level1').data)
            this.add.image(200, 200, "player");
            const map = this.make.tilemap("level1")
            const floorTileset = map.addTilesetImage("TXTilesetGrass.png", "floorTiles")
            map.createLayer("floor", floorTileset)
            const wallTileset = map.addTilesetImage("TXTilesetWall.png", "wallTiles")
            map.createLayer("walls", wallTileset)

```

The console.log is printing this infos:

```javascript
{
    "layers": [
        {
            "name": "floor",
            "tileset": "TXTilesetGrass.png",
            "data": [...]
        },
        {
            "name": "walls",
            "tileset": "TXTilesetWall.png",
            "data": [...]
        }
    ],
    "tilesets": [
        {
            "name": "TXTilesetGrass.png",
            "imagewidth": 256,
            "imageheight": 256,
            "tilewidth": 32,
            "tileheight": 32
        },
        {
            "name": "TXTilesetWall.png",
            "imagewidth": 512,
            "imageheight": 512,
            "tilewidth": 32,
            "tileheight": 32
        }
    ],
    "canvas": {
        "width": 800,
        "height": 608
    }
}

```

The JSON file has this infos in “layer”. I used this site to create it [Online-Tile-Map-Editor](http://riskylab.com/tilemap)

```javascript
    "layers": [
        {
            "name": "floor",
            "tileset": "TXTilesetGrass.png",
            "data": [...]
        },
        {
            "name": "walls",
            "tileset": "TXTilesetWall.png",
            "data": [...]
        }
    ]

```

I can’t get rid of this error.  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/2/2b150c225633bb085deeb06f911041fd49a6b0c2.png)

I have read [this](https://newdocs.phaser.io/docs/3.54.0/focus/Phaser.Tilemaps.Tilemap-createLayer). It states that “The layer array index value, or if a string is given”. I’ve tried using map.createLayer(“0”, floorTileset) and map.createLayer(0, floorTileset), still the same error.

Any help? I don’t even know what it means, my JSON doesn’t have any other info.

---

<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:** [October 25, 2022, 2:33am UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450/2 "2022-10-25T02:33:24Z")

</div>

Change to

```
const map = this.add.tilemap("level1");

```

---

<div class="post-metadata">

**Author:** ![LCA102](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/lca102/32/7020_2.png) [@LCA102](https://phaser.discourse.group/u/LCA102)\
**Post date:** [October 25, 2022, 7:56pm UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450/3 "2022-10-25T19:56:51Z")

</div>

Throws another error:

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/18f87de0b8ddd9234c26ad3a880be72e793c6679.png)

Any clue of what it means?

---

<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:** [October 25, 2022, 8:16pm UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450/4 "2022-10-25T20:16:07Z")

</div>

I’m not sure that map will work if it wasn’t made in Tiled. But you can try adding

```
"orientation": "",

```

to the root object of the JSON file.

---

<div class="post-metadata">

**Author:** ![LCA102](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/lca102/32/7020_2.png) [@LCA102](https://phaser.discourse.group/u/LCA102)\
**Post date:** [October 25, 2022, 9:17pm UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450/5 "2022-10-25T21:17:33Z")

</div>

I created the map using Tiled now, still can’t make it work, same errors as before.

Should I just give up on trying to use JSON? Doesn’t make any sense, I’ve tried a bunch of examples and none of them is working.  
I’m using the most recent Phaser.JS downloaded from the website, I’ve tried in a Code Sandbox as well and won’t work either.

Using “name” property;

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/02671cf92c1d3803bac56abf38339358608f0d22.png)

Using “id” property;

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/7c057d24f1cd7bc7f4225feed51246fa5c835df4.png)

Full Tiled JSON here:

> **JSON**
>
> ```javascript
> { "compressionlevel":-1,
> "height":19,
> "infinite":false,
> "layers":[
> {
> "data":[1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
> 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 330,
> 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 384, 17, 18, 19, 20, 17, 18, 19, 20, 20, 17, 18, 19, 330,
> 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 376, 25, 26, 27, 28, 25, 26, 27, 28, 28, 25, 26, 27, 330,
> 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 384, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 330,
> 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 359, 384, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 330,
> 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 330,
> 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 330,
> 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 330,
> 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 330,
> 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 330,
> 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 330,
> 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 330,
> 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 330,
> 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 330,
> 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 25, 26, 27, 28, 330,
> 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 330,
> 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9, 10, 11, 12, 9,
> 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17, 18, 19, 20, 17],
> "height":19,
> "id":1,
> "name":"Background",
> "opacity":1,
> "type":"tilelayer",
> "visible":true,
> "width":25,
> "x":0,
> "y":0
> }, 
> {
> "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0,
> 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0, 0, 34, 34, 0,
> 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0, 0, 34, 34, 0,
> 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 34, 34, 0,
> 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 34, 34, 0,
> 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 34, 34, 0,
> 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 34, 34, 0,
> 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0,
> 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
> "height":19,
> "id":2,
> "name":"Pathing",
> "opacity":1,
> "type":"tilelayer",
> "visible":true,
> "width":25,
> "x":0,
> "y":0
> }, 
> {
> "data":[114, 115, 116, 167, 213, 214, 213, 214, 213, 214, 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 167, 164, 165,
> 130, 131, 132, 183, 229, 230, 229, 230, 229, 230, 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 183, 180, 181,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
> 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
> 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 90,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 106,
> 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 122,
> 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 162, 163, 164, 165, 165,
> 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 178, 179, 180, 181, 181],
> "height":19,
> "id":3,
> "name":"Walls",
> "opacity":1,
> "type":"tilelayer",
> "visible":true,
> "width":25,
> "x":0,
> "y":0
> }],
> "nextlayerid":4,
> "nextobjectid":1,
> "orientation":"orthogonal",
> "renderorder":"right-down",
> "tiledversion":"1.9.2",
> "tileheight":32,
> "tilesets":[
> {
> "firstgid":1,
> "source":"TXTilesetGrass.tsx"
> }, 
> {
> "firstgid":65,
> "source":"TXTilesetWall.tsx"
> }, 
> {
> "firstgid":321,
> "source":"TXTilesetStoneGround.tsx"
> }],
> "tilewidth":32,
> "type":"map",
> "version":"1.9",
> "width":25
> }
> 
> ```

> **Preload and Create code**
>
> ```javascript
> function preload() {
> this.load.image("player", "assets/Texture/TXPlayerFront.png");
> 
> this.load.image("floorTiles", "assets/Texture/TXTilesetGrass.png");
> this.load.image("wallTiles", "assets/Texture/TXTilesetWall.png");
> this.load.image("pathTiles", "assets/Texture/TXTilesetStoneGround.png");
> this.load.tilemapTiledJSON("level1", "assets/Texture/testtilemap.json");
> }
> 
> function create() {
> console.log(this.cache.tilemap.get('level1').data)
> this.add.image(200, 200, "player");
> const map = this.make.tilemap("level1")
> const floorTileset = map.addTilesetImage("TXTilesetGrass.png", "floorTiles")
> map.createLayer(1, floorTileset)
> const pathTileset = map.addTilesetImage("TXTilesetStoneGround.png", "pathTiles")
> map.createLayer(2, pathTileset)
> const wallTileset = map.addTilesetImage("TXTilesetWall.png", "wallTiles")
> map.createLayer(3, wallTileset)
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![akumagamo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/akumagamo/32/6031_2.png) [@akumagamo](https://phaser.discourse.group/u/akumagamo)\
**Post date:** [October 26, 2022, 7:47am UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450/6 "2022-10-26T07:47:14Z")

</div>

I assume there are multiple issues:

1. if on can trust [the documentation](https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html#Tilemap__anchor), you should load the map like this `const map = this.make.tilemap({key:"level1"})` setting the `key` of the `Phaser.Types.Tilemaps.MapDataConfig`.
2. When this is done there is an new error  
 ![screenshot0001](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9b991abf216f060ad657cf31f1d0b7546775c741.png)  
,what made me inspect the json file. And as the error message stated, you have to use emed tileset, so not creating a tileset(aka) out of multiple image _(one image per tileset)_.  
 ![screenshot0002](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/06f2f2131c234afc2f6a460ef148104f741dd6de.png)

I hope this insides can solve your problems.

---

<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:** [October 27, 2022, 4:31pm UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450/7 "2022-10-27T16:31:29Z")

</div>

You need to use either `add.tilemap('level1')` or `make.tilemap({ key: 'level1' })`.

---

<div class="post-metadata">

**Author:** ![akumagamo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/akumagamo/32/6031_2.png) [@akumagamo](https://phaser.discourse.group/u/akumagamo)\
**Post date:** [October 27, 2022, 6:23pm UTC](https://phaser.discourse.group/t/really-struggling-with-json-tilemap/12450/8 "2022-10-27T18:23:44Z")

</div>

Btw.: My point mentioning _“collection of Images, will not work”_ was a wrong assumption, you would just have to embed the tileset in the map  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/1e4a8173bd70fc6d5f95275c826458eb5505f7ab.png)  
_(I could swear, I was not able to select this option, when using “colleciton of images”, but it was a long time ago where I tried this the last time)_