Mapbox

For my final project at Flatiron I (once again) dove into Mapbox, a mapping program that I’ve come to love over the past couple of years. Let’s talk more about it.

Photo by Annie Spratt on Unsplash

Easy Peasy

Perhaps its because I just have more experience reading documentation nowadays, but even when I first learned about Mapbox, I was blown away by how easy it was to get up and running. You assume that mapping data is extremely complex. It seems that finding a point on the globe, naming it, adding borders around certain places, adding custom buttons or hover actions would all be so complex, but Mapbox has a built an API that is not only accessible, but extremely robust.

Everything You Want and More

I have yet to find something that I want to do with a map that isn’t doable using Mapbox. In my final project, I utilized Mapbox to display congress members. You can hover over states, click a state, and see the congress members that exist in that state. You can also filter the data to display different congress years and switch between the House and the Senate.

Clicking on the state of New York in Congress Checker

Everything that went into this (except for the data on congress members) was built using Mapbox functionality. Not only do they have a lot that you can do to the map itself (shading, borders, tooltips) but they also have event listeners that you can tap into as well. For example, when you hover over a state, I’m able to change the shading of that state. And when you click it, you display certain data based on where that click is.

And this is only the tip of the iceberg for what this API offers. Everything from street view APIs to directions are all available, oftentimes for free. The other thing that I love about Mapbox is the ability to customize. There isn’t much in my project, but everything that you see in the map can be customized using their interactive studio, which lets be honest, is just fun.

GeoJSON

I can’t really talk about Mapbox without talking about GeoJSON which, sure, isn’t specific to Mapbox, but its a data structure that helps power Mapbox. GeoJSON is essentially a data format that allows you to map data geographically. So in the example of my app, I’m using GeoJSON data to map the border points around each state. The object essentially contains an array of longitude/latitude points that make up the border. Here’s an example from Wikipedia. You can se that there are different features (points) and the features have coordinates. There are also lines with more than one coordinate to define the line.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "prop0": "value0"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
            [100.0, 1.0], [100.0, 0.0]
          ]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": { "this": "that" }
      }
    }
  ]
}

At first look, it seems complex, but once you dive in a bit it makes a lot of sense. The other good thing about GeoJSON is you generally don’t have to generate it yourself depending on what you’re doing. For example, the GeoJSON for the states used in my project were borrowed from Mapbox themselves. There are also programs where you can draw out specific things on a map, and they’ll provide you the GeoJSON.

React

One of the things I was thrilled about is that Mapbox has a support doc specifically for using the API in React. This was not only cool because it gave me a jump start on the platform, but it was also cool to see React in the wild, and to actually be able to understand what was going on. Sometimes I feel like we’re learning all of these things in the Flatiron bubble, and this was the first experience I had where I was able to actually see that everything I’m learning is used in the real world.

Overall, I’ve come to really love Mapbox for its ease of use, and seemingly endless possibilities for anything you want to build on a map!