A javascript library to load TMX files (used in the Tiled Map Editor)


  • Easy loading of TMX Files
  • Easy access to Tile Layers and Object Layers
  • Easy access to Objects
  • Easy access to Data (CSV Format Only so far)


Use the W,A,S and D keys to navigate around this small map (Objects are bordered in red):

Running the Tests

By downloading and hosting the files and accessing testRunner.html you can run some tests which exercise the various properties discussed above

View the Latest Test Run

Note: When running locally, Chrome errors with the warning:

XMLHttpRequest cannot load file:<tmxfile> Origin null is not allowed by Access-Control-Allow-Origin.

To fix this either run Chrome with the --allow-file-access-from-files option. Or serve the files from a server.

Downloads and Source Files

View on Github

Grab the files as a ZIP File

Grab the files as a TAR Ball

How to use

Make sure you have include jquery, and tmx-loader.js

<script type="text/javascript" src="assets/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="tmx-loader.js"></script>

In your javascript files you can then simply call:


To load your TMX File. The following is a quick review of the common functions:


//Common Map Properties;;;; 

//Accessing Layer Data[0].name;[0].data[y][x]; //Get the value of the 1st tile map layer at co-ordinates (x,y);

//Accessing Object Groups['Enemies'].objects.length; // Get the number of objects in the Object Group 'Enemies'['Enemies'].objects[0].name; //Get the name of an object

//Common Object Properties['Enemies'].objects[0].x ;['Enemies'].objects[0].y;['Enemies'].objects[0].width;['Enemies'].objects[0].height;

//Custom Object Properties (User Specified)['Enemies'].objects[0].propeties['state'];