DEV Community: Ben Tyler

An Overview of the Mapbox Standard Style

Ben Tyler — Thu, 24 Aug 2023 13:53:57 +0000

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

Mapbox recently announced the beta release of Mapbox GL JS v3.0. Most notable with the new release is support for the new Mapbox Standard Style. The aim of this post is to provide a summary of what the new Standard Style is and some examples of how it can be used.

I setup a Code Sandbox to complement this blog post that can be explored at:

https://codesandbox.io/s/mapbox-standard-style-exploration-h2c4zh

What is the Mapbox Standard Style?

Admittedly, I found myself a bit confused by the naming and did not have much of a guess as to what “standard” style might entail.

Taken from their documentation, “The new Mapbox Standard core style enables a highly performant and elegant 3D mapping experience with powerful dynamic lighting capabilities, and an expertly crafted symbolic aesthetic.”

Additionally, users of the Standard style will benefit from a basemap that is continuously updated without any additional work to have those upstreams stream through to their maps.

So basically an always up to date beautiful map that can be 3D too.

Installing Mapbox

To take advantage of the new Mapbox Standard style, you will need to use the latest beta release. To get started, let's install Mapbox.


# yarn
yarn add mapbox-gl@3.0.0-beta.1

# npm
npm install mapbox-gl@3.0.0-beta.1 --save

Then make sure you include the GL JS CSS file in the <head> of your html document. If you are using Create React App or a similarly structured app, add it to the <head> of the index.html file in the public directory.

<link
  href="https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.1/mapbox-gl.css"
  rel="stylesheet"
/>

How Can I Use the Standard Style in My Application?

There are two ways to add the Standard style to your map that are detailed below.

Accepting Defaults

In past versions of Mapbox GL JS, providing a style url when initializing the map has been a requirement.

With the new release, the style argument is now optional and will default to using the Mapbox Standard style. Initializing a map is now as simple as the below snippet.

// initialize map and fall back to default style url (aka Mapbox Standard)
const map = new mapboxgl.Map({
    container: 'map',
    center: [-87.901982, 43.039403],
    pitch: 70, // allows us to view the map in 3D
    bearing: 40,
    zoom: 15.5
});

Setting the Style URL

If you prefer to be more explicit, you can still set the style argument to Mapbox Standard style url. Here is an example of how to do so.

// initialize map and explicity set style url to Mapbox Standard
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/standard-beta',
    center: [-87.901982, 43.039403],
    pitch: 70, // allows us to view the map in 3D
    bearing: 40,
    zoom: 15.5
});

I am guessing that the style url will change once Mapbox Standard is out of public beta, but for now at least, that works.

Setting Map Lighting

When I first read about the ability to control the maps lighting, I shrugged my shoulders and said so what. After trying out the available lighting presets though, I get it. It is wild how much you can change the look and feel of your map using the lighting presets available in Standard.

There are four lighting presets available: dawn, day, dusk, and night. You can specify a lighting preset or let the Mapbox set it automatically based on a user’s time of day.

Additionally, there is a new lighting API that lets you customize the lighting beyond the 4 presets.

Here is an example of how you can explicitly set the light preset to dusk.

// initialize map and explicity set style url to Mapbox Standard
const map = new mapboxgl.Map({
    container: 'map',
        style: 'mapbox://styles/mapbox/standard-beta',
    center: [-87.901982, 43.039403],
    pitch: 70,
    bearing: 40,
    zoom: 15.5
});

map.on("style.load", () => {
  map.setConfigProperty("basemap", "lightPreset", "dusk");
});

Other Customization Options

There are additionally some other config properties (mainly around labeling) of the Standard style that you can customize:

showPlaceLabel
showRoadLabels
showPointOfInterestLabels
showTransitLabels
font

Check out this section of the Migration Guide for more details.

My Take

Overall, I am impressed by what the Mapbox Team has built with the Mapbox Standard Style. The ease of setting up such a beautiful, performant, and dynamic map is mind blowing.

Most of the maps I build rely on either satellite imagery or are set in more rural areas where buildings are not a thing. If the Mapbox team adapts this paradigm to the Outdoors style and adds better support for 3D visualization of terrain, it would be a game changer for me.

Once the Standard style is out of beta though, I will likely swap it in wherever I am using their Streets style.

Next Steps

If you found this post useful, please retweet, share, or join the newsletter!

Useful Links and Resources

Time Boxed Challenges: An Easier Way to Meet Your Learning and Building Goals

Ben Tyler — Tue, 28 Sep 2021 15:11:02 +0000

Finding a Way to Move Through the List
What is a Time Boxed Personal Challenge?
Why Take On a Time Boxed Personal Challenge?
How to Design Your Own Personal Challenge
Wrapping Up a Challenge
My Current Challenge
Next Steps

For a minute, think about that mental laundry list of things of things to learn or build. Maybe some free time comes up and you work on one of those items for half a day only to let it fade to the background again.Then a couple of weeks down the road you have some free time again and you pick up where you left off or even pick up a new item. No real progress gets made.

Finding a Way to Move Through the List

How do you get around this though and actually consistently learn and/or build?

There are a whole slew of solutions out there, but at least at the present moment, my favorite solution is the personal time boxed challenge. In other words, spending X minutes per day for X days working on a very specific, defined goal.

This past spring, I spent 30 days doing a personal map design challenge. Each day I would take 30 minutes to focus on designing maps using Mapbox Studio. The reasoning behind it was simple - I wanted further my cartographic designs skills to the point where I could make an office worthy 18" x 24" map poster.

While I am still nothing close to a cartographer, I leveled up my design and Mapbox Studio skills. It was an investment in myself that I am very happy I made and I ended up with two maps that I will be printing out as posters to hang in my office.

What is a Time Boxed Personal Challenge?

It can be a whole lot of things but the meat and potatoes of it comes down to spending X amount of time every day for X number of days. The challenge can take the shape of learning a new skill, building a side project, or a mix of the two. For example:

"I will spend 30 minutes a day for the next 15 days learning the foundations of JavaScript animations in React."
"I will spend 30 minutes a day for the next month building out a marketing site for my side project idea."

Why Take On a Time Boxed Personal Challenge?

In addition to being fun, these types of personal challenges have a ton of benefits that include

providing a structured way to learn a new skill or build a new product
providing a manageable framework and schedule that helps ensure consistency and increases the chances of follow through
typically results in a portfolio item or product that can be leveraged in your personal or career growth
if you share your progress and learnings from the challenge, can lead to new connections and getting involved in new communities
can open unexpected doors and opportunities

How to Design Your Own Personal Challenge

Setting up your own personal challenge need not be an extravagant and drawn out ordeal. Here are the general steps I like to follow.

Make a list of things that you would like to learn or build. Keep the list focused on things you could complete in 10 to 20 hours and make each item as specific as possible (i.e. learn how to design a 18" x 24" map poster using Mapbox Studio).
Pick the item from the list that excites you the most and select how much time you will spend working on it each day and for how many days (i.e. 30 minutes/day for 15 days). I personally like the 30 minutes/day approach for 15 to 30 days because it is enough time to make real progress on things, but not so long that it drags on and I lose interest.
Choose a time of day that you will always work on your challenge. This extra step of selecting a time will help you integrate the challenge into your daily routine and will help ensure you actually take the time to work on it.
Start your challenge and take a daily snapshot of your progress each day. It can be incredibly rewarding and increase your motivation and confidence for future challenges if you can look back and observe your progress.
Share your daily snapshots. It can be both fun and encouraging to share your daily progress with others on Twitter or any other platform of your choosing.

Wrapping Up a Challenge

Reflecting on the work you accomplished throughout your challenge is just as important as doing the work. The process of reflection not only allows you to cement the lessons learned along the way, but can additionally be a major confidence booster and provide jet fuel for your next projects when you look at where you started and where you ended.

Often times when I am considering taking on another side project, it can seem daunting and that I just do not have enough time to execute it. Doing these personal time-boxed challenges though has consistently taught me that you can get a lot done only spending 30 minutes a day for an extended period of time. Understanding that with consistent small efforts, you can build and learn some really big things, is an invaluable lesson.

My Current Challenge

After wrapping up my map design challenge, I recognized this framework works really well for both learning and building things. Accordingly, it made me hungry to put together another challenge. This time around, it is taking the shape of learning how to use Figma to develop a design system.

Next Steps

