isometric tile tiled format javascript [closed]

Question

Okay im having a problem with drawing an isometric map exported from tiled.
Here is my problem.
where it should be like this

Here is the code that i used to reproduce the 1st image, what's wrong with it?

for (var y = 0; y < this.height; y++){
            for (var x = 0; x < this.width; x++){
                counter++;  
                var sprite = this.tilemap.getSprite(this.data[ counter ], this);    
                var drawX = 0, drawY = 0;


                if ( sprite ) {     
                    var cell = sprite.cell[ this.data[counter] ];   
                    if (!cell) continue;

                    if (this.orientation == 'isometric') {
                        // Isometric maps 
                        drawX = x * cell.w;
                        drawY = y * cell.h; 
                    } 


                    if (sprite && cell){
                        Engine.currentGame.ctx.drawImage(
                         sprite.sprite.img,
                         cell.x,
                         cell.y,
                         cell.w,
                         cell.h,
                         drawX, 
                         drawY,
                         cell.w,
                         cell.h
                        );
                    }
                }       
            }
        }
        game.currentGame.ctx.restore();
        return this;
    };

UPDATE:

var counter = 0;
        game.currentGame.ctx.save();
        for (var x = 0; x < this.width; x++){
            for (var y = 0; y < this.height; y++){
                counter++;  
                var sprite = this.tilemap.getSprite(this.data[ counter ], this);    
                var drawX = 0, drawY = 0;


                if ( sprite ) {     

                    //console.log( counter );
                    var cell = sprite.cell[ this.data[counter] ];   
                    if (!cell) continue;

                    if (this.orientation == 'isometric') {
                        // Isometric maps 
                        drawX = x * cell.w;
                        drawY = y * cell.h; 
                    } 


                    if (sprite && cell){
                        Engine.currentGame.ctx.drawImage(
                         sprite.sprite.img,
                         cell.x,
                         cell.y,
                         cell.w,
                         cell.h,
                         drawX, 
                         drawY,
                         cell.w,
                         cell.h
                        );
                    }
                }       
            }
        }
        game.currentGame.ctx.restore();
        return this;

Answer 1

From the screens it's kinda obvious, that your tiles are positioned wrong.

So it seems your X axis needs to go from top-left to bottom-right and Y axis from top-right to bottom-left. Right now X goes from left to right and Y from top to bottom. Can you update your code to accommodate for that?

Also your spacing between the tiles is too big, but first - solve the first issue ;)

Answer 2

Iso-tiled maps needs "Z-axis" work, where you must draw from the upper left, moving to the bottom right, as you already know, you must overwrite already existing tiles.

Your code right now is a basic work for common 2D tilesets.

if (this.orientation == 'isometric') { // Isometric maps drawX = x * (cell.w / 2); drawY = y * (cell.h / 2); }

This should do the trick.