mapbox / mapbox/simplestyle-spec

Extending spec with `marker-anchor`, `label` and `label-anchor`

Open
#38 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
No language data
Stars
296
Forks
116
PR merge metrics
No merged PRs in 30d

Description

Hello,

I suggest adding three additional properties to the spec.

### `marker-anchor`

In my practice, I noticed that `marker-anchor` is a commonly used property to define the relative position of the icon vs the actual position in the coordinate system.
[Google used pixel coordinates to set the anchor (x, y)](https://developers.google.com/maps/documentation/javascript/reference/marker).
[While Mapbox uses CSS like string positions (`center`, `bottom`, `bottom-left`...)](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker).

The current spec uses `center` as an anchor. This works well for symbols like `monument`, `bank`, `hospital`, `logo` etc.

For symbols like `pin`, `marker`, `location`, and `flag` it appears a bit off because they should be anchored to the `bottom`.

Currently, there is a workaround to create an icon with double the height while leaving the bottom half as a whitespace. This disables you from using icon links from public CDNs.

### `label`

Label is probably the most commonly used feature in geospatial files that I know. Labels are the text displayed on the map:
- Most commonly created by anchoring some text to a marker (or without it by not providing a `marker-symbol` at all).
- Also seen attached to streets, roads, routes, cables, pipes etc.
- And very loved on polygons as plot IDs, names, area values, prices etc.

I considered using `title` for `label`, but it just doesn't work in some cases:
- `Apple Inc.` vs just `Apple`
- `Kaunas University of Technology` vs `KTU`
- `Hospital of Lithuanian University of Health Sciences Kaunas Clinics` vs `Klinikos` abbr.

### `label-anchor`

`label-anchor` is mostly used as a balancing mechanism to align `marker-symbol` with `label` properly. The most common use case is to set `marker-anchor` as `bottom` and `label-anchor` as `top`.
Some maps have their own handling of `label-anchor` position (i.e. mapbox), while others don't (i.e. google).
In theory, it might be smart to set the default value for `label-anchor` as reverse to `marker-anchor`, but it might lead to some strange placement (i.e. while using corner placement).
There are also cases where you don't give a damn about label placement (`marker-symbol` = brand logo, `marker-anchor` = `center`, `label` = short brand name, and label on either side (in Latin preferably placed in either horizontal side because of horizontal text orientation compared to some Asian languages))

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named. Start by reviewing the existing simplestyle specification and determine how marker-anchor, label, and label-anchor should be defined, including defaults and interactions; done means the specification has an agreed, unambiguous treatment for all three properties.

Written by the indexing model from the issue text.

Assessment

Domain
documentation
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.