Home › Projects › Elemap

Elemap

Zero-dependency TS library for creating interactive game maps with HTML and CSS

GitHub | npm

Overview and highlights

• Multiple types of maps tiles supported: rectangle (square/irregular) and hexagon (pointy/flat, odd/even).
• Support of arbitrary map shapes, as tiles are not required to be put sequentually and can be hidden.
• Various methods to work with the grid, like creating new tiles, getting tile neighbors, and so on.
• HTML & CSS rendering, meaning you can easily modify the map and extend its functionality with JS.
• Spacing between tiles, outline on hover, rounded corners, and more included by default.
• Styling system based around CSS with the ability to set custom visuals for each tile.
• Tile shapes are set using clip-path to ensure correct mouse behaviour.
• Content system, allowing to set external HTML elements as related to the map or even a specific tile.
• Extension system to store arbitrary data related to the map right in its object.
• Export and import functionality, allowing you to retrieve the map data and recreate it if needed.

Live demo

• Pointy Odd Hexagon with Tilted – my other library made for map viewing
• Hexagon: Pointy Odd, Pointy Even, Flat Odd, Flat Even
• Rectangle: Square, Irregular