Digital Mapping Workshop – Part 3c: Hands-on Leaflet Tutorial

Let’s dive into making our very first web map!

1) Setting up your HTML page:

  1. Open a text editor (we recommend Sublime Text 2)
  2. Start with a basic HTML page, as follows:
  3. Add a section for the map, called “div”:
  4. Add some CSS to give spacing for the div and the overall body of the page:

2) Adding Javascript Libraries:

Now that our page is setup, we can begin with adding content, instead of creating our own applications, we can add-on other functions to our website by including Javascript Libraries.

  1. First we will bring in Leaflet which is our mapping library:
  2. Next is jQuery for making Javascript easier and less complicated:
  3. (Optional) For prettier styles we can also include Bootstrap:

3) Creating your Leaflet Map:

  1. So far, your HTML page should look like the following:
  2. We will add a function for the Leaflet map that loads with the page, like so <body onload=”init()”>
  3. Next, put this init function below the header:
  4. Save your HTML page and you will now see a Leaflet map centered around our location!

Example

4) Add a marker:

You can create markers in Leaflet by using a basic  L.marker([lat],[long]).addTo(map), but we can automate this process by creating a function, like follows:

  1. We’ll give a name to the function “createMarker” and 3 parameters; “latitude”, “longitude”, and “popupContent”:
  2. Next let’s use the parameters to create the markers in the function:
  3. Finally, we want to createMarkers when the page loads, so at the end of our init function we will add the following:
  4. Your code should look like the following:

    Example

5) Customizing it up:

Say you’d like to change your base map, you can do so by simply replacing Lines 27 to 30 (“L.tileLayer…”)on the previous sample code. But where would you find some sample base maps? Leaflet Providers which gives you both code snippets and examples of what options are available.

    1. Go to Leaflet Providers
    2. Find a base map you would like to try on the right side panel (1):
      leafletProvider
    3. Copy the “Plain JavaScript” code snippet in the top middle of the page (2)
    4. Delete the current tileLayer and add the new one, while making sure to add it to the map with .addTo(map).
    5. Your final code should look like the following:

Example

  1. Notice that Lines 28 – 30 use ESRI’s satellite base map now; and that’s all there is to change your base map!

6) Adding your data from GeoJSON.io:

GeoJSON.io allows us to author web content in various formats that can also be consumed by Leaflet (with the help of jQuery).

  1. Visit GeoJSON.io to author some points or load your data into it!
  2. Save as a GeoJSON file and move it to the same directory as your HTML webpage.
  3. Create a function called “getData” that will load the geoJSON file:
  4. Notice that “url = map.geojson” is the name as the file we just saved.
  5. Let’s add an event listener for each click, by using Leaflet’s onEachFeature function:
  6. Add the getData(); function to the init function to make it load when the page runs, and congratulations, you have successfully connected a geojson file to Leaflet, as per the sample code below:
    Example