[NOTICE] An updated version of this guide is available here. Please use the new version of this guide as quite a few things have been changed.

My local club are thinking about running a map based Necromunda or Warhammer 40K campaign later in the year and wanted to know if it would be possible to build an interactive campaign map to be viewed online at any time. After a little bit of research into the options available i settled on using leaflet.js to create a prototype for the club to view.

The idea is there will be a map available at the club like normal and an interactive map available online which will chronicle the results of the campaign for the players to view in filterable layers which show the progress of the campaign and its participants. You can see a demo of the map further down in this post.

Outline

The aim of this guide is to explain the process you need to go through to create a map so that other campaign organisers might be able to take advantage of it and create their own interactive campaign maps. Before we begin you will need to either clone the following git repository or download the zip file that is available there.

Interactive Campaign Map Repository

The interactive campaign map repository contains a few files and folders which i will outline below.

  • images : Contains files used for custom markers, player icons, etc.
  • interactive-campaign-map-stage-01 : Contains map tiles for stage 01 of the demo campaign.
  • interactive-campaign-map-stage-02 : Contains map tiles for stage 02 of the demo campaign.
  • interactive-campaign-map-start : Contains map tiles for the beginning of the demo campaign.
  • interactive-campaign-map.html : HTML file used to display the interactive campaign map demo.
  • interactive-campaign-map.js : Javascript file which contains the code for the interactive campaign map demo.
  • L.TileLayer.Zoomify.js : This file allows us to display Zoomify tiles with Leaflet and is originally provided by the repository available here. There have been no changes made to this file and it is only included in this repository to keep things simple and allow the demo map to work ‘out of the box’.
  • README.md : The README file of the repository which includes basic instructions to guide you through the process of creating an interactive campaign map.

You will also need to download a program called Zoomify. This program is used to create your map tiles and is available from the following link.

Zoomify Free

Demo map explanation

To run the demo map simply open the file named ‘interactive-campaign-map.html’ in a web browser. You should be greeted by the default map which shows the starting points of the demo campaigns players. The map works just like a normal map you would find on the likes of google with zooming and panning responding to input from a touch screen device or mouse like normal. 

You can click on the player icons to bring up popups and a layers filter is available in the top right corner. All marker icons can be customised to represent whatever you need but in this simple demo we only have 2, one for the players and one for battles. If you open up the layers control in the top right corner you can choose which map to show and there is also a filter for you to choose which markers you want to display on the map. These markers can all be clicked and include a popup which can be used to include whatever information you see fit.

Creating your interactive campaign map

To begin creating your own interactive campaign map first off you will need to source a suitable image to be used as the base image which we will edit and create our map tiles with. I recommend using satellite imagery for the base image as these are usually a very high resolution and are great for making an interactive map with.

Once you have sourced a suitable image to use, you need to edit it using a program such as GIMP to create the different files needed so you can show the different stages of your campaign. First off you need to separate the map up into different territories that the players will be fighting over. This can be done in a number of ways but for this guide we will keep it simple and split the map up by hand using the pencil tool provided by GIMP.

Creating the base map file

Open your source image file in GIMP and select ‘Colors’ from the top menu, then choose the ‘Colorize’ option. Play with the levels until you are happy with the effect. Next create a new layer, this can be done by right clicking your image and selecting ‘Layer > New Layer’ from the menu. In the right hand panel you will see your new layer, you can rename it by right clicking and selecting ‘Edit Layer Attributes’ from the menu and entering a suitable name.

Make sure the new layer is highlighted and selected as the active layer then select the pencil tool from the icons in the left hand panel. You can change some options in the ‘Tool Options’ panel which is also located in the left hand panel just below the tool icons. The default options are mostly fine but you can set various things like the size of the brush, opacity and what brush is used. Play about with these options until you are happy with them.

Now begin splitting up your map by drawing on your lines with the pencil tool to separate the territories as you see fit. This will take a while but can be sped up a little with this simple trick. Click a point on the map where you want a line to start, then hold down the ‘SHIFT’ key and move the mouse to where you would like the other end of the line to go then click and hold down the mouse button. You should see a little guide line showing you where the line will be when you release the mouse button, line it up until you are happy with its position and then release the mouse button. You can then move on to the next point and repeat the process by holding down the ‘SHIFT’ key and clicking when you are happy with the lines position. Following this procedure helps keep all your map lines straight and also helps to speed up the drawing process. Remember to save regularly.

Once this is finished, select the bucket fill tool and set the opacity to 50% or similar in the tool options panel on the left hand side. Choose whatever colours you like to represent the players starting territory and click inside an area you split up earlier to fill it.

Save the file and then export it as a .jpg file. This file will be used to create your map tiles for the initial map of your campaign. To create base map files for the later stages of the campaign simply duplicate the layer that includes your territories by right clicking it and selecting ‘Duplicate Layer’ from the menu, then repeat the process of filling in the new territory zones with colour. You can then hide previous stage layers from view with the eye icon in the right hand panel next to the corresponding layer before exporting the image as a .jpg file to create your map tiles with.

