Making online interactive maps with Leaflet (Part 2)

In the first part of my post about making maps with Leaflet, I had explained the basics of creating an HTML file with the code that defines the base layer, coordinates and size of your map. This is what I call a basic map that shows a specific location. In Part II, I will explain how to create a custom map that uses specific features to visualize your data.

As I mentioned in Part I, I had extracted data related to Greek stores in Montreal that existed between 1950-1980 from old newspaper ads. What I wanted to visualize with my map was the location of the store, name of the store and its industry, date of its ad published in the newspaper and a digitized image of the ad. In order to show all this on my map, I needed to customize my map with the following two features: pins that correspond to each location and clickable pop-ups that show the textual and visual data I have. Although Leaflet’s documentation is straightforward and useful, it might be intimidating for beginner users (like myself) to review all this information and filter out what is not relevant to their project. For the sake of simplicity, among all the features Leaflet offers, I will explain only the ones I used in my map.

Now, you can re-open the HTML file you created and start adding two custom features: pins and pop-ups. First, we’ll define the marker we would like to use as such:

var youriconname = L.icon({
iconUrl: ‘yourfoldername/youriconname.png’,
iconSize: [30, 40],
popupAnchor: [0,-15]
});

By default, Leaflet gives you a marker that is used in most maps however you can either buy or download free pins and use the ones you prefer to give your marker a more customized look. For example, I used a custom pin that corresponds to the industry of the store. The parts in italics are the ones you need to change according to your file names and preferences. “iconSize” refers to the size of the marker and “popupAnchor” refers to the position of the popup box in relation to the pin. My variable looks like this:

var storeIcon = L.icon({
iconUrl: ‘pins/clothings.png’,
iconSize: [30, 40],
popupAnchor: [0,-15]
});

Now the computer knows which icon we want to use in our map as a marker with its defined features, but it does not yet know where we want it to appear. For this, we need to actually add the marker with its coordinates:

L.marker([coordinates], {icon: youriconname})
.addTo(map)
.bindPopup(yourpopupname);

Again, the parts in italics should be edited to show the desired coordinates and the icon that is defined above. Here is how it looks in your code:

L.marker([45.509309, -73.573566], {icon: storeIcon})
.addTo(map)
.bindPopup(customPopup1);

With this part of the code, the computer knows that we have an icon called “storeIcon” that uses an image called “clothings.png” which is in the “pins” folder. It also knows that it has to appear at coordinates “45.509309, -73.573566” and that it should show us a popup when clicked. Now, our first marker is set, but we have not given any information about the popup window to the computer yet. In other words, it does not know what “customPopup1” refers to. The following variable is where you define what you would like to see in that popup window:

var customPopup1 = “information you would like to put in HTML format”

It is basically an HTML code and you can define a title and a description. You can also insert a link or an image. Here is how mine looks:

var customPopup1 = “<b>Ariston: Dresses, Fabrics.</b><br/> Advertisement year: 1964<br/><br/>Address: 3496 Park Avenue<br/><img src=’img/Photo1Ariston.jpg’ alt=’Ariston’ width=’300px’/>”;

Now, the computer knows what it should show you when the marker is clicked. You can add as many markers and popups as you like depending on your data. If everything is defined well in your code, your map should look like this.

Some users prefer creating full-screen maps, but I used a smaller-size map for this post in order to explain how to insert a full-screen button. Please note that you can always adjust the size of your map as explained in Part I. However, if you want to embed a small map into your page rather than devoting an entire page to it, you can keep its size small and add a full-screen button. First, you need to download the script file for this feature from Leaflet plugins and then add the following code:

map.addControl(new L.Control.Fullscreen());
L.control.scale().addTo(map);

The last feature I would like to show in this post is the switch layers feature that allows you to alternate between layers of your preference without changing anything else in your map. I used two OSM layers in my map, the default one and the black and white one. To discover more layers with their codes, you can use this source.

After choosing the layer you want, all you need to do is to add it as your second base layer in your layer variable. You can refer to Part I for the code that adds a base layer to your map. Using the JS variable provided in the above-mentioned source, you can easily tell the computer that you want to use two base maps. In order to alternate between layers, you also need a button that would offer you the selections when clicked. Here is how you would define it:

var map = L.map(‘map’).setView([45.517028, -73.590247], 13).addLayer(osm); (this is your map variable, please refer Part I to remember)
var baseLayers = {
“OpenStreetMaps”: osm,
“Black & White”: OpenStreetMap_BlackAndWhite
};

If you open your HTML index file now, you should be able to see a new button with two options: “OpenStreetMaps” and “Black & White”. Click on both to see how your map changes.

Leaflet offers a myriad of JS packages that allow you to customize your maps. Depending on how comfortable you are with coding, you can explore the other options outlined in Leaflet’s reference documents. This post is intended only for those who have a basic knowledge of coding and digital mapmaking and for anyone interested in DH!

Always remember to:
• Organize your directory well! Create different folders for pins and images you use for the popup.
• Make sure that the images you define in code (.png or .jpg format) are located in the same directory as your index HTML file.
• Not forget to download its script (JS file) from Leaflet and place it in your directory, when you add a full-screen button to your map.