Follow and tweet me on Twitter at @_btyler_ with any personal challenges you undertake. I would love to follow along and hear about what you are building and learning!

Adding a Custom Popup to a Map Layer Using React

Ben Tyler — Mon, 26 Apr 2021 16:58:04 +0000

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

The previous posts in the series have covered

how to use Mapbox Studio to manage spatial data and create custom base maps (read post)
how to create a basic application using Mapbox and React (read post).

These posts are helpful in understanding the basics of Mapbox Studio and the relation between Studio and Mapbox GL JS. Understanding these fundamentals is essential when you start developing much larger, data-driven mapping applications.

The aim of this post is to provide an introduction to adding a variety of spatial data formats to a React application using Mapbox GL JS. Understanding how to add sources and layers to a map will open a lot of doors for the types of applications you can build using Mapbox GL JS.

If you do not care too much about the explanations and are just looking for a snippet, check out the Code Sandbox for this guide or scroll to the bottom of the post.

Deciding Between a Custom Style and Custom Code

I covered how to manage spatial data in Mapbox Studio using Datasets and Tilesets as well as how to add custom layers to a Mapbox style in earlier posts. If your spatial data is static and will not need to respond much to user inputs in your application, adding the spatial data to a custom Mapbox Style and then using that style in your application is probably the most ideal workflow.

However, if your application and map are fairly data-driven, this guide should be very relevant to your workflow. Here are a few common examples of when it is probably easier to bring spatial data into your map and application using Mapbox GL JS versus a custom style in Mapbox Studio. There are ways to accommodate these use cases using Mapbox Studio, but I just find it easier to manage them entirely using Mapbox GL JS.

the map needs to display data that updates frequently
- i.e. a delivery map that shows near real-time status and position of drivers
the map needs to use data from a third party API
the map needs the ability to style and filter layer features based on user input

What We Will Build

We will use Mapbox GL JS and React to build an interactive map with several custom sources and layers. We will be adding sources and layers for

avalanche slide paths
nearby weather stations
bus routes
3D terrain
the sky

The next sections will provide an overview of Sources and Layers followed by some concrete usage examples.

If you do not care too much about the explanations and are just looking for a snippet, check out the Code Sandbox for this guide.

Sources

I like to think of a Source as a mini datastore for my map. It tells Mapbox where to find my data as well as how to represent it. There are multiple types of Sources that you can use including: vector, raster, raster-dem, geojson, image, and video. This provides a lot of flexibility in terms of what kind of data can be added to a Mapbox GL JS application.

Each source type has their own configuration options, but you can generally do things like set the min and max zoom thresholds for a source. The Mapbox Style Specification provides a comprehensive summary of each type. For this guide though, we will be focused on the vector and geojson source types.

Adding a Vector Source

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector

Probably the most common way of adding spatial data to a map is adding a vector tile source hosted by Mapbox. Sidenote: If you are not overly familiar with the difference between vector and raster data in the context of GIS, check out this helpful guide from Carto.

You can add one of Mapbox's tilesets or add your own custom tileset that is hosted on Mapbox. See this earlier post for instructions on how to create your own tileset.

// adding a Mapbox tileset
// method expects you to provide an id for the source
// as well some configuration options
map.addSource("mapbox-streets", {
  type: "vector",
  url: "mapbox://mapbox.mapbox-streets-v8",
})

// adding your own tileset
map.addSource("avalanche-paths", {
  type: "vector",
  url: "mapbox://lcdesigns.arckuvnm",
})

Adding a GeoJSON Source

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson

This method is great for adding in spatial data from third party APIs or pulling in data from your own APIs. You can define the GeoJSON inline, read GeoJSON directly from a local file, or hit an API endpoint that returns GeoJSON.

// inline geojson
// method expects you to provide an id for the source
// as well some configuration options
map.addSource("mapbox-streets", {
  type: "geojson",
    data: {
        "type": "Feature",
        "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-67.13734351262877, 45.137451890638886],
                [-66.96466, 44.8097],
                [-68.03252, 44.3252],
                [-69.06, 43.98],
                [-70.11617, 43.68405],
                [-70.64573401557249, 43.090083319667144],
                [-70.75102474636725, 43.08003225358635],
                [-70.79761105007827, 43.21973948828747],
                [-70.98176001655037, 43.36789581966826],
                [-70.94416541205806, 43.46633942318431],
                [-71.08482, 45.3052400000002],
                [-70.6600225491012, 45.46022288673396],
                [-70.30495378282376, 45.914794623389355],
                [-70.00014034695016, 46.69317088478567],
                [-69.23708614772835, 47.44777598732787],
                [-68.90478084987546, 47.184794623394396],
                [-68.23430497910454, 47.35462921812177],
                [-67.79035274928509, 47.066248887716995],
                [-67.79141211614706, 45.702585354182816],
                [-67.13734351262877, 45.137451890638886]
            ]
        ]
    }
});

// adding GeoJSON read from a file
import ExampleData from "./ExampleData.json";
map.addSource("avalanche-paths", {
  type: "geojson",
  data: ExampleData,
});

// adding GeoJSON from an API
import ExampleData from "./ExampleData.json";
map.addSource("avalanche-paths", {
  type: "geojson",
  data: "https://opendata.arcgis.com/datasets/4347f3565fbe4d5dbb97b016768b8907_0.geojson",
});

Layers

Layers are the visual representation of a source's data, they are what actually get rendered on the map. Once you add a source to a map, you can create any number of layers using it. For instance, if I added a source that contained city parks, I could create the following three layers from that single source.

a fill layer that represents the park boundaries as shaded polygons
a line layer that represents the boundaries as an outline
a symbol layer that displays the park names as text labels

Mapbox supports a lot of different layer types including background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade, and sky. It is beyond the scope of this guide to cover all of these layer types, but this guide will focus on the what you will be most likely to use, fill, line, symbol,and circle.

A note about layers is that they are rendered in the order they are defined. So if you want a layer to be below another one of your layers, make sure you add it first. Alternatively though, you can tell Mapbox which layer a layer should be added before/after. See this guide to learn how to do so.

Each layer is created in a similar fashion, but has its own unique set of layout and paint properties (aka how it looks) that can be configured. It is unfortunately beyond the scope of this guide to cover all of these configuration options, but the Mapbox docs do a great job. For a deeper dive into layers, check out the Mapbox Style Specification.

Adding a Fill Layer

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill

Fill layers will be your go to for visualizing polygons on a map. Think use cases like boundaries, census tracts, bodies of water, avalanche paths, building footprints, etc. The general syntax for adding a layer is more or less the same regardless of layer type. The major differences between layer types is in the layout and paint configuration options (i.e how the layer is presented and styled).

// add a fill layer to the map
map.addLayer({
  id: "avalanche-paths-fill",
  type: "fill",
  source: "avalanche-paths",
  "source-layer": "Utah_Avalanche_Paths-9s9ups",
  paint: {
    "fill-opacity": 0.5,
    "fill-color": "#f05c5c",
  },
})

Adding a Circle Layer

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle

Circle layers are useful any time you want to visualize point data. A symbol layer can also be used to visualize point data but the simplicity of the circle layer type can be nice, especially if you want do things like data-driven styling.

// add a circle layer to the map
map.addLayer({
  id: "snotel-sites-circle",
  type: "circle",
  source: "snotel-sites",
  paint: {
    "circle-color": "#ffff00",
    "circle-radius": 8,
    "circle-stroke-color": "#333333",
    "circle-stroke-width": 2,
  },
})

Adding a Line Layer

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line

Line layers are your best friend anytime you want to visualize a line string, think use cases like bus routes, Lyft routes, hiking tracks, rivers and streams, etc.

// add a line layer
map.addLayer({
  id: "bus-routes-line",
  type: "line",
  source: "bus-routes",
  paint: {
    "line-color": "#15cc09",
    "line-width": 4,
  },
})

Adding a Symbol Layer

Symbol layers are the ones that took me the longest to get my head around. There are two primary use cases for symbol layers: 1) if you want to visualize data using an icon and 2) if you want to label map features with some text.

You can see all of the icons that are available for use as a symbol layer over at this page. Just hover over any of the icons to see the name (i.e. airfield-15). You can also create and upload your own icons, but that will likely be the topic of another post.

Adding a label layer is relatively straightforward too and you can use any of the properties (fields) in your data source as labels. In the example below, there is a field called "Station Name" that I am using to label features. I am using a Mapbox Expression (["get", "Station Name"]) to grab the values from the Station Name field.

