A TiledLayer is built for a grid of squares, not a grid of hexagons. You're going to need to implement a kind of "hex grid manager". This is not a big deal... Hexic works the same way.
Obviously, an image is always rectangular. Placing the hexagons on top of each other is easy:
But left to right is slightly more difficult. The trick is to get the proportions of the hexagon right, so you can work out the position of the next column from the size of the image. Look at the web game you posted, you'll see that the hexagon image is 38 pixels tall... an even number makes it easy to work out the "y" value of the next column.
int totalHeight = hexagonImage.getHeight();
y += totalHeight;
In the 'x' direction, they need to overlap, so you need to advance the x by some fraction of the total image width. This fraction is: the width of the hexagon's base (the bottom side), plus half of the remaining image width. (See attached image.)
y += totalHeight / 2; // or -=, if the next column starts higher
In the attached image, the total width divides by six, and the base width is:
int totalWidth = hexagonImage.getWidth();
int baseWidth = (some fraction of the total width)
x += baseWidth + ((totalWidth - baseWidth) / 2);
The proportions are not great, I'm sure you can come up with something better. Keep the divisor small, though, or it will become hard to make images of different sizes. I made mine square, but the web-game, the hexagons are short and wide - this probably looks more appealing.
int baseWidth = (totalWidth / 6) * 4;