protomaps/protomaps-leaflet

Lightweight vector map rendering + labeling and symbology for Leaflet

protomaps-leaflet's Issues

Multi-line labels: express left, center, right justification (top/bottom too for vertical writing?)

https://protomaps.com/docs/pricing-licensing/ is not fully covering an attribution - license itself should be mentioned/linked

https://protomaps.com/docs/pricing-licensing/

© OpenStreetMap should appear in the corner of your map.

It should be "© OpenStreetMap (ODbL)" or at least link https://www.openstreetmap.org/copyright to fulfil also requirement about stating license

You must include a notice associated with the Produced Work reasonably calculated to make any Person that uses, views, accesses, interacts with, or is otherwise exposed to the Produced Work aware that Content was obtained from the Database, Derivative Database, or the Database as part of a Collective Database, and that it is available under this License.

note "and that it is available under this License"

Improvements to point labeling

• Should allow multiple candidate label positions

typescript errors prevent next build

not a blocker, i can just disable typescript on the next app (prototype so it's okay), but im guessing the error is throwing because it's a .ts file but it doesnt actually have types?

Antimeridian labels broken

TUVA
FIJ

How to draw between layers or hide labels

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!

Allow TextSymbolizer that ignores placement of other data, which scales up and down with zoom

In discussion with brandon, couple of thoughts here

• we'd like to inject our own user-created annotations into the rendered basemap
• we would like these annotations (E.g. a text layer) to not be automatically hidden like typical map features/labels are — like figma, users should be able to place annotations wherever they want and handle overlaps themselves
• api might look something like, in styles.ts:

  {
    dataLayer: `annotation_label`,
    symbolizer: new CenteredTextSymbolizer({
      fill: params.annotationLabel,
      align: 'center',
      font: (z, p) => `...`, // dynamically sizes down/up based on some custom logic
      ignorePlacement: true,
    }),
}

PMTiles hosted via CloudFront/S3

This:

https://github.com/sfomuseum/go-http-protomaps

Comes with an example application that contains an embedded pmtiles and works fine when run and served like this:

> go run -mod vendor cmd/example/main.go
2021/04/27 16:34:36 Listening for requests on http://localhost:8080

If I tell the example server to fetch pmtiles data from a remote CloudFront/S3 server however there are no JS errors but nothing is ever rendered. For example:

> go run -mod vendor cmd/example/main.go -protomaps-tile-url https://static.sfomuseum.org/pmtiles/sfo.pmtiles
2021/04/27 16:36:19 Listening for requests on http://localhost:8080

Looking at the network console I see a whole bunch of OPTIONS and HEAD requests but then they just stop. Eventually I noticed that I need to include the allow_200 option but am I missing something else?

Labels: letter-spacing

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

• This slows down label rendering, so use sparingly
• i18n: should not apply to some scripts like arabic
• i18n: will probably share a code path with vertical writing (CJK)

LineSymbolizer should support evaluated properties

Balance this with the "static case" of being fast - minimal context modifications

Tippecanoe output: "Unimplemented type 4", slow rendering

with census blocks

ogr2ogr -t_srs EPSG:4326 cb_2018_us_zcta510_500k.json cb_2018_us_zcta510_500k.shp
tippecanoe \
--force \
--minimum-zoom=0 --maximum-zoom=10 \
--projection=EPSG:4326 \
--no-feature-limit --no-tile-size-limit \
--no-tile-compression \
--output-to-directory=. -l zcta cb_2018_us_zcta510_500k.json

label symbolizers: express Padding and Line height for multi-line labels in a generic way

Integrate terrain hill shading code

https://github.com/bdon/leaflet-terrarium is a prototype of how it can work. Still need to implement

• data sources for RGB terrain, whether an API endpoint or PMTiles archives
• Overzooming

Static maps

It should be easy to render a map to a canvas element without Leaflet.

Some questions:

• Should only integer zoom levels be allowed, or fractional zooms?
• The non-module, bundled library should not have a hard dependency on Leaflet
• What should be API for a static map be like? Probably something like (center_lat, center_lon, zoom_level), and then we need to re-implement leaflet-like logic to figure out how many tiles to request based on the width and height of the canvas element.

A primary use case should be integration with D3.js, where D3-controlled, SVG-rendered elements can match projections with a crisp basemap on a background canvas element.

line-breaking capabilities should be consistent across label symbolizers

Way to consistently measure speed and detect performance regressions

make easier to start

var layer = new protomaps.LeafletLayer({url:'FILE.pmtiles OR ENDPOINT/{z}/{x}/{y}.pbf'})

Some hint how to obtain/setup/host that part would be info. I am quite involved in OpenStreetMap and I would need to research how to setup this.

For bonus points: is it viable to generate tiny area such as https://protomaps.github.io/protomaps.js/examples/leaflet.html#16/25.0397/121.5243 demo and host it on Github Pages or other similar free static hosting?

Or is it necessary to have some full-blown server or paid hosting?

Fractional zooms

I decided to implement fractional zooms in v0.19.0. This means any external 2D data can define a Mercator projection and georeference a protomaps.Static canvas via only the topleft/bottomright points, expressed in degrees.

Outstanding tasks:

• ensure that Paint rules and Label rules can all take fractional values instead of just integers. Document how this works.
• Make fractional zooms work in view for the overzooming and underzooming edge cases.
• Possibly do some rounding logic inside Labeler to ensure that text anchors are always whole integer values. This may affect the display of text on non-Retina devices; if the X0 of a fillText call is a fractional value it may look pretty blurry.

Safari: zooming causes leaflet controls to flicker because of z-index

linear and stepped interpolation

refactor "benchmark" into a reusable visual testing suite utility for iterative design

key features:

• define different centers and zoom levels for testing
• track performance regressions
• display a visual diff
• compare different protomaps.js versions (iframes?)

renderer starts to explode above zoom level 24

Rendering gets slowed down, label box coordinates start drifting randomly...

Custom fonts + variable fonts

Helper for FontFace API to block drawing until font is loaded

redundant requests

I noticed a series of requests, seemingly unnecessarily, requesting the same byte ranges.

---

And cool project! I had no problems going through the demo and getting a local example up and running.

coordinate space internal API

Symbolizer authors should deal with only the CSS pixel coordinate space. the Labeler layout space might be different than the tile-space which is 256x256 CSS pixels, but these are just translations of each other.

Improvements to line labeling

• Position a label at the best position on the line
• Multiple bounding boxes for a single label
• line can be labeled multiple times

Feature Request: Dynamically set new paint rules

One thing we are exploring is dynamically updating the paint rules for a given layer. Our higher level goal is to enable some sort of interactivity. Imagine we get some object's properties, and then update our paint rules to special-case that object, and then re-render the tiles.

I sort of hacked it together and it seems to work but wanted to check if my implementation is right. Basically, I added a new public method to LeafetlLayer that takes in a new paintRules array similar to how it's normally passed in.

Happy to send a PR.

zoom-dependent individual font properties (weight, style, size)

Multiple tile sources in a single leafletLayer

• Label rules and paint rules optionally specify the data (TileCache) they fetch from
• should use Promise.allSettled to wait for all tiles to be fetched
• What should the behavior be when one of the tiles fail?
• Fetches to multiple sources should happen in parallel; should drawing block on having all data? Or should we start drawing, and each individual layer awaits the data availability? We need to work around the constraint that drawing is always back-to-front.

No labels on roads, features when zoomed in; smart deduped polygon labeling + smart & repeated line labels

Curious when you might add more detailed labels :) makes it hard to find things when zoomed in. Thanks!