// add a symbol layer - icon
map.addLayer({
  id: "bus-stops-symbol",
  type: "symbol",
  source: "bus-stops",
    layout: {
        icon-image: 'bus-15',
     }
});

// add a symbol layer - text label
map.addLayer({
  id: "snotel-sites-label",
  type: "symbol",
  source: "snotel-sites",
  layout: {
    "text-field": ["get", "Station Name"],
    "text-size": 14,
    "text-offset": [0, -1.5],
  },
  paint: {
    "text-color": "#ffff00",
    "text-halo-color": "#333333",
    "text-halo-width": 1,
  },
});

Adding Sources and Layers to a React Map

With all of that foundation established (a lot of it!), the following steps should hopefully make a bit more sense. In this section, we are going to use these specific methods from Mapbox GL JS to add sources and layers to an interactive map in a React application.

Process Overview

Regardless of what type of spatial data you are adding to your application, there will always be two key components:

Adding a source
Adding a layer

Adding the source tells Mapbox that "hey, this is a data store that contains or more layers that could get added to the map". When you add a layer to a map, you then point it at the source and tell Mapbox how to represent the source on the map.

If you want to follow along outside of this post, you can check the Code Sandbox or the Github repo.

Process Implementation

The rest of the guide is going to pick up where my earlier Introduction to Mapbox and React post left off. I have put together a working snippet below filled with comments. I started out trying to explain every last bit of what was happening but think it is a lot more apparent in a lot of ways if I let the code speak for itself. I have provided links to the relevant Mapbox docs which do a much better job of explaining than I ever could. You can also refer to the primer above on sources and layers.

import React, { useRef, useEffect } from "react"
import mapboxgl from "mapbox-gl"
import SnotelSites from "./lcc_snotel_sites.json"
// import the mapbox styles
// alternatively can use a link tag in the head of public/index.html
// see https://docs.mapbox.com/mapbox-gl-js/api/
import "mapbox-gl/dist/mapbox-gl.css"
import "./app.css"

// Grab the access token from your Mapbox account
// I typically like to store sensitive things like this
// in a .env file
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN

const App = () => {
  const mapContainer = useRef()

  // this is where all of our map logic is going to live
  // adding the empty dependency array ensures that the map
  // is only rendered once
  useEffect(() => {
    // create the map and configure it
    // check out the API reference for more options
    // https://docs.mapbox.com/mapbox-gl-js/api/map/
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/outdoors-v11",
      center: [-111.75, 40.581],
      zoom: 12,
      pitch: 60,
      bearing: 80,
    })

    // only want to work with the map after it has fully loaded
    // if you try to add sources and layers before the map has loaded
    // things will not work properly
    map.on("load", () => {
      // add mapbox terrain dem source for 3d terrain rendering
      map.addSource("mapbox-dem", {
        type: "raster-dem",
        url: "mapbox://mapbox.mapbox-terrain-dem-v1",
        tileSize: 512,
        maxZoom: 16,
      })
      map.setTerrain({ source: "mapbox-dem" })

      // avalanche paths source
      // example of how to add a custom tileset hosted on Mapbox
      // you can grab the url from the details page for any tileset
      // you have created in Mapbox studio
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector
      map.addSource("avalanche-paths", {
        type: "vector",
        url: "mapbox://lcdesigns.arckuvnm",
      })

      // snotel sites source
      // example of using a geojson source
      // data is hosted locally as part of the application
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson
      map.addSource("snotel-sites", {
        type: "geojson",
        data: SnotelSites,
      })

      // bus routes source
      // another example of using a geojson source
      // this time we are hitting an ESRI API that returns
      // data in the geojson format
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson
      map.addSource("bus-routes", {
        type: "geojson",
        data:
          "https://opendata.arcgis.com/datasets/4347f3565fbe4d5dbb97b016768b8907_0.geojson",
      })

      // avalanche paths - fill layer
      // source-layer can be grabbed from the tileset details page
      // in Mapbox studio
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill
      map.addLayer({
        id: "avalanche-paths-fill",
        type: "fill",
        source: "avalanche-paths",
        "source-layer": "Utah_Avalanche_Paths-9s9ups",
        paint: {
          "fill-opacity": 0.5,
          "fill-color": "#f05c5c",
        },
      })

      // snotel sites - circle layer
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle
      map.addLayer({
        id: "snotel-sites-circle",
        type: "circle",
        source: "snotel-sites",
        paint: {
          "circle-color": "#1d1485",
          "circle-radius": 8,
          "circle-stroke-color": "#ffffff",
          "circle-stroke-width": 2,
        },
      })

      // snotel sites - label layer
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol
      map.addLayer({
        id: "snotel-sites-label",
        type: "symbol",
        source: "snotel-sites",
        layout: {
          "text-field": ["get", "Station Name"],
          "text-size": 16,
          "text-offset": [0, -1.5],
        },
        paint: {
          "text-color": "#1d1485",
          "text-halo-color": "#ffffff",
          "text-halo-width": 0.5,
        },
      })

      // bus routes - line layer
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line
      map.addLayer({
        id: "bus-routes-line",
        type: "line",
        source: "bus-routes",
        paint: {
          "line-color": "#15cc09",
          "line-width": 4,
        },
      })

      // add a sky layer
      // the sky layer is a custom mapbox layer type
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#sky
      map.addLayer({
        id: "sky",
        type: "sky",
        paint: {
          "sky-type": "atmosphere",
          "sky-atmosphere-sun": [0.0, 90.0],
          "sky-atmosphere-sun-intensity": 15,
        },
      })
    })

    // cleanup function to remove map on unmount
    return () => map.remove()
  }, [])

  return <div ref={mapContainer} style={{ width: "100%", height: "100vh" }} />
}

export default App

Next Steps

This guide just scratches the surface in terms of the types of sources and layers that can be added to a map using Mapbox GL JS. I encourage you to explore the Mapbox docs and extend my examples. You could try things like...

tweaking and expanding the layer styling
adding your own sources and layers

If you found thus post useful, give me a follow on Twitter or consider picking up a copy of the Building Interactive Maps with React course.

Useful Links and Resources

Let It Simmer - Holding Off on that New Product Idea

Ben Tyler — Thu, 01 Apr 2021 15:46:09 +0000

I use these posts as part of my effort to sustainably build in public. My aim is to share lessons learned, prevent burnout, and connect with other motivated builders. If you are enjoying these posts, please share or give me a follow on Twitter!

Saying No to Yourself

The importance of saying "No" gets a lot of lip service, usually in the context of setting boundaries between yourself and someone else. An equally important skill is being able to say "No" to yourself, especially when you are executing on an idea and a new idea comes along. Without this, you will find yourself chasing every shiny new idea you have into the proverbial sunset of indie hacking purgatory.

The Problem - Letting a New Idea Derail Your Current Project

Something that ties a lot of us creators and indie hackers together is a seemingly bottomless well of inspiration and product ideas. Some of us execute on these ideas better than others. Some of us abandon our current idea the moment a new one comes along. Sure it is good to agile and chase down new ideas, but only up to a certain point. Follow through is important.

I am speaking for myself here but I would venture to guess that some of you can relate to the following scenario. I will come up with a new product idea (usually while out on a run) and then frantically try to get the idea down on paper (aka digital paper aka Notion). The new idea then consumes most of my mental bandwidth for the rest of the day. I am gripped by thoughts like "this project really has a chance" and "I could use technology stack x, y, z to build out this set of novel features.

Part of what drives this frantic shift in focus is the false sense of urgency a new idea can take on. It is easy to think things like "if I throw together a MVP for this, people will quickly see the value in this and I will be one of those success stories I see in my Twitter feed" or "if I don't execute on this quickly someone else will!" Far too often this urgency and subsequently adopted timeline are totally unnecessary. Ideas should be left to simmer on low for a while instead of throwing them into the instant pot on high.

Motivation and passion are hard waves to tame though so it is easier said than done. Like a lot of self-imposed problems, I have found that strong systems and frameworks go a long way.

The Solution - A Project Ideas Tracker and Discipline

Telling yourself "No" often is not any easier than telling another person no. Convincing yourself that your new idea is not the best thing you have ever dreamed up and that you need to start working on it today can additionally be a tall order. Systems work well for these kind of problems.

