`symbol-placement: line-center` #6821

ChrisLoer · 2018-06-14T22:02:00Z

This is a potential implementation of #5061. Currently, it does the simplest thing possible, which is to just place labels in the middle of the line, ignoring text-max-angle limitations. I think we should actually implement some form of text-max-angle support (either hiding labels that don't pass or moving them away from center until they do pass).

I added a simple test case using one of our Berlin test tiles:

I think it highlights one of the potential problems with using "line-center" on data in existing sources: the data is kind of organized by features (I have feature IDs mapped to colors in this example), but those features can be broken down into individual lines in ways that might not make much sense to a style designer. And of course the "center" they have in mind could easily be the center of multiple joined features.

I know @ajashton and @nickidlugash had in mind using this specifically on source layers designed for center labeling (e.g. a center line for a body of water)... to get a better feel for that use case, it would be helpful for us to design an actual vector tile taking advantage of the large buffers to do center-placing across tile boundaries. We can't just use GeoJSON like we do in most tests because that'll automatically get chopped up at tile boundaries (huh, I guess that could be an issue for someone trying to add cross-tile center-placed labels at runtime, too).

briefly describe the changes in this PR
write tests for all new functionality
document any changes to public APIs
post benchmark scores
manually test the debug page
tagged @mapbox/studio and @mapbox/maps-design if this PR includes style spec changes

/cc @ansis

ChrisLoer · 2018-06-19T18:35:46Z

@mourner pointed out that maybe it makes sense to use mergeLines on features with symbol-placement: line-center. I tried it out on the same Berlin tile and ended up with:

Just looking at the image, I don't think there's much of a win in terms of developing an intuition for what the "center" of a line really means. On the other hand, using mergeLines could undermine explicit decisions made in the data layer to support line-center placement... so I think it probably makes sense to skip the merge step?

ajashton · 2018-06-19T19:03:55Z

On the other hand, using mergeLines could undermine explicit decisions made in the data layer to support line-center placement... so I think it probably makes sense to skip the merge step?

Agree. I think it's fine that line-center will require special consideration / prep of the underlying data. We already have a similar prep requirement for the much more basic task of labeling a polygon (without repeated labels across tiles).

nickidlugash · 2018-06-19T19:16:37Z

to get a better feel for that use case, it would be helpful for us to design an actual vector tile taking advantage of the large buffers to do center-placing across tile boundaries.

@ChrisLoer We have line geometries in the marine_label layer of mapbox-streets-v7 that are formatted for this purpose – will that work for testing? (I pulled this branch and took a look at these on the debug page – looks 👌 !)

ChrisLoer · 2018-06-19T19:24:32Z

@ChrisLoer We have line geometries in the marine_label layer of mapbox-streets-v7 that are formatted for this purpose – will that work for testing?

Yeah, if you could point me to a good tile in streets-v7 to test against (preferably one in which the label will go well past the edge of the tile), I can download that as a fixture and write a test case around it.

For text-max-angle, does the "don't show anything if max angle check doesn't pass" behavior sound right to you?

nickidlugash · 2018-06-19T20:45:57Z

if you could point me to a good tile in streets-v7 to test against (preferably one in which the label will go well past the edge of the tile), I can download that as a fixture and write a test case around it.

Tiles 4/4/7 and 4/5/7 are adjacent tiles that have a relevant line crossing the two of them.

For text-max-angle, does the "don't show anything if max angle check doesn't pass" behavior sound right to you?

I think this sounds right. What is the alternative – disabling text-max-angle for symbol-placement: line-center? Although I imagine that anyone using this placement method would be pretty lenient on the max angle (since the label is not repeated), I could still see wanting the option to hide any labels that look really distorted. I think I would just want to double check that the text-max-angle default of 45 is reasonable for center lines. If necessary, we could make the default different depending on the symbol placement (since we do have precedent for dependencies in default values), but hopefully we wouldn't have to add this complexity.

