If you study or teach humanities and social sciences and are interested in digital tools, you have probably heard of abbreviation: GIS. GIS stands for Geographic Information Systems and refers to data storage, manipulation and management tools that focuses on spatial and geographic data. I know that this definition seems quite abstract but basic usage of GIS tools in digital humanities is digital map making and geo-spatial analysis. Although GIS tools are very useful in web mapping, it is also possible to create your digital maps without using any GIS software if no geo-spatial analysis is needed.
Do we really need to have any knowledge of GIS software to make maps?
Well, the answer is, “it depends”. It depends on the purpose of your map. If your project requires some sort of analysis such as measuring, monitoring, management etc. and you have research questions that require analysis, it is better to start considering one of the GIS tools such as ArcGIS (ArcMap) or QGIS (free open source). However, if your map’s goal is to display something rather than answering questions, Leaflet offers a simpler option to make digital maps. So, there is no need to panic if you do not have any knowledge of GIS
What is Leaflet and Why Leaflet?
Leaflet is an open-source JavaScript library that allows users to produce their own interactive maps for different purposes. In this first post, I will mostly focus on how it can be used to create a digital map and in the second part, I will explain how it can be used to show research data. I will provide the example of a map that I created for the “Immigrec Project”, a DH and oral history project that aims to study Greek immigration to Canada (https://immigrec.com/en). My map is not live yet because the project’s new website is under construction.
To create a map using Leaflet, all you need to know is basic coding and what I mean by basic here is as simple as knowing what an HTML page looks like. While making your own interactive map with Leaflet, most of the time you will be copying and pasting from the examples provided on Leaflet website.
With Leaflet, you can make interactive maps, meaning that your users will be able to use the features that you add to your map such as zooming in/out, having markers and clicking on them to see pop-ups, changing layers, full screen and so on. Secondly, you can embed this interactive map in your project’s website.
Steps to make your digital map:
1. The first thing you need is to download the last version of Leaflet (the folder that contains the JS files) and put it in the future directory of your map. Then you can open a text editor and start writing your HTML page with your <head> section. The <head> is where you put the title of your map along with the reference to the Leaflet file package. You can refer Leaflet Quick Start Guide here to see how Leaflet CSS file should be referred in your code: https://leafletjs.com/examples/quick-start/
2. Secondly, you will need to define your map as a div element with its size defined in pixels in the <body> part. After creating the whole page, you can always change this value depending on what size you would like to have. Do not forget that everything you will be writing hereafter must be within <body>.
3. In the next step, you will be writing the <script> part of your code. You will start with variable declaration. The first variable to declare is your ‘map’ variable. In your ‘map’ variable, you will decide how you refer you map in the rest of the code, your map’s geographical coordinates (latitude and longitude values) and the zoom level. In my map which shows Montreal, the geographical coordinates are different than the ones seen on the Start Guide.
My map variable:
var map = L.map(‘map’).setView([45.517028, -73.590247], 13)
The second variable to declare is your map’s tile layer. You need to decide how your map looks like. The map seen in the Guide uses mapbox.streets tile layer. I used OSM (OpenStreetMap) tile layer in my map as you see can below. You can get different tile layers here if you want to customize more: https://leaflet-extras.github.io/leaflet-providers/preview/
Figure 1: Mapbox tile layer
Figure 2: OSM tile layer
If you followed the instructions until here and ended your HTML document, congratulations on creating your digital map showing the coordinates you just defined! Now, you can continue adding more features that allow your map to include some data.
For my map, I had data about Greek shops (name, year, type, address, etc.) that existed in Montreal between 50s and 80s. I found the coordinates of each shop and defined them as variables to add markers corresponding to each address. Then, I defined pop-ups as variables, so they appear when the markers associated to them are clicked. This may sound complicated but in the next part I will explain how to create and customize Leaflet functions without being lost in Leaflet’s Documentation. You will see that it is not as hard as it sounds!
A comprehensive list of DH GIS projects:
http://anterotesis.com/wordpress/mapping-resources/dh-gis-projects/
Example of an interactive map created with Leaflet:
http://numismatics-medieval.dioptra.cyi.ac.cy/?q=location-map
Use of Leaflet for Historical Projects and its explanation:
http://jarednielsen.com/pictorial-st-louis/index.html
The Digital Orientalist 
6 thoughts on “Making online interactive maps with Leaflet (Part 1)”