A simple system that has worked really well for me is keeping a running Product Ideas Tracker. Like any good system, it is designed to reduce the barriers of use to maximize the chances that I will actually use it. The Product Ideas Tracker is a simple Notion page filled with general thoughts, reminders for myself, and a running list of project ideas and their current status (To Do, In Progress, Completed).

I cannot explain the exact science, but the act of jotting down a new, burning idea almost immediately removes the sense of urgency of executing on the idea. There is probably something to be said for the positive re-enforcement that comes with using this system over time too. The act of cataloging the idea represents an act of nurturing the idea while at the same time setting boundaries and saying "No, not right now."

I wanted to share the very basic Notion template I put together for the Project Ideas Tracker. You can download it for free here.

Closing Thoughts

The Project Ideas Catalog is not a standalone solution in and of itself. It needs to be paired with a lot of discipline, but it at least helps to provide a framework for tracking ideas and preventing them from derailing you from your current project.

I would love you to hear from you and any strategies you have found that work for preventing new ideas from derailing you. If you have comments, please reach out on Twitter or share the post if you enjoyed it!

Narrowing Your Focus To Prevent Burnout

Ben Tyler — Tue, 23 Mar 2021 02:55:00 +0000

I use these posts as part of my effort to sustainably build in public for the long run. My aim is to share lessons learned, prevent burnout, and connect with other motivated builders. If you are enjoying these posts, please share or give me a follow on Twitter!

Something I have been actively struggling with is the prioritization of ideas. My ideas list has continued to grow each week while the amount of time I have available to devote to them has held constant. Not surprisingly, this growing asymmetry has been leading to feelings of great unease.

Self-Driven Scope Creep

Something I saw all the time as a consultant and in my own freelance work is scope creep - the client asking for feature x, y, and z that was not included in the original scope of work. As I add new projects to my ideas list, I tend to ride the wave of motivation and start working on it immediately, bringing my active project count up by one. In a lot of ways, my growing products and active projects list represents self-imposed scope creep. It is fairly easy to be cognizant of this when someone else is asking for additional features and products, but so much harder to recognize when you are the one guilty of it.

At the start of this year, I had one project I was working on - Scoped, a budgeting and cost estimate planning tool for freelancers. Then I had an idea to start writing a Mapbox Developer's Handbook so I started working on this too. Next I added in Sonic Postcards in addition to a couple of other projects. So in three months I went from one project + a full time job to nearly five projects + a full time job. Not sustainable!

If I was working with a client who was pushing for so many new features and was so blatantly guilty of scope creep, I would probably fire them as a client. So it looks like I might have to fire myself...or change.

Whittling Down Your Focus

The process of telling yourself no, especially if it is related to something(s) you are deeply passionate about can be painful. I decided I needed to whittle down the total number of projects I am working on at any given time to three. This was still too much. This week I brought this number down to one.

This mental framework is still sparkly fresh for me, but thus far it has helped put me ease. An added benefit has been that it has forced me to recognize if an idea is good, it will still be just as good of an idea whether I start on it today or a year from now. Someone else is likely not going to "steal" it either.

Anyways, I will report back on if I have the self-control to stick to this new paradigm and how it buffs out long term.

If you enjoyed this post please consider sharing it or giving me a follow on Twitter!

What I Built Last Week - March 08, 2021

Ben Tyler — Wed, 17 Mar 2021 01:24:22 +0000

I use these posts as part of my effort to build in public. They showcase my current progress on products and audience building. They are intended to provide an imperfect snapshot of what I am working on and progress towards goals. If nothing else, they are useful to me for record keeping.

Overview

Most of the work I put in last week in relation to indie hacking supported being able to go solidly offline for a few days. Last week was a vacation week and it was sorely needed. My wife and I took a trip down to Palm Springs to celebrate our baby moon (cringing as I am typing that phrase out). We did not get to do a proper honey moon after our wedding due to Covid and it is likely going to be a while before we get to do another trip just the two of us with a little one on the way.

Writing this on Monday night listening to the new Harmony Wood's album I feel thoroughly refreshed. This weeks update has more of a philosophical bent as I did a lot of mental gymnastics in prioritizing what I want to work on in the coming weeks (it is hard!).

Irons in the Fire This Week

Developing new "Postcards" music newsletter
Mapbox and React Deep Dives series
Mapbox Developers Handbook
Strategy

Metrics

Making just about everything transparent and accessible.

You can check out the Growth Dashboard I mentioned below

Here are the things I worked on during the last week.

Strategy

Prioritizing what to work has been a challenge over the past month. The list of side projects that I would like to focus on continue to grows while the amount of time I have available remains the same (hardly a unique problem). As such, a lot of my energy as of late has been focused on strategy and making clear plans of actions and timelines for the various irons I have in the fire.

This led me to reflecting a lot on how I managed time in the past and eventually led me to reflecting on my time as a high school and collegiate athlete. I realized that it was a time that is not all that dissimilar to where I am at now. Going to class is analogous to my day job and cross country/track are analogous to my side projects. I had goals for both and had to learn how to set and them for each aspect of my life.