By the way, some food for thought: the symbol-placement property is not data-driven, and my understanding is that we're not likely to make it DDS anytime soon due to the level of complexity (since it has many cascading changes to the rendering of a symbol). If we are interested in making different line placement options data-driven, it may be simpler to add a new style property for line placement behavior (so center line behavior would look something like symbol-placement:line + line-placement:center). I raised this question to others on the cartography team, and we all don't have any strong feelings right now towards needing to make line placement behavior data-driven. So this current implementation of the style spec seems fine (all else equal, adding an additional value to an existing property rather than a new property seems desirable), but I just wanted to raise the issue for others to consider as well.

ChrisLoer · 2018-06-19T21:01:06Z

What is the alternative – disabling text-max-angle for symbol-placement: line-center?

Either disabling it, or relaxing the "center" part and trying to re-sample until we find something close to the center that still fits. I think just hiding sounds right, though, I'm implementing it now.

So this current implementation of the style spec seems fine (all else equal, adding an additional value to an existing property rather than a new property seems desirable), but I just wanted to raise the issue for others to consider as well.

Yeah that is good food for thought, although I don't feel like I could say anything very informed about it. I think implementation-wise it would not be too hard to make something like line-placement: center data-driven since there's not much change to the rendering code. Do we have any use cases in mind where we'd want this to be data-driven?

ChrisLoer · 2018-06-21T21:15:39Z

Here's a render of just 4/5/7:

You can see the line for the marine_label gets clipped at the tile boundary, but the center-placed label itself is allowed to render far off the edge of the tile.

Writing the test made me realize some problems, though... if we allow line-center symbols to be added outside of the drawing area:

If collision detection is off, we can get double-draw for the same label present in two adjacent tiles.
If collision detection is on, only one of the symbols will draw 👍. But the two symbols from adjacent tiles won't have the same crossTileID (because their tiles don't have a parent/child relationship). So if you rotate the map and thus change which tile gets placed first, the "placed" one can swap states with the "not-placed" one, and that's going to show up as a flickery fade-in/out.

🤔 I don't have an immediate strategy in mind for addressing those issues -- I think it would require something like a CrossTileSymbolIndex that could handle arbitrary tile relationships (any other ideas @ansis?). On the other hand, the problems might not be that bad...

We could also try to avoid including the "same" label in multiple tiles, but then you'd have the downside that you'd depend on one particular tile getting loaded to show the label.

ChrisLoer · 2018-06-21T21:30:47Z

Err, after thinking about this for a second more, it occurs to me that I probably just imagined the "draw symbols anchored outside the tile boundaries" requirement. I think the actual requirement may just be that the labels themselves should be able to draw across tile boundaries -- in which case we'd be able to skip the problems I just brought up.

The only downside would be the same as in the "only include data in a single tile" case... The tile containing the center-point of the label would have to be loaded before a label could show, so for example you might expect a label that looked like "Carr..." clipped against the right edge of the screen, but it wouldn't start displaying until you moved a bit further to the right, you loaded the tile that contained the center of the label, and "Carribe..." started showing clipped against the right edge.

nickidlugash · 2018-06-26T14:59:59Z

The tile containing the center-point of the label would have to be loaded before a label could show

@ChrisLoer – @ajashton and I both think this behavior is fine 👍

ansis · 2018-06-26T15:11:38Z

The tile containing the center-point of the label would have to be loaded before a label could show

Yep, I agree. We already have this behavior for all non-centered labels so if we need to fix it we'll need to find a way that works for all labels.

ChrisLoer · 2018-06-26T17:48:47Z

OK, I think this is ready to go pending review/edits, then!

@samanpwbb do you or anyone from Studio want to weigh in before we publish this? I think from a Studio UI point of view this should be pretty simple, my only concern would be that using symbol-placement: line-center effectively requires more awareness/coupling with the underlying data than just using symbol-placement: line, so it has a bit of that "advanced feature" smell.

