Creating an Interactive World Map with Leaflet.js

I’ve been playing Dungeons and Dragons as a player for quite a while, but when the latest adventure came to a close I decided to step up to the plate and run the next campaign in my own Homebrew setting!

I really wanted to give my players a world map that allowed them to zoom and pan around to explore the world I had created with markers on towns and cities, but couldn’t find anything that fit the build, until I discovered Leaflet.js (which is even mobile friendly!)

If you’re wanting to see the end results of this project before starting, you can see the map and code at the bottom of this post. This guide will work on both Mac and Windows and whilst the guide does involve typing a little bit of code, everything is detailed below. You’ll also need Photoshop, anything higher than CS2 will work.

Getting Your World Map Ready

For the purposes of this guide, I’m going to assume that you’ve already got a world map ready to work on! If you don’t currently have one then you can generate lovely looking maps on Azgaar’s Fantasy Map Generator.

Also if anyone is interested, I will happily write a post about how I made the world map that you can see throughout this article. Let me know in the comment section!

After finalising your world map you need to convert your single image map into a collection of tiles–this is to save on bandwidth, but also provides tiles for the different zoom levels, as less detail is needed when zoomed out.

The first thing you’ll want to do is create a project folder, this will contain everything needed for the end result to upload!

To create the tiles you’ll need to use the photoshop-google-maps-tile-cutter script by bramus. This script is straightforward but can take a while depending on the size of your map. Other than the export path, you’ll want the script export settings to match the settings below. Additionally, you can change the background colour to match your water.

NOTE: Make sure that your map size is a multiple of 256, just increase your canvas size to the next multiple. (My map is 15360 x 15360)

This script also creates a Google Maps version of the image, however, due to some API changes it no longer works properly–this was the first route I went down before encountering these issues.

After you’ve created all of your tiles you’ll want to run the end results through a .png optimiser. This gets rid of unneeded data without any quality reduction. My program of choice for this is PNGYU which is based on pngquant and allows batch compressing!

To do this, drag the whole exported folder into PNGYU, and use the following settings.

When this has finished exporting, you’ll want to place the end result in its own folder within your project folder. I recommend naming this folder map, the end result should look something like this.

Getting Started With Leaflet.js

Now that you’ve tiled and compressed your map it’s now time to get started with Leaflet.js. The first thing you’ll want to do is jump over to their website, leafletjs.com. The website is extremely useful and well documented, so if you’re after additional features I recommend having a look!

Navigate to the downloads page and download the latest version (Leaflet 1.5.1 at the time of writing). After downloading you’ll want to open up your project folder and create a new folder called scripts. Then extract the .zip into that folder.

After doing this you’ll start creating the actual map! You can use any text editor, but I recommend using Notepad++ or Atom. Firstly create a new file in your chosen editor and insert the below text, with the only variable to change being the background to the same colour you used earlier.

After adding this to the file, save it to your project folder and name it index.html. If you open the file now you should be greeted by your world map! There are a couple of variables that you will need to adjust depending on the size of your world map image.

For me, the Photoshop Script created folders from 0 to 6 – which correspond to different zoom levels. Your index.html file will open to your map at zoom level 0, which for me was far too zoomed out! To fix this I changed the minZoom variable to 3–which corresponds to pressing the + button 3 times. Adjust this until you are happy with the minimum zoom value.

You will also notice that if you press the ‘Zoom In’ button several times your map will disappear completely. This is because you will only be able to zoom in the number of folders available. To fix this, you will want to set your maxZoom to the highest folder number–for me this valve is 6. If you don’t like how close you can zoom in, decrease this number further.

After you’re happy with the minimum and maximum zoom levels you can then delete the folders outside of this range, this will save you space by not uploading unnecessary files.

Creating Map Markers

Now that you’ve added and configured your map in Leaflet.js it’s time to add some markers! You’ll notice that there is already one marker in the centre of your map named LatLng. This is what you’ll be using to create additional markers.

For this section I recommend creating a spreadsheet to list all of your different towns and places that you are wanting to put markers on. The spreadsheet should include:

A unique ID

