Customizing from a Flavor

[savfischer]

First off, thank you for Protomaps @bdon, it's awesome and the company I work for has become a sponsor.

Second, where I work we are super locked into leaflet having built a huge pile of features on top of it which is great, but it makes adopting a lot of the cool stuff happening in web mapping elsewhere tough sometimes. I did want to share a pattern, and maybe it can be used in a future guide here, about how to style named flavors beyond language.

Also, I am not great with Javascript, so maybe this would be super obvious to others and not needed in a guide. My use case was initially, I love the flavors, but we wanted the option to hide labels to make the maps more minimal. And then of course a million other lower priority use cases for highlighting various features. How I figured out how to do this was like so:

import L from 'leaflet';
import * as protomapsL from "protomaps-leaflet";
import { namedFlavor } from "@protomaps/basemaps";

const map = L.map('map')

const URL = "https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt";

let flavor = namedFlavor('grayscale')
const layer = protomapsL.leafletLayer({
  url: URL + '?key=[YOUR_KEY]',
  paintRules: protomapsL.paintRules(flavor),
  labelRules: protomapsL.labelRules({
    ...flavor, 
    // HIDE LABELS
    country_label:"rgba(0,0,0,0)",
    city_label:"rgba(0,0,0,0)",
    city_label_halo:"rgba(0,0,0,0)",
    state_label:"rgba(0,0,0,0)",
    state_label_halo:"rgba(0,0,0,0)",
    ocean_label:"rgba(0,0,0,0)",
  },
    "zh-Hant" // 2nd argument is language code
)})
return layer.addTo(map)

So by importing the namedFlavor function from @protomaps/basemaps you can just use the spread to modify any attribute in the flavor interface in your paintRules and labelRules.