# Tilemap not showing

**URL:** <https://phaser.discourse.group/t/tilemap-not-showing/6832>\
**Category:** Phaser 3\
**Created:** [July 1, 2020, 10:14pm UTC](https://phaser.discourse.group/t/tilemap-not-showing/6832 "2020-07-01T22:14:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![maakamihion](https://avatars.discourse-cdn.com/v4/letter/m/a88e57/32.png) [@maakamihion](https://phaser.discourse.group/u/maakamihion)\
**Post date:** [July 1, 2020, 10:14pm UTC](https://phaser.discourse.group/t/tilemap-not-showing/6832/1 "2020-07-01T22:14:21Z")

</div>

My tilemap is not showing even though there are no errors in the console. My code also seems to be correct because I have the right arguments in the right methods. Is there something I am doing wrong? I used the application Tiled to create my tilemap. In Tiled, the tilemap is orthogonal, and tiles are 16 by 16 and are formatted in CSV. Here is a [link to the JSON file](https://drive.google.com/drive/folders/1yw19ZStMmuEKKsJrobMGNRVAiopBfmQa). Any help is appreciated.

PlayScene.js:

```
class PlayScene extends Phaser.Scene {
constructor () {
    super("game");
}

preload () {
    this.load.image("tiles", "assets/tilesets/tiles_packed.png");
    this.load.tilemapTiledJSON("island", "assets/tilemaps/island.json");
}

create () {
    this.physics.world.setBounds(0, 0, 2000, 2000);
    this.camera = this.cameras.main.setBounds(0, 0, 2000, 2000);
    
    this.player = this.physics.add.sprite(config.width / 2, config.height / 2, "me");
    this.player.setCollideWorldBounds(true);
    this.camera.startFollow(this.player);
    
    this.map = this.make.tilemap({ key: "island" });
    this.tilemap = this.map.addTilesetImage("tiles_packed", "tiles", 16, 16, 0, 0);
    this.groundLayer = this.map.createStaticLayer("Ground", "island", this.player.x, this.player.y)
    this.edgesLayer = this.map.createStaticLayer("Edges", "island", this.player.x, this.player.y);
    
    
    this.playerIdleAnim = "stillNorth";
    
    this.cursors = this.input.keyboard.addKeys({
        up: Phaser.Input.Keyboard.KeyCodes.W,
        down: Phaser.Input.Keyboard.KeyCodes.S,
        right: Phaser.Input.Keyboard.KeyCodes.D,
        left: Phaser.Input.Keyboard.KeyCodes.A,
        shift: Phaser.Input.Keyboard.KeyCodes.SHIFT
    })
}

update () {
    this.movePlayer();
}

movePlayer () {
    if (this.cursors.up.isDown && this.cursors.right.isDown) {
        this.setPlayerDistSpeedAnim(1, -1, "moveNE", "stillNE");
    } else if (this.cursors.down.isDown && this.cursors.right.isDown) {
        this.setPlayerDistSpeedAnim(1, 1, "moveSE", "stillSE");
    } else if (this.cursors.down.isDown && this.cursors.left.isDown) {
        this.setPlayerDistSpeedAnim(-1, 1, "moveSW", "stillSW");
    } else if (this.cursors.up.isDown && this.cursors.left.isDown) {
        this.setPlayerDistSpeedAnim(-1, -1, "moveNW", "stillNW");
    } else if (this.cursors.up.isDown) {
        this.setPlayerDistSpeedAnim(0, -1, "moveNorth", "stillNorth");
    } else if (this.cursors.down.isDown) {
        this.setPlayerDistSpeedAnim(0, 1, "moveSouth", "stillSouth");
    } else if (this.cursors.right.isDown) {
        this.setPlayerDistSpeedAnim(1, 0, "moveEast", "stillEast");
    } else if (this.cursors.left.isDown) {
        this.setPlayerDistSpeedAnim(-1, 0, "moveWest", "stillWest");
    } else {
        this.player.play(this.playerIdleAnim);
    }
}

setPlayerDistSpeedAnim (x, y, animation, idle) {
    var scale = 1;
    
    if (this.cursors.shift.isDown) {
        scale = 8;
    }
    
    var current = this.player.play(animation, true);
    current.x += x * scale;
    current.y += y * scale;
    this.playerIdleAnim = idle;
}

```

}

screenshot:

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

---

<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:** [July 4, 2020, 5:09pm UTC](https://phaser.discourse.group/t/tilemap-not-showing/6832/2 "2020-07-04T17:09:33Z")

</div>

Zoom the camera out until you see some tiles.

My guess is this should be

```javascript
this.groundLayer = this.map.createStaticLayer("Ground", "island");
this.edgesLayer = this.map.createStaticLayer("Edges", "island");

```