Going Nuts with Leaflet

Table of Contents

  1. Introduction
  2. Acknowledgements
  3. Tech We'll Use
  4. Step -1: Set-up > Back End
  5. Step 0: Set-up > Front End
  6. Data: You can get it!
  7. Tile Basemap
  8. Step 1: Leaflet...at last!
  9. Step 2: Adding Feature Data > SSA Capitals
  10. Step 3: Custom Icon
  11. Step 4: Pop-up Window
  12. Step 5: Adding Feature Data > SSA States
  13. Step 6: Custom Area Fill

Introduction

@maptimelex & @rmcooper4

These are amazing times we live in. Just pat your mouse and keyboard with your paws a few times and you can have an informative, interactive map up on the tubez in no time! Certainly much easier than finding those acorns in the park you were hiding from Jerry!

Alas, using open source components, the following instructions will get you flying into web-mapping. This exercise assumes a knowledge of HTML and Javascript - but not at all required. This will step through each phase of what you see to the right. Just keep on scrolling down in this panel. If you get lost at anytime just ask for help. Someone will be there to scrape you off the road and get you back on your feet again!

Enough chatter! Let's go nuts with Leaflet!

Acknowledgements

- or - "You didn't build that" - Ryan Cooper - Barack Obama

When you're a squirrel, pretty much everyone is a giant. And it is on the backs of giants that this tutorial was built. Special squeek outs to:

  • Jonah Adkins (maptimeHRVA)
    • The majority of this tutorial is an adaptation of what Jonah put together for maptimeHRVA's October meetup.
  • Andy Woodruff (maptimeBoston)
    • maptimeLEX and maptimeBoston have an unlikely yet indelible bond. Andy Woodruff's tutorial involving rat mapping not only inspired me to carry on the mapping of rodent friends, but it also offered a lot of inspiration for the general flow of this tutorial.
  • Nate Goldman
    • Nate's layout for his hamburger map inspired Jonah whose layout inspired me. As such, Nate gets a squeek out. Check out his mouth-watering map!

More generally, I have to give a high-paw to the maptime community for being a great network of people commmitted to opening up the tools for creating maps to a broader audience


Finally, Awesome Inc. They rule because they have been so generous in giving maptimeLEX a space and time to come together and do mappy things. They are a great partner to have!


Tech We'll Use

  • Leaflet
  • GeoJSON.io
  • MapStack
  • Text Editor
  • Python SimpleHTTPServer

Step -1: Set-up > Backend

Before we get to mapping, we need to ensure that our project is organized and that we can check our progress in the browser as we add new features.

First, create a directory somewhere on you computer where you'll store your project. Perhaps give the folder a descriptive name like "leaflet-squirrels".

Next, you'll want to start a local server using the Python module SimpleHTTPServer. If you don't have Python, grab it here. Version 2.7.x is the one you want. Python for Beginners has a nice walk-through for starting your server, but you really just need to open Terminal(OSX/Linux)/Command Prompt(Windows), navigate to your project's directory, and input the following command: 

python -m SimpleHTTPServer

Just add the URL below into your browser and you'll be able to see your project as if it were online! 

http://127.0.0.1:8000

If you don't like this approach, no worries. You might be interested in using something like GitHub Pages or Neocities to host your project. The upshot is that your project will be online while you're making it.

Step 0: Set-up > Front End

Using your text editor, set up a simple HTML file. Call it "index.html." We'll also add the container and some basic styling for our map

Example | Code

Data: You can get it!

When trying to learn a new mapping technology, it can sometimes be easy to get hung up on what to map as an example. Lots of things exist on this planet and that means there are a lot of things that can be mapped. To deal with the data hangup, I've taken the liberty of providing some prepared data for you.

January 21st is Squirrel Appreciation Day. This is according to the internet, so you know it's true! As such, we're going to be doing some mapping with a squirrel them (Take that maptimeBoston rats!). Now, Lexington doesn't collect data about squirrels. In fact, there's not a lot of publicly available data about squirrels. They can be a very withholding species, so I had to get creative. I really enjoy speculative cartography like Andrew Shears' map of the US broken into breakaway states.

I wondered "What if the squirrels took over? What would the newly drawn boundaries of the Squirrel States of America look like?"