A large part of setting goals for cross country and track involved setting short, medium, long, and extra long term goals. My freshmen year I wanted to be an all american by the time I graduated (unfortunately didn't happen). It was a massive goal and something that needed to get broken down into smaller goals to allow me to have any shot at accomplishing it. So I set long term goals like qualify for nationals this year, medium term goals like place top 10 at the conference meet, and short term goals like place top 5 in the race this coming weekend.

There is so much in this approach and breaking work down into the concept of seasons like you have in athletics that extends itself to building products. A big part in achieving my athletic goals was developing a training plan(s) for each season. The training plan blended a variety of workout types (regular aerobic runs, speed work, tempo runs, race simulations, and long runs) to get me in the shape I needed to be in to have a realistic shot at accomplishing my goals. They work really well.

I'm the middle of this trying this out, but I think the idea of developing training plans for indie hacking could work really well. More on this in the coming weeks though...

If you enjoyed this post please consider sharing it or giving me a follow on Twitter!

How to Style Map Layers in Mapbox GL JS

Ben Tyler — Wed, 03 Mar 2021 15:31:58 +0000

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

The last few posts in this series have focused on integrating spatial data into Mapbox Studio and Mapbox GL JS applications. The logical next step is to focus on the presentation of spatial data.

The aim of this guide is to provide an overview and list of resources detailing how map layers can be styled using Mapbox GL JS. This guide will more closely resemble a collection of resources than a technical guide. If I opted to cover every way a map layer can be styled, I would be writing this post for the rest of the year.

Getting Started

This post picks up where A Complete Guide to Sources and Layers in React and Mapbox GL JS leaves off. To get the most out of this guide, you should be familiar with how to add sources and layers to a map using Mapbox GL JS. There are a couple of different ways to style map layers, but all rely on the same underlying style specification of layout and paint properties. We will begin here.

Layout and Paint Properties

The specification for a Mapbox layer has two style-related properties, layout and paint, that work in tandem to control how a map layer is rendered and styled. It can be a bit tricky to remember the difference between the two, but it is a safe bet to say (unless you are working with the symbol layer type) that you will be focused on the paint property the majority of the time. With the exception of the symbol and line layer, all of the layer types only have one valid layout property which is visibility.

Mapbox provides great documentation on the layout and paint properties.

Here is an example snippet showing both the layout and paint properties in action. This results in a visible layer with rounded line ends with a blue stroke and 2px stroke width.

map.addLayer({
  id: "rivers-layer",
  type: "line",
  source: "rivers",
    layout: {
        "line-cap": "round",
        "visibility": "visible"
    },
  paint: {
        "line-color": "#6382f2",
    "line-width": 2
  },
});

Different Ways To Style a Layer

A powerful feature of Mapbox GL JS is that you can style map layers when they are added to the map or after. This provides a lot of flexibility in terms of allowing your map styles to adapt to changes in your application. You can find a full list of all the different styling options that available to each layer type here.

Styling a layer when it is added to the map

Using this approach, we apply the map styles when it is added to the map. Unless the map layer styling needs to respond to changes in your application or user input, this is the recommended approach. As you can see, most the time there isn't even a need to include the layout property when styling a layer.

map.addLayer({
  id: "bus-stops-circle",
  type: "circle",
  source: "bus-stops",
  paint: {
    "circle-color": "#1d1485",
    "circle-radius": 8,
    "circle-stroke-color": "#ffffff",
    "circle-stroke-width": 2,
  },
});

Styling a layer after it is added to the map

There are some instances where you would want to delay styling the map layer or to apply new styling based on some change in your application. Some valid use cases include toggling layer visibility, changing the color of a layer based on user input, styling a layer based on data, etc. Luckily, the setPaintProperty() and setLayoutProperty() methods in Mapbox GL JS make this relatively painless.

More information

// add the layer to the map but have it be hidden initially
map.addLayer({
  id: "bus-stops-circle",
  type: "circle",
  source: "bus-stops",
  layout: {
        visibility: "none",
    },
  paint: {
    "circle-color": "#1d1485",
    "circle-radius": 8,
    "circle-stroke-color": "#ffffff",
    "circle-stroke-width": 2,
  },
});

// layer visibility toggle handler that could be attached
// elsewhere in your application
// something like toggleLayerVisibility('bus-stops-circle')
function toggleLayerVisibility(layerId) {
    const visibility = map.getLayoutProperty(layerId, 'visibility');

    if (visibility === 'visible') {
        map.setLayoutProperty(layerId, 'visibility', 'none');
    } else {
        map.setLayoutProperty(layerId, 'visibility', 'visible');
    }
}

// example of how you set invidual paint properties
function changeCircleColor(layerId, color) {
    map.setPaintProperty(layerId, 'circle-color', color);
}

Styling a Layer Conditionally

One of the most powerful aspects of styling is the ability to apply styles based on different conditions. Mapbox GL JS allows you to style layers based on

characteristics of the layer data (i.e. color all counties with a population of greater than some number blue)
the zoom range (i.e. when really zoomed in make the rivers map layer thinner but when really zoomed out make it thicker)

Implementing either approach relies on a core concept in Mapbox GL JS which is expressions. I honestly have to return to the docs every time I work with them. They are mighty powerful but also mighty confusing.

Tip! You can use Mapbox Studio to quickly prototype layer styling. This is especially valuable for data driven styling. Select the layer and paint property you would like to style (i.e. fill) and then select to style it across a zoom range, data range, or across data conditions in the UI. After you have things looking like you want, select the </> icon in the bottom right corner of the drawer. This will expose the Mapbox expression needed for the data/zoom driven styling. You can then easily copy and paste it into your code.

More information

Here is an example of using expressions for data-driven and zoom-driven styling.

map.addLayer({
  id: "rivers-line",
  type: "line",
  source: "rivers",
  paint: {
        "line-color": "#6382f2",
    "line-width": 2,
        // make streams larger as the user zooms from z0 to z22
        "line-width": {
            "base": 2, // default value
            "stops": [
                // first # is the zoom level, second # is the style val
                [0, 8],
                [12, 4],
                [22, 1]
            ]
        },
        // color lines based on water quality data
        "line-color": [
            "match",
      ["get", "quality"],
      "poor",
      "#f84c35",
            "average",
            "#f84c35",
            "good",
            "#f84c35",
            "#dddddd" // fallback value
        ]
  },
});

Next Steps

I encourage you to go deep on the styling topic. The art of styling a map is equally as important as bringing it to life with interactivity and should not be overlooked. My recommendation is to spend some exploring styling using the Mapbox Studio UI. It is a great place to come up to speed on all of the different ways you can style different layer types. It is is easy to iterate and then take what you learn and apply it in the context of Mapbox GL JS.

If you found this post useful, please retweet, share, or pick up a copy of The Mapbox Developer's Handbook!

Useful Links and Resources

What I Built Last Week - Feb 22, 2021

Ben Tyler — Tue, 02 Mar 2021 16:10:49 +0000

I use these posts as part of my effort to build in public. They showcase my current progress on products and audience building. They are intended to provide an imperfect snapshot of what I am working on and progress towards goals. If nothing else, they are useful to me for record keeping.

Overview

Last week was a relatively mellow week in terms of productivity on the side projects. I made the conscious choice to not work over the weekend too so I could recharge a bit. I am really glad I opted for the time off.

Irons in the Fire This Week

Developing new "Postcards" music newsletter
Mapbox and React Deep Dives series
Mapbox Developers Handbook

Metrics

Making just about everything transparent and accessible.

You can check out the Growth Dashboard I mentioned below

Here are the things I worked on during the last week.

Personal Site Improvements

The What

I continued making some small stylistic tweaks to the site (mostly typography related). The main improvements I made centered around internal tooling. I expanded my existing utility scripts for generating a new blog post to support multiple different templates now that I have a few recurring weekly posts (i.e. What I Built Last Week, Songs of the Week, Mapbox and React Deep Dives).

The Why

I have been trying to automate as many things as I can. I have fairly limited free time (1 to 2 hours a day) to devote to side projects, so the less time I have to spend on repeatable, non-value add tasks the better. Expanding my blog post generation utility script to support different templates has already saved me a good amount of time. I will probably write a post on how I did this, but it loosely follows the process I used to develop a utility script for auto-generating React Components.

Writing

The What

I put out three blog posts last week:

The guide to sources and layers was a beast and a wake up call on just how involved some of these remaining Mapbox and React Deep Dive guides are going to be. Initially I had hoped to put two to three of these posts out a week, but realistically it will probably be limited to one.

I have been having fun with the What I Built This Week and Songs of the Week series though. There is something freeing about the formats as I do not have to worry about suggesting a "correct" solution to a problem, I just get to write.

That's it for the updates this week!

What I Built Last Week - February 15, 2021

Ben Tyler — Wed, 24 Feb 2021 16:27:37 +0000

I use these posts are part of my effort to build in public. They are intended to provide an imperfect snapshot of what I am working on and progress towards goals. If nothing else, they are useful to me as record keeping. If you want to get these updates in your inbox, join the newsletter!

Overview

I spent the majority of last week focused on on my Mapbox and React Deep Dives series and switching my personal site over from MailChimp to ConvertKit. Initially the idea of a newsletter or mailing list made me cringe (it feels too salesy). The process of building in public has made me re-evaluate my categorically bad assessment of things like SEO, newsletters, Twitter, and marketing though. It has been refreshing to have this previously held ideas challenged.

Irons in the Fire

Mapbox & React Deep Dives series
Scoped - A Scoping & Budget Planning Tool for Freelancers (free/pay what you want)
Newsletter
Personal site redesign

Metrics

Making just about everything transparent and accessible.

You can check out the Growth Dashboard I mentioned below

Here are the things I worked on during the last week.

Growth Dashboard

The What

growth analytics dashboard built on top of Google Sheets and Google Data Studio. Access it here.
bare bones at this point. Opting for simplicity as it increases the likelihood of me updating the metrics.
eventually would like to bring greater automation to the process

The Why

to understand how various aspects of efforts are/are not working
easy way to visualize targets and progress towards them

Newsletter & Mailing List

The What

Switched over from MailChimp to ConvertKit
Redesigned my personal site home page to more prominently feature newsletter
Started strategizing more around newsletter/mailing list (despite my initial opposition)

The Why

necessary to promote my products and hopefully help people.

Personal Site Improvements

The What

Redesigned my personal site home page to more prominently feature newsletter
Added a newsletter sign up page
Improved layout and other style issues throughout the site

The Why

Wanted to more prominently feature the newsletter and convert that into sign ups
Fix some styling issues that had been bothering me for a while

Writing

The What

Published two blog posts
- Tilesets & Datasets: Managing Data in Mapbox Studio
- Songs of the Week - February 14, 2021

If you found this post useful, please retweet, share, or join the newsletter!

A Complete Guide to Sources and Layers in React and Mapbox GL JS

Ben Tyler — Tue, 23 Feb 2021 15:23:30 +0000

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

The previous posts in the series have covered

how to use Mapbox Studio to manage spatial data and create custom base maps (read post)
how to create a basic application using Mapbox and React (read post).

If you do not care too much about the explanations and are just looking for a snippet, check out the Code Sandbox for this guide or scroll to the bottom of the post.

Deciding Between a Custom Style and Custom Code

the map needs to display data that updates frequently
- i.e. a delivery map that shows near real-time status and position of drivers
the map needs to use data from a third party API
the map needs the ability to style and filter layer features based on user input

What We Will Build

We will use Mapbox GL JS and React to build an interactive map with several custom sources and layers. We will be adding sources and layers for

avalanche slide paths
nearby weather stations
bus routes
3D terrain
the sky

The next sections will provide an overview of Sources and Layers followed by some concrete usage examples.

If you do not care too much about the explanations and are just looking for a snippet, check out the Code Sandbox for this guide.

Sources

Adding a Vector Source

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector

You can add one of Mapbox's tilesets or add your own custom tileset that is hosted on Mapbox. See this earlier post for instructions on how to create your own tileset.

// adding a Mapbox tileset
// method expects you to provide an id for the source
// as well some configuration options
map.addSource("mapbox-streets", {
  type: "vector",
  url: "mapbox://mapbox.mapbox-streets-v8",
})

// adding your own tileset
map.addSource("avalanche-paths", {
  type: "vector",
  url: "mapbox://lcdesigns.arckuvnm",
})

Adding a GeoJSON Source

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson

// inline geojson
// method expects you to provide an id for the source
// as well some configuration options
map.addSource("mapbox-streets", {
  type: "geojson",
    data: {
        "type": "Feature",
        "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-67.13734351262877, 45.137451890638886],
                [-66.96466, 44.8097],
                [-68.03252, 44.3252],
                [-69.06, 43.98],
                [-70.11617, 43.68405],
                [-70.64573401557249, 43.090083319667144],
                [-70.75102474636725, 43.08003225358635],
                [-70.79761105007827, 43.21973948828747],
                [-70.98176001655037, 43.36789581966826],
                [-70.94416541205806, 43.46633942318431],
                [-71.08482, 45.3052400000002],
                [-70.6600225491012, 45.46022288673396],
                [-70.30495378282376, 45.914794623389355],
                [-70.00014034695016, 46.69317088478567],
                [-69.23708614772835, 47.44777598732787],
                [-68.90478084987546, 47.184794623394396],
                [-68.23430497910454, 47.35462921812177],
                [-67.79035274928509, 47.066248887716995],
                [-67.79141211614706, 45.702585354182816],
                [-67.13734351262877, 45.137451890638886]
            ]
        ]
    }
});

