search

protomaps / protomaps-leaflet

Lightweight vector map rendering + labeling and symbology for Leaflet
https://protomaps.com/docs/frontends/leaflet
BSD 3-Clause "New" or "Revised" License
764 stars 43 forks source link

How to draw between layers or hide labels #15

Closed tarngerine closed 3 years ago

tarngerine commented 3 years ago

Hi, I spent some time reading into the source code and I'm not seeing an ability to, for example, draw between 'layers' (e.g. draw under labels, or draw under roads), or hide labels. Is this something that's planned on the roadmap? I almost expected protomaps.LeafletLayer to give me several layers which I can then manage myself. Thanks!

bdon commented 3 years ago

The general approach is for a protomaps.LeafletLayer to return one layer of canvas elements, analogous to a single layer of rasterized basemap tile images. You can specify an array of cartographic rules, either paint rules or label rules, in the constructor to Leaflet Layer. If none is passed, it defaults to the existing fairly ugly set of rules defined here: https://github.com/protomaps/protomaps.js/blob/master/src/default_style/style.ts#L38

I suggest defining different map layers via the Leaflet APIs, as it has a very rich and mature functionality here and is also extensible via plugins. I added two new examples: the first example draws a plain old satellite image Tile layer and then uses protomaps.js to draw only labels on top of it:

https://protomaps.github.io/protomaps.js/examples/labels.html

You can see here on line 50 that I pass an empty array for paint_rules, and label_rules is defined in the same file for only two classes of labels: https://github.com/protomaps/protomaps.js/blob/master/examples/labels.html#L50

Another use case like you mentioned is to "sandwich" arbitrary Leaflet layers, where the bottom bun of the sandwich is basemap areal objects - roads, buildings, lands polygons, etc, and the top bun is labels. Example here: https://protomaps.github.io/protomaps.js/examples/sandwich.html

This is accomplished by creating two protomaps.LeafletLayers and adding the label layer to a custom Leaflet Pane: https://github.com/protomaps/protomaps.js/blob/master/examples/sandwich.html#L74

tarngerine commented 3 years ago

ah yes, i read into the paint_rules and label_rules parts and i thought that an empty array would get rid of them, but for some reason it wasn't working. ive now done it in the new working CSB (w 0.3.3) and it's working great, thank you!

bdon commented 3 years ago

What may have happened is I changed the keys from paint_style and label_style to paint_rules label_rules between I think version 0.1 and 0.2. I just updated the code that is part of the download from v0.1.0 to v0.3.3.

To set expectations, I won't be good at sticking to semantic versioning before reaching a 1.0 because the internals are going to be moving around a lot, as I work on the major outstanding issues here: https://github.com/protomaps/protomaps.js/issues

tarngerine commented 3 years ago

Gotcha, makes sense! Thanks!

On Sat, Jun 5, 2021, 3:47 AM Brandon Liu @.***> wrote:

What may have happened is I changed the keys from paint_style and label_style to paint_rules label_rules between I think version 0.1 and 0.2. I just updated the code that is part of the download from v0.1.0 to v0.3.3.

To set expectations, I won't be good at sticking to semantic versioning before reaching a 1.0 because the internals are going to be moving around a lot, as I work on the major outstanding issues here: https://github.com/protomaps/protomaps.js/issues

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/protomaps/protomaps.js/issues/15#issuecomment-855207468, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMN5TLHLJVELS5OIW6KVNDTRHQALANCNFSM457MEM3A .