Symbols text/icon pointing to the actual point/poi on map in pitched mode (Parity with Google Maps)

[mb12]

Motivation

When the map is pitched, its difficult to associate the symbol name/icon with the actual point to which it is referring to. This style would make reading maps more feasible and actually useful when it is pitched.
I have also attached a screenshot from Google maps illustrating this.

Design Alternatives

Design

See attached screenshot.

Mock-Up

See attached screenshot.

Concepts

Implementation

[andrewharvey]

I'm strongly for supporting this as part of a generalisation of fill-extrusion to support points and lines (these leader lines are just extruded points) together with #3993 to elevate a symbol

[ansis]

With multi-icon symbols the leader line could be implemented as an icon. Do you think it makes sense to add this on to that issue? #4366

cc @ChrisLoer who is working on multi-text right now

[peterqliu]

check it

This was implemented in two symbol layers, or one if multi-text is implemented:

• each label a text, with negative text-offset applied in the y axis, to effect a vertical shift upward
• each leader line also a text layer, either
  • a text-field of --------, rotated 90 degrees, with negative text-spacing to remove the spaces between the hyphens (as done above)
  • a long character like |, though it won't let you control for length
  • producing a custom font with the line as a glyph

Note that this produces labels that are always coplanar with the display, rather than staying perpendicular with the ground plane.

With multi-icon symbols the leader line could be implemented as an icon.

This works, but the raster-ness of icons limits our ability to resize and recolor. With text we would get these for free.

I'm strongly for supporting this as part of a generalisation of fill-extrusion to support points and lines (these leader lines are just extruded points) together with #3993 to elevate a symbol

this is tricky, because extrusions are in units of meters while text offsets are in units of px or ems, making the two hard to synchronize. This is further compounded by zooming, and different px-meter relationships with changing latitudes. However, this would be valuable if ground-plane perpendicularity is important.

[mb12]

@ansis and @peterqliu The length of the line is a function of the pitch in G's version. It disappears when pitch==0 and placement devolves into vanilla placement without line. Would the multi icon approach model this as well?
You can use the following gestures in G's satellite mode to see this in action.

1. ctrl + mouse drag up/down (to change pitch)
2. ctrl + mouse drag right/left to rotate

[ChrisLoer]

Awesome work as always @peterqliu ! 😄

Note that this produces labels that are always coplanar with the display, rather than staying perpendicular with the ground plane.

"perpendicular to the ground plane" would basically mean the leader line length varied between 0 and 100%, as a function of pitch going from 0 to 60 degrees, right?

This is getting deep into hacky territory, but just as a thought exercise: we could expose pitch as a parameter to what we currently call "zoom dependent expressions" in order to scale the leader line smoothly with pitch. The thing is text-offset is only calculated at tile layout time, so you'd have to implement the offset with something like a transparent glyph that changed size with a zoom/pitch-dependent text-size.

[ansis]

Another way to look at this would be the main icon being placed at a certain altitude z. And a second icon with height z that is rotated vertically. So, some complex combination of altitude + rotation + multi-icon might be able to do this.

[peterqliu]

This is getting deep into hacky territory, but just as a thought exercise: we could expose pitch as a parameter to what we currently call "zoom dependent expressions" in order to scale the leader line smoothly with pitch.

I don't think this would be hacky at all! Here it is by updating layout on the pitch event, and an expression embed would make it even tidier. Key snippet:

map.on('pitch', function(){
	var ratio = map.getPitch()/60
	map
		.setLayoutProperty('leaderline', 'text-size', ratio*16)
		.setLayoutProperty('label', 'text-offset', [0, -6*ratio])
})

"perpendicular to the ground plane" would basically mean the leader line length varied between 0 and 100%, as a function of pitch going from 0 to 60 degrees, right?

Yup, that's what the variable text-size is trying to simulate above ☝️, and what @mb12 seems to be getting at. Though interestingly, the text label still aligns to the screen, even when the line behaves like a real-world lamppost in the map world.

[mb12]

@peterqliu This is pretty much it. The performance is also very good.

[andrewharvey]

this is tricky, because extrusions are in units of meters while text offsets are in units of px or ems, making the two hard to synchronize. This is further compounded by zooming, and different px-meter relationships with changing latitudes. However, this would be valuable if ground-plane perpendicularity is important.

@peterqliu Good point. Ideally the z offset for the leader line and symbol would be in screen space (pixels) but still sitting on top of any real world fill-extrusion or 3d-lines.

[mb12]

@peterqliu One problem with this solution is that text-allow-overlap is set to true for both leaderline and label. So if there are too many symbols, the map would look really cluttered. However if we turn it off, there is no way to prevent leading lines from disappearing while keeping the symbol intact and vice-versa.

[peterqliu]

However if we turn it off, there is no way to prevent leading lines from disappearing while keeping the symbol intact and vice-versa.

@mb12 sounds like a job for the future multi-text symbol layers #7025 (comment) if the label is text. But if the label an icon (as in your Google Maps example), we can combine the two in one symbol layer, for all-or-nothing visibility.

[rbrundritt]

Perhaps a pitch expression would be a good option.