// adding GeoJSON read from a file
import ExampleData from "./ExampleData.json";
map.addSource("avalanche-paths", {
  type: "geojson",
  data: ExampleData,
});

// adding GeoJSON from an API
import ExampleData from "./ExampleData.json";
map.addSource("avalanche-paths", {
  type: "geojson",
  data: "https://opendata.arcgis.com/datasets/4347f3565fbe4d5dbb97b016768b8907_0.geojson",
});

Layers

a fill layer that represents the park boundaries as shaded polygons
a line layer that represents the boundaries as an outline
a symbol layer that displays the park names as text labels

A note about layers is that they are rendered in the order they are defined. So if you want a layer to be below another one of your layers, make sure you add it first. Alternatively though, you can tell Mapbox which layer a layer should be added before/after. See this guide to learn how to do so.

Adding a Fill Layer

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill

// add a fill layer to the map
map.addLayer({
  id: "avalanche-paths-fill",
  type: "fill",
  source: "avalanche-paths",
  "source-layer": "Utah_Avalanche_Paths-9s9ups",
  paint: {
    "fill-opacity": 0.5,
    "fill-color": "#f05c5c",
  },
})

Adding a Circle Layer

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle

// add a circle layer to the map
map.addLayer({
  id: "snotel-sites-circle",
  type: "circle",
  source: "snotel-sites",
  paint: {
    "circle-color": "#ffff00",
    "circle-radius": 8,
    "circle-stroke-color": "#333333",
    "circle-stroke-width": 2,
  },
})

Adding a Line Layer

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line

Line layers are your best friend anytime you want to visualize a line string, think use cases like bus routes, Lyft routes, hiking tracks, rivers and streams, etc.

// add a line layer
map.addLayer({
  id: "bus-routes-line",
  type: "line",
  source: "bus-routes",
  paint: {
    "line-color": "#15cc09",
    "line-width": 4,
  },
})

Adding a Symbol Layer

You can see all of the icons that are available for use as a symbol layer over at this page. Just hover over any of the icons to see the name (i.e. airfield-15). You can also create and upload your own icons, but that will likely be the topic of another post.

// add a symbol layer - icon
map.addLayer({
  id: "bus-stops-symbol",
  type: "symbol",
  source: "bus-stops",
    layout: {
        icon-image: 'bus-15',
     }
});

// add a symbol layer - text label
map.addLayer({
  id: "snotel-sites-label",
  type: "symbol",
  source: "snotel-sites",
  layout: {
    "text-field": ["get", "Station Name"],
    "text-size": 14,
    "text-offset": [0, -1.5],
  },
  paint: {
    "text-color": "#ffff00",
    "text-halo-color": "#333333",
    "text-halo-width": 1,
  },
});

Adding Sources and Layers to a React Map

Process Overview

Regardless of what type of spatial data you are adding to your application, there will always be two key components:

Adding a source
Adding a layer

If you want to follow along outside of this post, you can check the Code Sandbox or the Github repo.

Process Implementation

import React, { useRef, useEffect } from "react"
import mapboxgl from "mapbox-gl"
import SnotelSites from "./lcc_snotel_sites.json"
// import the mapbox styles
// alternatively can use a link tag in the head of public/index.html
// see https://docs.mapbox.com/mapbox-gl-js/api/
import "mapbox-gl/dist/mapbox-gl.css"
import "./app.css"

// Grab the access token from your Mapbox account
// I typically like to store sensitive things like this
// in a .env file
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN

const App = () => {
  const mapContainer = useRef()

  // this is where all of our map logic is going to live
  // adding the empty dependency array ensures that the map
  // is only rendered once
  useEffect(() => {
    // create the map and configure it
    // check out the API reference for more options
    // https://docs.mapbox.com/mapbox-gl-js/api/map/
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/outdoors-v11",
      center: [-111.75, 40.581],
      zoom: 12,
      pitch: 60,
      bearing: 80,
    })

    // only want to work with the map after it has fully loaded
    // if you try to add sources and layers before the map has loaded
    // things will not work properly
    map.on("load", () => {
      // add mapbox terrain dem source for 3d terrain rendering
      map.addSource("mapbox-dem", {
        type: "raster-dem",
        url: "mapbox://mapbox.mapbox-terrain-dem-v1",
        tileSize: 512,
        maxZoom: 16,
      })
      map.setTerrain({ source: "mapbox-dem" })

      // avalanche paths source
      // example of how to add a custom tileset hosted on Mapbox
      // you can grab the url from the details page for any tileset
      // you have created in Mapbox studio
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector
      map.addSource("avalanche-paths", {
        type: "vector",
        url: "mapbox://lcdesigns.arckuvnm",
      })

      // snotel sites source
      // example of using a geojson source
      // data is hosted locally as part of the application
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson
      map.addSource("snotel-sites", {
        type: "geojson",
        data: SnotelSites,
      })

      // bus routes source
      // another example of using a geojson source
      // this time we are hitting an ESRI API that returns
      // data in the geojson format
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson
      map.addSource("bus-routes", {
        type: "geojson",
        data:
          "https://opendata.arcgis.com/datasets/4347f3565fbe4d5dbb97b016768b8907_0.geojson",
      })

      // avalanche paths - fill layer
      // source-layer can be grabbed from the tileset details page
      // in Mapbox studio
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill
      map.addLayer({
        id: "avalanche-paths-fill",
        type: "fill",
        source: "avalanche-paths",
        "source-layer": "Utah_Avalanche_Paths-9s9ups",
        paint: {
          "fill-opacity": 0.5,
          "fill-color": "#f05c5c",
        },
      })

      // snotel sites - circle layer
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle
      map.addLayer({
        id: "snotel-sites-circle",
        type: "circle",
        source: "snotel-sites",
        paint: {
          "circle-color": "#1d1485",
          "circle-radius": 8,
          "circle-stroke-color": "#ffffff",
          "circle-stroke-width": 2,
        },
      })

      // snotel sites - label layer
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol
      map.addLayer({
        id: "snotel-sites-label",
        type: "symbol",
        source: "snotel-sites",
        layout: {
          "text-field": ["get", "Station Name"],
          "text-size": 16,
          "text-offset": [0, -1.5],
        },
        paint: {
          "text-color": "#1d1485",
          "text-halo-color": "#ffffff",
          "text-halo-width": 0.5,
        },
      })

      // bus routes - line layer
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line
      map.addLayer({
        id: "bus-routes-line",
        type: "line",
        source: "bus-routes",
        paint: {
          "line-color": "#15cc09",
          "line-width": 4,
        },
      })

      // add a sky layer
      // the sky layer is a custom mapbox layer type
      // see https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#sky
      map.addLayer({
        id: "sky",
        type: "sky",
        paint: {
          "sky-type": "atmosphere",
          "sky-atmosphere-sun": [0.0, 90.0],
          "sky-atmosphere-sun-intensity": 15,
        },
      })
    })

    // cleanup function to remove map on unmount
    return () => map.remove()
  }, [])

  return <div ref={mapContainer} style={{ width: "100%", height: "100vh" }} />
}