Optimize PaintSymbolizer in case where there is no feature-dependent evaluated attributes

Should have a measurable speedup over 1.0.0

articulated line labels, rotated CJK line labels

It's nice to have line labels that are bent to follow a road.

• Requires per-codepoint rendering, so this is essentially the same as CJK labels laid out with vertical writing (I don't think most canvas implementations support vertical writing modes)
• this depends on script identification
• First-class support for Arabic, Devanagari, Burmese are important - articulation might be possible with Arabic if text is segmented carefully? For the rest I believe this feature should be disabled

import protomaps from 'protomaps' module not found

hi! i'm playing with this library in a react context and the importer doesnt seem to be working:

https://codesandbox.io/s/modern-pine-wn2kq?file=/src/App.tsx

1. open the CSB above
2. try to run the app
3. see error

any tips here on how to use in this environment? all of the demos use a script tag import from unpkg. thank you!

Max Zoom is hardcoded to 14 for Leaflet

Just what it says on the tin. I'm using Mapbox Vector Tiles, but I noticed a lot of the buildings weren't loading; this is because Mapbox only loads big buildings at zoom level 14, and smaller ones start at 15. I opened pull #27 with a potential (small) solution, but I'm open to other ways of fixing this too. Thanks!

deprecate/ split compat/json_style into separate NPM module

• it is difficult to maintain json_style with acceptable parity
• bloats the protomaps.js library in the primary use case where you don't need it
• should only consume the public protomaps.js API

rethink approach to examples and documentation

tile cancellation is not robust

Fast zooming may result in image loading being paused; difficult to reproduce

Leaflet GridLayer alternative

Ought to investigate a long-term replacement for leaflet.GridLayer

The current leaflet frontend subclasses GridLayer with canvas elements, which is the simplest way to get a working map. By moving away from this we can improve user-perceived latency with more fine grained control over the tile rendering lifecycle.

• remain Leaflet-compatible, but use a single absolutely positioned canvas element for all basemap drawing
• Should work with either zoomAnimation: true or false, false is preferred to achieve 0ms delay on zooming + rendering of overzoomed labels
• Need to test extensively on browsers because this depends heavily on GPU accelerated canvas being available, and not falling back to CPU canvas

Interactive querying of features

Useful for clicking and inspecting OSM IDs and tags, etc

Crashing/deadlock in Safari 15 / WebKit (macOS, iOS)

webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=230751

add map-level background color

Should be able to specify a background color instead of needing to color the CSS background of canvas element.

ES5 support

to have some hope of using with wkhtmltopdf

Symbolizer composition

Use cases:

• Bilingual text labels
• Circle + text labels
• Icon + text labels

A specific type of GroupSymbolizer is a FlowSymbolizer which will "reflow" text labels based on their bounding boxes, useful for line breaking.

add X-ray inspector mode for leaflet frontend

Because the Leaflet frontend already assumes the leaflet dependency, we can reuse some DOM elements to display the feature ID, type and properties.

Demo is missing an OpenStreetMap attribution

https://protomaps.github.io/protomaps.js/examples/leaflet.html#16/25.0397/121.5243

see https://www.openstreetmap.org/copyright

I have not checked it but based on https://protomaps.com/blog/new-way-to-make-maps/ it seems certain to be OSM data

Maplibre example

Hi again! I'm testing perf differences between Maplibre and Leaflet and was curious when you might have time to make a Maplibre example for https://protomaps.com/docs/alternate-renderers

Thanks!
Julius

Documentation request: compat/json_style.ts

Really I'd just like to know what the expected JSON shape for this is, if any. I was thinking about building something like this for Mapbox Studio/Maputnik JSON output files, so those styles could be used in conjunction with protomaps rendering. Is that the direction this is heading?

evaluate whether LeafletLayer should implement InteractiveLayer

https://leafletjs.com/reference-1.7.1.html#interactive-layer

Rule filters should take a zoom parameter instead of just properties

optionally replace canvas.measureText with a heuristic

https://github.com/williamngan/pts/blob/master/src/Typography.ts#L19 is a good example