X Coordinate (First number in bracket)

Y Coordinate (Second number in bracket)

Drag the marker around the map and make note of the X,Y coordinates and give each location a unique ID–I went from East to West across my map to make sure I collated all places. Don’t worry if you miss any, you can come back and add them later!

Now that you’ve created a list of all your markers/waypoints you can begin to add them to the map! You will need to create an individual line for each, and you will want to add them underneath //Markers in your HTML file. Here are several examples from my map from the above spreadsheet.

As you can see in my example, it has created three markers on my world map which when clicked on show their place-name. The generic syntax for creating these markers is as follows, with the words in capitals needing to be changed.

After you’re happy that you have all of your markers in the right place and working, you can delete the text between //Coordinate Finder and //Markers as this is no longer required.

Grouping Markers

After adding your markers your world map might look messy due to the number of markers covering it, this is where grouping markers together is extremely useful!

The first stage to grouping your markers will be to remove some code from each marker. Currently, your markers include .addTo(map) which means that marker will be visible. Remove .addTo(map) from all of your markers, but make sure to leave the ; at the end of each line. This means that all markers will now disappear from your map.

How you decide to group your markers is entirely up to you! I broke mine up into the following categories:

Mage Colleges

Trading Posts

Cities

Towns

Forts/Castles

Temples

Once you have finalised your groups you’ll want to create your group variables–you will need one of these for each group. At the bottom of your marker section add the following code, again with the variables you need to change in capitals:

When you now load your map, you will notice that all of your markers have disappeared! In order to see the markers, use the menu at the top right of the screen to hide and show marker groups!

Now depending on how you’re planning to use this map, you’ll either want to upload the contents of your project folder to the root directory of your website. This will mean the map will load instantly when you type in your url.

If you are wanting to do something similar to the below map, instead rename and upload the whole project folder then create an iframe on your website site using the below code structure:

This project has been something I was really happy to complete. After nearly giving up I am extremely happy that I found Leaflet.js! I know that the above can be a little bit confusing so if you have any questions, drop a comment below and I’d be more than happy to answer them!

9 Comments

Absolutely! If you just want to show someone else the map, just send them over the Project Folder and tell them to open the index.html file and it will display your map! Alternatively if you have a website, upload the whole project folder to your site (this is how I’ve done it). I uploaded my map to a folder on my website called dnd, and renamed the index.html to oakla.html, which can be viewed at https://sambrooks.net/dnd/oakla as a full page map, then wherever I want to show the map as only part of the website I use an iframe with the above code as a template, for the above example the code is iframe src=”https://sambrooks.net/dnd/oakla” width=”100%” height=”600″(with <> brackets surrounding it and a closing /iframe at the end. Please let me know if you need further details! I’m happy to help 🙂

Hi, really love this project, it was exacly what I was looking for. I really wanted to try and make a free site and upload my map there yet had difficulties with many of the sites making services. When it came to uploading the map to the root directory as you said you’ve done. I was unable to reach it or upload to it my full folder.
I tried using WP like I see you have done here yet my programing skills and site making skills are basically non-existent. I was wondering if maybe you can show how to make a site for the map for free. After my research, WP seemed like the most promising option but it was too much for me to understand. If you can help with that that would be amazing.

Hey Rumi,
You don’t necessarily need access to the root folder, this was just done for simplicity, you just need to be able to upload the folder to your host just somewhere you can access the files within as part of your url.

This may be slightly harder with a free website host, as they typically offer very limited functionality in the hope you buy their packages, so am unable to advice on this really.

Once you’ve uploaded the above it’s very easy to include it on any site, for example if you add:

Happy to help! I’ll write a quick overview here, but will write a full guide at some point!

I firstly generated my map using Azgaar’s Fantasy Map Generator and set the colours to tritone for the water and a solid colour for the map, I exported this as well as the temperature and political maps.

I took the end results into Photoshop, and created a small tileset (I’ll include further details in my write up) I place the towns and other markers throughout the map using stamps. After finalising my towns I used the pen tool to create the paths between towns.

Hope that overview gives you some idea of how I made the map but will detail further in a post 🙂