export default App

Next Steps

tweaking and expanding the layer styling
adding your own sources and layers

If you found this post useful, please retweet, share, or pick up a copy of The Mapbox Developer's Handbook!

Useful Links and Resources

Tilesets & Datasets: Managing Data in Mapbox Studio

Ben Tyler — Mon, 15 Feb 2021 15:51:46 +0000

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

Thus far we have

covered how to create a basic map using Mapbox and React (read post),
developed a cheatsheet for the predefined Mapbox Styles (read post)
covered how to create a custom style in Mapbox Studio and add it to a React app (read post)

These guides are helpful for establishing some basic familiarity with Mapbox, but only get you so far when the rubber meets the road. If you are building an interactive map, chances are you trying to portray some real data and not just some hello world nonsense.

The aim of this post is to provide an overview of two key features of Mapbox Studio, Tilesets and Datasets and how they can be used to manage and integrate real data into a Mapbox style and application. This guide will not provide the ins and outs how to use tilesets and datasets, but instead will focus on providing the context of how they fit into the larger Mapbox ecosystem.

Datasets Overview

Dataset can a loaded term that means a whole of different things in different contexts. In the context of Mapbox Studio, a dataset refers to an editable collection of GeoJSON features. Simplified even further, it is essentially data stored in a JSON that is formatted in a very specific way that also has an added field to capture spatial data ("geometry"). It is the rawest form of data in Mapbox Studio.

A very key point is that Datasets cannot be directly added to a Mapbox Style. They first need to be exported as a Tileset. The exported Tileset can then be added easily to a map style. I like to think of datasets as my foundation. I cannot do much with a dataset directly, but I can build a lot of things on top of it.

Common Use Cases

lightweight spatial data editing/creation
managing data that has the potential to update regularly
easy to transform spatial-like data into a true spatial format
- i.e. converting a CSV with latitude and longitude columns into a tileset

Drawbacks

no bulk editing
for more complex use cases, you need to learn how to leverage the Datasets and Uploads APIs

To learn the ins and outs of working with datasets, check out the Mapbox documentation.

Tilesets Overview

Tilesets are the meat and potatoes of Mapbox Studio. They represent a collection of vector or raster data broken up into a nice uniform square grid of tiles. If you want to add something to a style via Mapbox Studio, you will need to create a tileset for it. Luckily, this is as uploading a shapefile or as easy as exporting a dataset to a tileset most of the time.

Maybe not 100% accurate, but my model for the differences between Datasets and Tilesets is viewing Datasets like a CSV and Tilesets like a Shapefile. You can view and edit data in a CSV but you cannot do much more than that whereas you view, edit, map, and analyze data in a shapefile.

To learn the ins and outs of working with Tilesets, check out the Mapbox documentation.

Common Use Cases

displaying any sort of non-Mapbox spatial data
exporting a Dataset for use in a custom Mapbox style

Drawbacks

cannot edit a Tileset
updating a Tileset usually requires that you re-upload and replace the existing Tileset

Thinking in Datasets and Tilesets

When I first started using Mapbox Studio, one of the hardest things to get my head around was the difference between datasets and tilesets and how they fit into the styles editor and Mapbox GL JS. It can be easy to view these three feature sets in isolation, but viewing them as connected steps in a process helped me.

Here is a common data flow for working with Mapbox Studio.

Find spatial data you want to view and analyze
Upload spatial data to Mapbox Studio (choose one of the following)
1. Upload data as dataset and then export to a tileset
2. Upload data as a tileset
Edit and manage spatial data in Mapbox Studio
Add spatial data to a Mapbox Style

One of the things that initially tripped me up was deciding when to use Datasets and when to use a Tileset as both are valid entry points into the data workflow. My general rule of thumb is that if I want a nice UI to make simple edits to my spatial data, I will reach for Datasets, otherwise I reach for Tilesets.

A Real World Example

Now that I have provided an overview of Datasets, Tilesets, and how they fit together in theory, I will provide an actual use case from a data-driven mapping application I have built.

I recently built an application that allows users to see places where they can trail run, fish, and grab a beer afterwards. There are a couple of key spatial datasets that this application relies on:

the course data (line strings representing the trail/path the user can run along)
watershed boundaries (polygons representing the fisheries)

Deciding What to Use

One of the other rules of thumbs I use when determining if I should use a Dataset or a Tileset is the frequency that the data will need to be updated. If it is on the more frequent side of things, I will opt to use a Dataset.

For this example, I knew the course data would change over time as more places to run and fish got added to the application so I opted to manage this data as a Dataset. The watershed boundaries are not likely to change (barring some massive earthquake or geologic event) and represent a perfect use case for a Tileset.

Getting the Data into Studio

When I started building the application, I already had a lot of the course data available as GPX files from Strava. You unfortunately cannot upload GPXs as a tileset so I had to convert these to GeoJSON first. After doing so, I uploaded the course data as a Dataset using Mapbox studio. Once I had all my courses added, I exported them to a Tileset. When I needed to add new courses, I opened up my existing Dataset and used the import feature to bring in the additional courses.

Adding in the watershed boundaries was even easier. I just navigated to the Tilesets page in Mapbox Studio and uploaded a shapefile I had that contained the watershed boundaries.

Adding the Data to a Mapbox Style

With both of key spatial components now available as Tilesets, all that was left to do was to create a custom Mapbox style and add my two Tilesets. If you want to learn how to add a Tileset to a Mapbox Style, make sure to check out this guide.

Adding the Style to a React App

Once the Tilesets were added to my custom Mapbox Style, the only remaining task was integrating the Style into my React frontend. For a guide on how to do this, please refer to my earlier post, Introduction to Mapbox and React.

Next Steps

The above workflow is a simplified version of what I implemented. On the final versions of the app, I got the chance to leverage some really cool Mapbox products like the Uploads and Datasets API. I will most likely cover this in a future post though so stay tuned!

If you found this post useful, please retweet, share, or pick up a copy of The Mapbox Developer's Handbook!

Useful Links and Resources

