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.

[bdon]

Thanks for the example. There is a small snippet in the docs here:

https://docs.protomaps.com/basemaps/flavors#overriding-defaults

So that way of using the spread operator to safely override flavor values is intended. Maybe you would like to add another example?

I don't like the solution above however because drawing a label with rgba(0,0,0,0) is still going to incur the cost of laying out the label and exclude nearby labels. A better solution may be to filter the array returned by labelRules on the dataLayer value, but this isn't precise.

[savfischer]

That snippet in the docs was essential for me to get to the "solution" I arrived at. What I didn't understand was how to bring that into protomaps-leaflet code.

What I thought was the case for about a week, was if I wanted to use protomaps with leaflet, I could either use the named flavors as given, or I would need construct map styles from the ground up, defining every relevant paint and label rule myself, which seemed daunting (I had started to do just that to mimic 'light' and 'grayscale' - just without labels).

I think many people who use leaflet, myself included, are not used to exploring the internals of js libraries so I thought others might benefit from seeing how to combine the two protomaps libraries to customize from a named flavor as a starting point.

Good point about the drawbacks of using rgba(0,0,0,0) to "hide" things, I will experiment with filtering.

[mentalstring]

FWIW, in our use case, we are not importing modules but instead including the protomaps-leaflet script, and AFAIK it doesn't currently expose the existing named flavors. As we only want to tweak a couple of colors from an existing flavor, our current approach is to obtain the full flavor definition we want to extend, customize and load it using,

let tileLayer = protomapsL.leafletLayer({
    url: '...',
    paintRules: protomapsL.paintRules(custom_theme),
    labelRules: protomapsL.labelRules(custom_theme, 'en'),
});

In other words, it would be useful to have a way to access a named flavors when using protomaps-leaflet so that it's simpler to make small style customizations like this instead of duplicating the whole flavor definition.

[savfischer]

Yes, different context, but that's exactly the problem I was trying to help others with. Hadn't considered the situations where you are just loading the script.

[bdon]

it would be useful to have a way to access a named flavors when using protomaps-leaflet

Isn't this already possible by loading @protomaps/basemaps as a script? Because protomaps-leaflet just depends on that package: https://github.com/protomaps/protomaps-leaflet/blob/main/package.json#L38

The downside is that there is duplication in the scripts you load; if you want to optimize for bundle size you should be using ES6 module imports + a bundler like vite instead of script tags.