Source: Dev.to

Introducing a Browser‑Based Prototype Tool for Iterating on Custom Mapbox Standard Style Themes in Real Time — No Terminal Required

Maps are a visual medium, and color is one of the most powerful tools in a cartographer’s toolkit. Whether you’re building a dark‑mode experience for a nighttime delivery app, a muted editorial look for a data visualization, or a vivid branded style for a consumer product, the color of your basemap sets the entire tone.

What Are Lookup Tables (LUTs)?

Mapbox Standard — Mapbox’s premier basemap style — supports deep color customization through a mechanism called Lookup Tables (LUTs). Most developers haven’t encountered LUTs before; they’re more at home in film post‑production than web development. Once you understand how they work, they’re an elegant and powerful way to retheme a map.

A LUT is a data structure that maps input color values to output color values. In image and video processing, a LUT is typically encoded as a small image (sometimes called a HALD CLUT or color cube) where each pixel’s position encodes an input RGB value and its color encodes the corresponding output.

Think of it as a complete color‑transformation recipe:

• Every possible input color has a predetermined output.
• The LUT defines that mapping across the entire visible spectrum at once.
• Apply the LUT to any image, and every pixel is remapped accordingly.

Identity LUT (No Color Change)

The image below shows the “identity LUT”, a PNG with a repeating set of squares laid out horizontally. Each square shows red values along the x‑axis and green values along the y‑axis. Stacking the squares mentally creates a cube, with blue values along the z‑axis. This cube represents all possible color values and is used to map any input color to a corresponding output color.

(Insert identity LUT image here)

Why Use LUTs with Mapbox Standard?

• Consistent look – The same LUT is applied to every map element (buildings, roads, labels, land, water).
• Full‑palette control – You can shift hue, adjust saturation, tweak contrast, etc., across the entire map in one step.
• Designer‑friendly – Designers can work in Photoshop, Lightroom, or web‑based LUT editors and export a PNG that Mapbox can consume.

Mapbox Standard already offers several quick‑customization options:

You can try these presets and individual color config options in the Mapbox Standard Style Playground.

Note: For those who want even more control over the color palette, set theme to custom and supply your own LUT.

Custom LUT Example

The following LUT applies a 15° hue rotation and increased saturation.

At first glance it looks similar to the identity LUT, but subtle differences become apparent when applied to an image or a map.

(Insert custom LUT image here)

Applied to a Wikimedia Commons image and to a Mapbox Standard map:

(Insert side‑by‑side comparison images here)

Tools & Resources for Creating LUTs

Typical Iteration Loop (Before the Editor)

1. Open a browser‑based LUT editor and adjust sliders.

2. Export the LUT as a PNG.

3. Base64‑encode it in the terminal:

   base64 -i my-lut.png | pbcopy

4. Open the Mapbox Standard Style Playground.

5. Paste the string into the theme field.

6. Observe the result on the map.

7. Repeat from step 1.

Problem: This workflow is tedious—downloading files, switching to the terminal, copying long strings—breaking creative momentum.

The Solution: Mapbox GL Theme Editor

The Mapbox GL Theme Editor combines a LUT generation UI with a live Mapbox Standard map in a single‑page web app. It removes the friction of the previous loop, letting you see changes instantly.

• Live preview – Adjust sliders and watch the map update in real time.
• One‑click export – Download the LUT PNG or copy the Base64 string directly.
• Open source – Hosted on GitHub Pages.

Try it now: Mapbox GL Theme Editor (GitHub Pages)

Main Panel Controls

• Hue rotation – Shifts all colors around the color wheel.
• Saturation – Increases or decreases color intensity.
• Brightness / Contrast – Fine‑tunes overall luminance and tonal range.
• (Additional sliders for gamma, exposure, etc., may be added in future versions.)

---

Quick Recap

• Mapbox Standard offers built‑in presets and color config keys for fast theming.
• LUTs provide full‑palette, designer‑friendly control over map colors.
• The Mapbox GL Theme Editor streamlines the iteration process, keeping everything in one browser window.

Happy theming! 🎨🗺️

Wheel

Core Controls

Tip: Drag any slider and the LUT preview in the sidebar updates instantly — and so does the map.

---

Precise Color Corrections

The tool also includes a color‑correction mode:

1. Eyedropper – select a specific color on the map (e.g., water, building facades, park vegetation).
2. Tolerance slider – controls how broadly neighboring colors are pulled along.

This is the right tool when you want to make precise changes:

• Darken just the water
• Push the buildings to a warmer gray
• Give vegetation a more stylized tint

The image below (example) shows a targeted correction changing water from light blue to light violet with low tolerance.

Warning: The Mapbox Standard Style is in active development and default colors could change in the future. An LUT with targeted color corrections may not apply as expected if the input color changes in a future release of Mapbox Standard.

---

Exporting Your LUT

Once you’ve landed on a look you like, you have two options:

• Save as PNG – Right‑click the LUT image in the sidebar and choose Save image as…
• Copy as Base64 – Click “Copy as Base64” to copy the encoded string to your clipboard, ready to paste into code.

Applying the LUT in Mapbox Studio

1. Open Mapbox Studio.
2. Navigate to the Standard style → Theme settings.
3. Set the theme to “Custom”.
4. Upload your LUT image file (PNG) or paste the Base64 string into the theme‑data field.

Testing in the Standard Style Playground

• Set the theme to custom.
• Paste the Base64 string into the theme‑data input.

You can combine your custom theme with other Standard configuration options—toggling 3D buildings, point‑of‑interest labels, light presets—and see how they interact. The Playground also provides handy code snippets for applying your theme at runtime in Mapbox GL JS or the Mapbox Mobile Maps SDKs.

---

Code Example

Below is a minimal example of how to instantiate a web map using the Mapbox Standard Style with a custom theme:

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/standard',
  config: {
    basemap: {
      theme: 'custom',
      'theme-data': YOUR_LUT_STRING   // ← replace with your Base64 string
    }
  },
  center: [-73.99059, 40.74012],
  zoom: 11.5
});

You can use the same Base64 string in the Mapbox Mobile Maps SDKs for iOS and Android via the theme and theme-data properties.

---

Why This Tool Exists

Educational Motivation

• LUTs are unfamiliar to most web and mobile developers.

• Interacting with a live preview makes the abstract concept concrete: dragging a hue slider instantly turns every green park magenta, or picking water with an eyedropper shifts rivers from steel‑blue to teal.

• Seeing the LUT preview update alongside the map demystifies the pipeline. You start to understand why cranking contrast makes building shadows punch harder, or why rotating hue by 180° turns a daylight city into a photo‑negative.

Practical Benefits

• Speed: What used to take minutes of file‑downloading and clipboard gymnastics now takes seconds of slider dragging.
• Iteration: Faster loops let you explore ten variations instead of one, or a hundred instead of ten.

---

Open‑Source & Future Directions

• This is a prototype—it works and it’s fun, but there’s room to grow.
• The repository is open source: .
• Issues and pull requests are welcome.

Discussion point: Should this functionality eventually live inside Mapbox Studio or the Standard Style Playground, or does the complexity of a dedicated theming workflow make it better as its own tool?

---

Get Started

The best way to understand LUTs and custom theming in Mapbox Standard is to open the tool and start dragging sliders. It takes about 30 seconds before you’re looking at a map that doesn’t look like any map you’ve seen before.

Open the Mapbox Standard Style Theme Editor →

When you find a look you like, grab the Base64 string and drop it into your project — or share a screenshot and tell us what you made!