Datasets Docs (https://docs.mapbox.com/studio-manual/reference/datasets/)
Tilesets Docs (https://docs.mapbox.com/studio-manual/reference/tilesets/)

Mapbox Studio: Custom Styles and Creating an Avalanche Atlas

Ben Tyler — Mon, 08 Feb 2021 17:41:50 +0000

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

The aim of this post is to walk you through how you can create a custom map using Mapbox Studio and then add that map to a React application.

There are a lot of cool maps out there in the outdoor industry and natural resource management fields. One of my favorite map types though are avalanche atlases. They give you an intimate glimpse into where the fiery white dragons have historically reared their heads most frequently.

We will be using Mapbox Studio to develop our own avalanche atlas for Little and Big Cottonwood Canyons. These canyons are fabled for their avalanche activity as well as the science and art of avalanche control that have grown out of it. It makes you appreciate all of the hard work of the Utah Avalanche Center, transportation departments, and ski patrol that help keep these corridors open.

Here is a glimpse at the atlas we will be building.

Introduction to Mapbox Studio

If you have not worked with Mapbox Studio before, here is a quick primer. Studio is a browser based application that allows you create just about any type of map you can dream up. You can start with one of the predefined styles I covered in my Mapbox Styles Cheatsheet or start from scratch. Like probably most people, my first introduction to GIS was through ArcMap. A powerful program for sure, but one that left me incredibly frustrated that I could not customize basemaps. With Mapbox studio, you can customize the appearance of just about any map layer, all the way down to how tiny features like how park labels are displayed.

These guide will not be an exhaustive introduction to studio. Mapbox has already provided great documentation on the subject and I would risk rambling on and on with the end result being a worse product. It is definitely worth stepping through their guides which can be found at https://docs.mapbox.com/studio-manual/guides/.

Building the Avalanche Atlas

What is an avalanche atlas?

An avalanche atlas is a map or collection of maps that portrays avalanche hazard. Not only can they show where avalanches have been known to occur, they can provide technical information like distance to major roadways, starting zone elevation, etc. They can be an incredibly powerful tool for risk mitigation and land use planning.

Initial Setup

To get started, head on over to https://www.mapbox.com/ and login to your account (create one now if you do not already have one). After logging in, head on over to the Studio home page at https://studio.mapbox.com/ and click on the "New Style" button. This will open up a modal where you can choose a template to use for the map. Since we are building a map that is focused on the natural world and visualizing accurate representations of terrain, I think it makes sense to select the "Satellite Streets" style.

Getting Familiar with the Mapbox Studio UI

The user interface for Studio can be a bit intimidating at first (it used to be even more so before the introduction of the "Components" and "Layers" concepts). I think the Mapbox team has done a great job of masking the complexity in Studio. Once you get your feet wet, you will likely be amazed at how powerful the tool is.

Anyways, let's get acquainted with the aspects of the UI that will be our bread and butter.

The sidebar provides accesse to Components and Layers.
- Components groups together similar layer groups for easy styling (check out this guide for more info).
- Layers provide a more granular view of the individual layers that make up the style and exposes a lot of controls for each.
The top application bar contains a whole slew of map style settings.
The Search and Zoom Controls in the upper right cornerprovide an easy way to navigate around the map

Use the search bar to search for "Little Cottonwood Canyon" and then select it from the search suggestions. This will pop us over to area that we are creating an avalanche atlas for. Take a little time here to get familiar with the UI and the map.

Adding the Avalanche Paths Layer to the Map

Time to add the avalanche paths.

Download the GeoJSON file that contains the slide paths from here.
Find the "Layers" tab in the left sidebar and click on the "+" button. From this UI, you can add previously uploaded data to the map or upload new data. We are going to upload some new data.
Click "Upload data". The file picker allows us to upload a whole slew of spatial data formats such as MBTiles, KML, GPX, GeoJSON, Shapefile (zipped), or CSV file for vector tiles and GeoTIFF files for raster tiles. Upload the avalanche paths GeoJSON file and click confirm. Note: a future post will take a deeper dive into Mapbox tilesets and datasets.
The file will take a few minutes to upload and process. After the upload has finished processing, click on the input below the "Source" label. This open up a dialog where you can select the avalanche paths we just uploaded. Find the source in the list and select it.

We are currently in the "Data" view for our layer. We will gloss over all the functionality exposed here but you can do all sorts of things like specify the geometry type, filter features, and control the zoom range at which the layer is visible.

Styling the Avalanche Paths

Now that we have the avalanche paths layer added to our map, we can style it.

Click on the "Style" tab to the left of the "Select Data" tab. If you zoom out a bit on the map, you should see all of our avalanche paths as solid black polygons on the map. There sure are a lot of them!

Time to make these look a whole lot better!

Select the "Color" item from the "Style" pane, you should see a color picker. We will want to change the fill color to a nice red and add some transparency to the polygons. I personally like the color #ec2222 and an opacity of 45 (use the opacity slider directly below the color picker or the input to the right of the slider).

Looking much better! It really gives you an appreciation for just how many avalanche paths intersect the roadways in these canyons and the crazy hard work that the avalanche centers and transportation departments are tasked with.

Bonus: Viewing the Avalanche Paths in 3D

This is a brand spanking new feature in Mapbox Studio, but you can now render 3D terrain (see my earlier post). For a use case like avalanche slide paths, being able to visualize them in 3D is such a step up. Here is how to do so.

Click "Terrain" in the top navigation bar and flip the toggle that says "Enable 3D Terrain".
Adjust the pitch of the map camera by holding down the Control/Ctrl key and moving your mouse forward and back to your liking (reverse these steps to go back to 2D).

Soaking It All Up

All in all, a pretty simple process to create our own custom map! I encourage you to take some time to explore Studio before moving on to the next steps.

Adding the Custom Style to a React Application

I wrote an earlier post as part of this series that illustrated how to create a basic interactive map using Mapbox and React. This next step builds off of that tutorial so if you have not read it and are not overly familiar with Mapbox GL JS, definitely give it a read.

Similarly to how it is easy to swap out predefined Mapbox styles in our application, it is just as easy to add in our own style. In Mapbox Studio,

Click "Publish" in the upper righthand corner.
Walk through the steps in the dialog to publish the map.
After it is published, click the "Share" item immediately to the left of the "Publish" button.
In the subsequent dialog, look for the section titled "Developer resources" and find the form input labelled "Style URL". Copy this url.

Now in your React application, where the snippet where you initialize your map. It should look something like this.

// create the map and configure it
// check out the API reference for more options
// https://docs.mapbox.com/mapbox-gl-js/api/map/
const map = new mapboxgl.Map({
  container: mapContainer.current,
  style: "<YOUR STYLE URL HERE>", // TODO REPLACE ME
  center: [-111.676, 40.549],
  zoom: 13,
});

All you have to do now is the following:

paste the copied Style URL into the style property on the map config.
find a zoom and map center you like by panning the map around in Studio. Copy the zoom level and coordinates from the top application bar. Set the zoom and center properties to these accordingly.

Save your work, start up the app, and you should now be seeing your very own avalanche atlas for Big and Little Cottonwood Canyons.

If you found this post useful, please retweet, share, or pick up a copy of The Mapbox Developer's Handbook!

Next Steps

try customizing some of the other map layers
try labelling the avalanche slide paths

Useful Links and Resources

Mapbox Studio Home Page (https://studio.mapbox.com/)
Mapbox Studio Guides (https://docs.mapbox.com/studio-manual/guides/)
Mapbox Style Components (https://docs.mapbox.com/studio-manual/guides/components/)
Source for the Avalanche Paths (https://opendata.gis.utah.gov/datasets/utah-avalanche-paths)
Utah Avalanche Center (https://utahavalanchecenter.org/)
More info on Avalanche Atlases (https://instaar.colorado.edu/research/publications/occasional-papers/avalanche-atlas-san-juan-county-colorado/)
One of my personal favorite podcasts. All about avalanches (https://www.theavalanchehour.com/)

DEV Community: Ben Tyler

An Overview of the Mapbox Standard Style

What is the Mapbox Standard Style?

Installing Mapbox

How Can I Use the Standard Style in My Application?

Accepting Defaults

Setting the Style URL

Setting Map Lighting

Other Customization Options

My Take

Next Steps

Useful Links and Resources

Time Boxed Challenges: An Easier Way to Meet Your Learning and Building Goals

Table of Contents

Finding a Way to Move Through the List

What is a Time Boxed Personal Challenge?

Why Take On a Time Boxed Personal Challenge?

How to Design Your Own Personal Challenge

Wrapping Up a Challenge

My Current Challenge

Next Steps

Adding a Custom Popup to a Map Layer Using React

Deciding Between a Custom Style and Custom Code

What We Will Build

Sources

Adding a Vector Source

Adding a GeoJSON Source

Layers

Adding a Fill Layer

Adding a Circle Layer

Adding a Line Layer

Adding a Symbol Layer

Adding Sources and Layers to a React Map

Process Overview

Process Implementation

Next Steps

Useful Links and Resources

Let It Simmer - Holding Off on that New Product Idea

Saying No to Yourself

The Problem - Letting a New Idea Derail Your Current Project

The Solution - A Project Ideas Tracker and Discipline

Closing Thoughts

Narrowing Your Focus To Prevent Burnout

Self-Driven Scope Creep

Whittling Down Your Focus

What I Built Last Week - March 08, 2021

Overview

Irons in the Fire This Week

Metrics

Strategy

How to Style Map Layers in Mapbox GL JS

Getting Started

Layout and Paint Properties

Different Ways To Style a Layer

Styling a layer when it is added to the map

Styling a layer after it is added to the map

Styling a Layer Conditionally

Next Steps

Useful Links and Resources

What I Built Last Week - Feb 22, 2021

Overview

Irons in the Fire This Week

Metrics

Personal Site Improvements

The What

The Why

Writing

The What

What I Built Last Week - February 15, 2021

Overview

Irons in the Fire

Metrics

Growth Dashboard

The What

The Why

Newsletter & Mailing List

The What

The Why

Personal Site Improvements

The What