Mapping Game Worlds with Leaflet

Over the last few years a lot of video game fan websites have been publishing interactive mapped guides to game worlds. One way to create a powerful interactive game world map is to use the Leaflet mapping platform. To do this you first need a static image map of your game world. You then need to turn your image map into map tiles which can then be used with the Leaflet platform.

If you want to create your own map tiles to use with Leaflet.js Zoomable Images with Leaflet provides a very detailed tutorial explaining how you can use GDAL2Tiles and MapTiler to render map tiles from an image and use them with the Leaflet mapping platform.

Another option is to use Zoomify to create your map tiles. Showing Zoomify Images with Leaflet explains how to do this and includes a Leaflet plugin to add the tiles to your Leaflet map.


The ArcheAge Interactive Map is a map of the game world used in the MMORPG ArcheAge. The game world of ArcheAge consists of three continents, Haranya, Nuia and Auroria.

The map allows you to explore all three continents and to view important locations in the game, including Nui's tears, ships, portals, ore, trees and animals.

 
DayZDB is another Leaflet powered map of a computer game world. DayZ is a multiplayer open world survival horror game that takes place in the fictional post-soviet country of Chernarus.

The DayZDB map includes a number of options to refine the markers displayed on the map. The map sidebar includes buttons to filter the displayed markers by Residential, Military, Farm and Industrial.