It's difficult to understand the political psychology of squirrels. If you've ever seen them battle over who gets to be on what side of a tree, you know that territorial demarcation is generally a fluid concept. However, let's suspend reality for a bit and assume that squirrels deal in a post-Westphalian notion of territory (whatever that means!). Using data from the Geographic Name Information System (GNIS), a part of the USGS I found 21 settlements (census designated areas, locales, and populated places) that included the term "squirrel". This data includes latitude and longitude so it can be mapped with minimal clean-up.

There are two main datasets we'll be working with that are derived from this GNIS data. The first one is called ssa-capitals.geojson. This is a point dataset that shows the location of the 21 squirrelly places filtered from that full GNIS dataset. We'll be using them as capitals for our Squirrel States of America (SSA). Check it out here.

The second dataset is ssa-states.geojson. This is polygon dataset showing the extent of each squirrel state in the SSA. They are simply Voronoi polygons created in QGIS that were clipped by the boundaries of the the USA.

Voronoi diagram - Wikipedia, the free encyclopedia

Check it out here.Surely there are other more creative methods for drawing these boundaries. Feel free to create your own. I suggest using a cool tool called GeoJSON.io.

Download the following files to your project directory

  • ssa-capitals.geojson
  • ssa-states.geojson
  • squirrel-king-icon.png (more on this later)

Tile Basemap

The second element of this project is the basemap. To keep it simple, we are going to use a service provider rather than build our own server stack. We'll learn more about that in the future, but let's make things easier on ourselves with the help of our friends out west at Stamen Design.

MapStack is an awesome project that will allow us to create some free map tiles using OpenStreetMap. The image filters and effects offer a wide variety of customization. When you're happy with what you've came up with copy/paste the tile url of the image. It's rather long, but required for inserting into our code. For this example our url is 

http://{s}.sm.mapstack.stamen.com/((naip,$fff[difference],$fff[@60],$fff[hsl-saturation@90])[multiply],(mapbox-water,$fff[difference],$000[@60],$090d11[hsl-color]))/{z}/{x}/{y}.png

Step 1: Leaflet...at last!

Leaflet is the magic behind many of today's web-mapping applications. It provides an extensive library of functions supported by a dedicated team of contributors. We are going to use the Leaflet.js library to create our map. Using the documentation from the Leaflet.js website, we are going to start with the most basic components needed for a map. We are going to:

  1. Add Leaflet starter code
  2. Specify the center lat/long of our starting view
  3. Add our tile layer URL from MapStack

Example | Code

Step 2: Adding Feature Data > SSA Capitals

It's cool that we hae our basemap down, but the squirrels want more! Let's add some of the .geojson file we looked at earlier. An added step is using a jQuery library to handle the interaction of our data.

We are going to:

  1. Reference jQuery in the html file's head
  2. Load our data
  3. Add it to the map

Example | Code

Step 3: Custom Icon

Our country has been taken over by egomaniacal squirrels. Would they really be satisfied with DEFAULT icons? We must keep them pleased! Fortunately, Leaflet allows us to use our own icons. Here's one that will remind our squirrel overlords that they indeed are the rulers of us all!

Mwahsqueeksqueeksqueeksqueek!!!!

Only one step here lets:

  1. Add a new icon

Example | Code

Step 4: Pop-up Window

The squirrels' eyes gaze on their underlings, but it'd be nice to know more about these squirrel capitals. Let's add some pop-ups from our data's attributes:

  1. Create the pop-up
  2. Format the text
  3. Optionally style with css

Example | Code

Step 5: Adding Feature Data > SSA States

We have a map of our squirrel capitals, but what about the states? Let's see what areas are under the dominion of each squirrel capital. Adding the states polygons is a similar process to when we added the capitals. We don't have to reference jQuery again. We only have to do that once!

We have to:

  1. Load our data
  2. Add it to the map

Example | Code

Step 6: Custom Area Fill

Our squirrels look so posh in wearing their crowns and ontop of their simple, yet elegant basemap. They deserve better than that garish blue area fill for their respective states. Luckily, it takes just a little extra code to get our map styled. We're going to keep it simple, keeping the fill of the a transparent black and showing where their boundaries would be.

We've got two steps:

  1. Create style object (styleStates)
  2. Toss that style object into our call for ssa-states.geojson

Example | Code