Creating rainbow borders with Mapbox Studio

In celebration of today’s historic SCOTUS ruling on same-sex marriage, let’s use Mapbox Studio to create a map with rainbow borders! (Special thanks to MaptimeAMS for creating the base style for this tutorial.)

Open up Mapbox Studio and start a New Project. Click Create at the bottom of the prompt to start a new project.

To start, remove everything in the stylesheet except the Map selector at the top. Click “Save as” and select a location to save the project – this will cause your style changes to show up on your map.

Now that you’ve got a white map background, you want to define the colors of your lovely rainbow. Here are six bright colors – red, orange, yellow, green, blue, and purple – but you can pick whichever colors you’d like for your rainbow. Using variables in CartoCSS, we can define these colors right at the top of our style and use them throughout:

@color1: #ED1C24;
@color2: #FBAF3F;
@color3: #FFF100;
@color4: #38B449;
@color5: #00ADEF;
@color6: #652C90;

With these variables, wherever we use @color1 in the stylesheet, it will always represent #ED1C24. This is super handy, especially if you decide you want to change the colors later.

You are going to do something maybe counter-intuitive with this map: instead of creating rainbow borders around the land features, you’re going to create rainbow borders around the water features. This will allow you to have nice-looking coastal boundaries while showing off the Great Lakes and other large inland water bodies.

Below the Map and color variables, create a selector for #water and give it a blue polygon-fill:

#water {
  polygon-fill: #cadeef;
}

Press Save and the map will regenerate. Now you can see that when you style the water instead of the land, the land is still clearly visible!

Now you can add the rainbow borders to the water. The technique for doing this is to create several styles for the border, each one slightly smaller that will get layered on top of the next. Inside the #water selector, add the styling for each colored border using attachments:

#water {
  ::red {
    line-width: 14;
    line-color: @color1;
    line-cap: round;
    line-join: round;
   }

  ::orange {
    line-width: 12;
    line-color: @color2;
    line-cap: round;
    line-join: round;
   }

  ::yellow {
    line-width: 10;
    line-color: @color3;
    line-cap: round;
    line-join: round;
   }

  ::green {
    line-width: 8;
    line-color: @color4;
    line-cap: round;
    line-join: round;
   }

  ::blue {
    line-width: 6;
    line-color: @color5;
    line-cap: round;
    line-join: round;
  }

  ::purple {
    line-width: 4;
    line-color: @color6;
    polygon-fill: white;
    line-cap: round;
    line-join: round;
   }

   ::white {
    line-width: 2;
    line-color: white;
    polygon-fill: white;
    line-cap: round;
    line-join: round;
   }
  polygon-fill: #cadeef;
}

With this CartoCSS, the red border is 14 pixels, the orange border is 12 pixels, and so on up to the white border, which is 2 pixels. This creates a cascading rainbow effect on the borders of the land features, even though it’s secretly around the water bodies!

Hooray! Now we have a lovely world map with rainbow borders.

You can find the full style on GitHub here. Be sure to show us your own rainbow maps by tweeting @Mapbox. Happy mapping! #LoveWins