nickidlugash · 2018-06-26T19:12:10Z

src/style-spec/reference/v8.json

@@ -861,6 +861,9 @@
        },
        "line": {
          "doc": "The label is placed along the line of the geometry. Can only be used on `LineString` and `Polygon` geometries."
+        },
+        "line-center": {
+          "doc": "The label is placed at the center of the line of the geometry. Can only be used on `LineString` and `Polygon` geometries. Note that a single feature in a vector tile may contain multiple line geometries. The center is calculated based on the entirety of the geometry included in the tile buffers, and the label may extend past the edge of the tile."


@samanpwbb you may want to review this description, since Studio will display this text for the property value tooltip.

This description is a little on the long side. Is the last sentence necessary?

mollymerp

this looks good to me! it might be a good idea to add some unit tests for this but the render tests are looking good so I'm not toooo concerned
also I think we'll need to add some ignores to gl-native for this one 😅

mollymerp · 2018-07-03T18:00:17Z

src/symbol/get_anchors.js

+                            glyphSize: number,
+                            boxScale: number): number {
+    return shapedText ?
+        3 / 5 * glyphSize * boxScale :


a comment explaining the magic 3/5 number might be a good idea 🔢

@ansis or @nickidlugash do you know the origin of this magic number? I guess I just assumed it was something "experimentally reasonable".

ChrisLoer · 2018-07-03T19:39:42Z

Good idea on unit tests for getCenterAnchor, I'll put some in.

samanpwbb · 2018-07-03T20:14:14Z

src/style-spec/reference/v8.json

@@ -861,6 +861,9 @@
        },
        "line": {
          "doc": "The label is placed along the line of the geometry. Can only be used on `LineString` and `Polygon` geometries."
+        },
+        "line-center": {


Can we add more specific compatibility info? See

mapbox-gl-js/src/style-spec/reference/v8.json

Lines 1035 to 1040 in a8cb4c4

"`auto` value": {

"js": "0.25.0",

"android": "4.2.0",

"ios": "3.4.0",

"macos": "0.3.0"

},

for example.

Good idea -- this look right?

samanpwbb · 2018-07-03T20:15:45Z

src/style-spec/reference/v8.json

@@ -861,6 +861,9 @@
        },
        "line": {
          "doc": "The label is placed along the line of the geometry. Can only be used on `LineString` and `Polygon` geometries."
+        },
+        "line-center": {
+          "doc": "The label is placed at the center of the line of the geometry. Can only be used on `LineString` and `Polygon` geometries. Note that a single feature in a vector tile may contain multiple line geometries. The center is calculated based on the entirety of the geometry included in the tile buffers, and the label may extend past the edge of the tile."


This description is a little on the long side. Is the last sentence necessary?

With this placement option, we will attempt to place a single label in the center of each "line" geometry of a feature. If the label doesn't fit or the 'text-max-angle' check fails, we don't place anything. Labels using 'line-center' are allowed to extend past the edge of the tile they're centered in, following line geometry included in the tile's buffers.

andrewharvey · 2018-07-10T06:24:03Z

hey @ChrisLoer did you need to do yarn run codegen to update src/style/style_layer/symbol_style_layer_properties.js with the new line-center option?

ChrisLoer · 2018-07-10T16:21:44Z

Oops, yeah, thanks for catching that @andrewharvey! #6943

ChrisLoer added the under development 🚧 label Jun 14, 2018

ChrisLoer force-pushed the symbol-line-center branch from 05c8f31 to e33d2fa Compare June 26, 2018 17:44

ChrisLoer changed the title ~~WIP: symbol-placement: line-center~~ symbol-placement: line-center Jun 26, 2018

ChrisLoer added feature 🍏 and removed under development 🚧 labels Jun 26, 2018

ChrisLoer requested a review from ansis June 26, 2018 17:45

nickidlugash reviewed Jun 26, 2018

View reviewed changes

ChrisLoer requested a review from mollymerp July 2, 2018 18:12

mollymerp approved these changes Jul 3, 2018

View reviewed changes

samanpwbb suggested changes Jul 3, 2018

View reviewed changes

ChrisLoer added 2 commits July 3, 2018 13:51

Add getCenterAnchor unit tests.

251b007

ChrisLoer force-pushed the symbol-line-center branch from a8cb4c4 to 251b007 Compare July 3, 2018 21:01

samanpwbb approved these changes Jul 3, 2018

View reviewed changes

ChrisLoer merged commit ab807d2 into master Jul 3, 2018

This was referenced Jul 3, 2018

Port symbol-placement: line-center to native mapbox/mapbox-gl-native#12300

Closed

Add placement logic for a single centered line label? #5061

Closed

ChrisLoer deleted the symbol-line-center branch July 10, 2018 16:21

mourner mentioned this pull request Jul 25, 2018

text-anchor, text-justify inconsistent with symbol-placement lines #4822

Closed

justenPalmer mentioned this pull request Dec 5, 2018

Option dont_clip for layer go-spatial/tegola#562

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`symbol-placement: line-center` #6821

`symbol-placement: line-center` #6821

ChrisLoer commented Jun 14, 2018 •

edited

Loading

ChrisLoer commented Jun 19, 2018

ajashton commented Jun 19, 2018

nickidlugash commented Jun 19, 2018

ChrisLoer commented Jun 19, 2018

nickidlugash commented Jun 19, 2018

ChrisLoer commented Jun 19, 2018

ChrisLoer commented Jun 21, 2018

ChrisLoer commented Jun 21, 2018

nickidlugash commented Jun 26, 2018

ansis commented Jun 26, 2018

ChrisLoer commented Jun 26, 2018

nickidlugash Jun 26, 2018

samanpwbb Jul 3, 2018

mollymerp left a comment

mollymerp Jul 3, 2018

ChrisLoer Jul 3, 2018

ChrisLoer commented Jul 3, 2018

samanpwbb Jul 3, 2018

ChrisLoer Jul 3, 2018

samanpwbb Jul 3, 2018

andrewharvey commented Jul 10, 2018

ChrisLoer commented Jul 10, 2018

	"`auto` value": {
	"js": "0.25.0",
	"android": "4.2.0",
	"ios": "3.4.0",
	"macos": "0.3.0"
	},

symbol-placement: line-center #6821

symbol-placement: line-center #6821

Conversation

ChrisLoer commented Jun 14, 2018 • edited Loading

ChrisLoer commented Jun 19, 2018

ajashton commented Jun 19, 2018

nickidlugash commented Jun 19, 2018

ChrisLoer commented Jun 19, 2018

nickidlugash commented Jun 19, 2018

ChrisLoer commented Jun 19, 2018

ChrisLoer commented Jun 21, 2018

ChrisLoer commented Jun 21, 2018

nickidlugash commented Jun 26, 2018

ansis commented Jun 26, 2018

ChrisLoer commented Jun 26, 2018

nickidlugash Jun 26, 2018

Choose a reason for hiding this comment

samanpwbb Jul 3, 2018

Choose a reason for hiding this comment

mollymerp left a comment

Choose a reason for hiding this comment

mollymerp Jul 3, 2018

Choose a reason for hiding this comment

ChrisLoer Jul 3, 2018

Choose a reason for hiding this comment

ChrisLoer commented Jul 3, 2018

samanpwbb Jul 3, 2018

Choose a reason for hiding this comment

ChrisLoer Jul 3, 2018

Choose a reason for hiding this comment

samanpwbb Jul 3, 2018

Choose a reason for hiding this comment

andrewharvey commented Jul 10, 2018

ChrisLoer commented Jul 10, 2018

`symbol-placement: line-center` #6821

`symbol-placement: line-center` #6821

ChrisLoer commented Jun 14, 2018 •

edited

Loading