openlayers / openlayers/openlayers

Review of `ol/style/Image` and subclass options

Open
#13,993 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
12.6k
Forks
3.2k
Avg merge
2d 17h
Merged PRs (30d)
21

Description

Following on from https://github.com/openlayers/openlayers/pull/13975#issuecomment-1216276968 here are the options supported by the Mapbox specification https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol and their equivalents in OpenLayers.

icon-allow-overlap declutterMode

icon-anchor Similar to anchorOrigin but has more options so ol-mapbox-style sets an appropriate fractional anchor.

icon-color color

icon-halo-blur n/a

icon-halo-color n/a

icon-halo-width n/a

icon-ignore-placement declutterMode

icon-image Derived from sprite related options img, imgSize, offset, offsetOrigin, size, src.

icon-keep-upright n/a Relates to line placement icons, similar to keeping line placement text upright - Mapbox has a similar text-keep-upright option but OpenLayers does this unconditionally

icon-offset Corresponds to the current meaning of displacement "Each component is multiplied by the value of icon-size to obtain the final offset in pixels" (except OpenLayer is positive y up, Mapbox positive y down). Similarly ol-mapbox-style multiplies text-offset by text-size when setting offsetX and offsetY

icon-opacity opacity

icon-optional n/a

icon-padding n/a

icon-pitch-alignment n/a

icon-rotate rotation (OpenLayers uses radians, Mapbox degrees)

icon-rotation-alignment rotateWithView

icon-size scale

icon-text-fit n/a

icon-text-fit-padding n/a

icon-translate This could be achieved using anchor or displacement but unlike icon-offset the behavior is affected by icon-translate-anchor

icon-translate-anchor n/a How icon-translate relates to rotation - there is a similar text-translate-anchor option, which possibly corresponds to the differences seen in #13981 except that is text-offset not text-translate so it should not happen

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

Start with the Mapbox symbol-layer specification and the discussion in pull request #13975, then compare the listed options with ol/style/Image and its subclasses. A complete result would establish which options and equivalents should be supported or documented, including the unresolved points referenced in #13981.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.