Create map tiles with Zoomify

To create the interactive campaign map you need to run the exported file from the previous step through a program called Zoomify. This program splits the exported image up into tiles which are used by leaflet.js to create the map. Run the Zoomify program and then drag and drop the exported file from the previous step into the Zoomify window. The window will update you on the progress and when it is finished you may close it.

Zoomify should have created a folder that holds your map tiles, copy this folder to the same location as the interactive campaign map repository. You should now have everything you need to create your interactive campaign map, for the map to work you will need some web hosting to serve your map tiles from and to host your interactive campaign map when it is finished.

Create the map

Upload the folder that you just copied from Zoomify to some web hosting and then create copies of the interactive-campaign-map.html and interactive-campaign-map.js files from the interactive campaign map repository to work on. The copy you made of interactive-campaign-map.js includes comments to help you when editing the values but i will also explain everything as best as i can below.

Open the interactive-campaign-map.js file in a text or code editor, i recommend Brackets and will be using it in this guide for its awesome ‘Live Preview’ feature. This first variable, named ‘map’, instantiates the map and sets a few required options such as the latitude, longitude and zoom level of the map as well as the URL of the map tile server and the dimensions of the original image file. Change the URL on line 3 after L.TileLayer.Zoomify to reflect where your map tiles are located on your web hosting then change the width and height attributes to the same as the base map file.

The ‘playerIcon’ and ‘battleIcon’ variables define the location and size of the image files used for the custom markers used by the map. You can use the images provided or alter these attributes and use your own. The next group of variables is used to define the content of the popup that appears when a player icon is clicked. You should rename these variables to reflect the colours you chose when creating your map in GIMP. The content accepts HTML input like link and image tags and could include things like player bios, army information and links to army lists.

The next two group of variables (redPlayerStage01Battle01Popup, bluePlayerStage02Battle01Popup, etc) is used to define the content of the popup that appears when a battle icon is clicked. These are not needed to begin with but will be used as the campaign progresses. You should comment out these variables for now, in Javascript single line comments start with // and multi-line comments start with /* and end with */.  You should rename these variables to reflect the colours you chose when creating your map in GIMP. The content accepts HTML input like link and image tags and could include things like results, pictures and words from the players.

The following group of variables (redPlayer, bluePlayer, etc) creates the player markers, sets the latitude and longitude of the marker and passes the options for the custom icon and custom popup values declared earlier for each player marker. You should rename these variables to reflect the colours you chose when creating your map in GIMP. Setting the latitude and longitude of the markers will require some trial and error to get them to display on your map, in Brackets you can ‘Live Preview’ whatever you are working on. You will need to open the copy of interactive-campaign-map.html you made earlier in Brackets for it to work and save every time you make a change to the latitude and longitude values before you see it in the preview but this will definitely make it easier to position them on your map. After this we add all the player markers to a layer group called ‘players’ and add them to the map. This group is used in the layers control to toggle the player markers on and off.

The following four groups (redPlayerStage01Battle01, redPlayerStage02Battle01, battlesStage01, battlesStage02, etc) of variables creates the battle markers for each stage, sets the latitude and longitude of the marker and passes the options for the custom icon and custom popup values declared earlier for each battle marker and adds them to their own respective layer groups. You should comment out these variables for now and you should rename these variables to reflect the colours you chose when creating your map in GIMP. Setting the latitude and longitude of the markers will require some trial and error to get them to display on your map but using Brackets like before will help mitigate this issue.

Next we create the switchable map layers which are used by the layers control. You should change the URL’s to reflect where you are hosting your map tiles. The Width and Height of the base map file must be defined and you should comment out the switchable map layers you don’t need for now so it is easier to add them back in later.

Finally we create two groups, ‘baseMaps’ and ‘overlayMaps’ which include the groups of maps and filterable items we created earlier and then create the layers control and add it to the map. The value in quotation marks is the label for the map or item and can be changed to whatever you like. The layers control will use these values to determine which layers are able to be toggled by the filter.

Upload the map

Once you have finished modifying the Javascript file to suit your needs and have it working in the Brackets ‘Live Preview’ then you are done creating the interactive campaign map and are ready to host it online with your map tiles you uploaded earlier. Upload the ‘images’ folder along with the ‘L.TileLayer.Zoomify.js’ file and your copies of the HTML and Javascript files you have been working on to the same location as your map tiles. You should then be able to visit your HTML page in a browser and see your map in action.

To finish

More detailed information and documentation can be found by visiting the following links. I hope you have enjoyed this guide and would love to see any of the interactive campaign maps you create with it. Get in touch in the comments section below and let me know how you get on ! 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu