mapbox / mapbox/mapbox-gl-js

Repeating symbol patterns

Open
#6,295 10 comments 29 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

cross-platform :tv: feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

background: this is based on the work here

General Idea
Fill patterns that consist of repeated symbols spaced within a grid. As the map zooms in and as the space between symbols increase, new symbols fade in as the user crosses an integer zoom level.

Pattern types
Currently, I have observed two types of patterns used in Mapbox maps: ‘continuous patterns’ and ‘discrete symbol patterns.’ I believe this new feature would only be for the discrete symbol patterns, but I could be wrong.

proposal-2-1

a = continuous patterns

  • extend to polygon edges/cropped by the polygon edges

b = discrete symbol patterns

  • comprised of a single symbol that is repeated
  • space in-between symbols can be specified
  • alignment of rows can be either 45º (b.1) or 0º (b.2)
  • pattern cropping occurs by deleting entire symbols that overlap with polygon edges

Positioning and spacing of symbol patterns
Symbols could be placed at grid intersections and center points of the grid modules. I am unsure on whether or not the user should be able to create the grid from scratch, but it's important that the user can control the 'tightness' or density of the symbol repetition. Parameters to consider:

  • grid module shape ex: square, hexagon, triangle, etc
  • width/radius of grid module (a)
  • symbol scale (b)

By defining some or all of these parameters, the user should be able to produce a large variety of pattern densities. Depending on how many module shapes or grid types are available this variety would increase along with the ability to create more complex patterns.

proposal-2-2

Symbol patters with multiple symbols
Maps that require a large variety of fill patterns will often combine symbols to create patterns: this allows the user to create a lot of patterns but reduce the overall amount of symbols used in the map. I could see this approach being valuable here, and one potential implementation would be to allow the user to define a second symbol used for the ‘center points’ of the grid. Personally, I would only use this option with a square grid, but the symbol combinations that emerge with hexagonal and triangular grids is interesting.

proposal-2-3

Randomness
With a lot of pattern applications in older maps, patterns are hand drawn. This results in overall patterns that are not aligned to a grid, but the pattern density is evenly distributed. Some use cases could benefit from a ‘random’ grid, that doesn’t have to be strictly random, but visually looks random and symbol density is evenly distributed. One way this could be implemented is by establishing symbol points within a grid and creating a controlled range that each point can shift within.

screen shot 2018-03-08 at 3 50 22 pm

Edges
Continuous patterns (a) should extend to the polygon edge, whereas patterns using symbols should remove symbols that intersect with the polygon edges. If symbol patterns are used for a polygon that is also receiving an outline, I could see a more traditional cropping of symbols to the polygon edge being attractive in some use cases.

proposal-2-4

Rotation & Pitch
Regarding rotation, I could see both options attractive to have: having the symbols rotate with the map, and being fixed (not rotating).
Regarding pitch, symbol anchor points should be translated to the map, not the viewport. However, when the map is pitched, symbols might look best if ones in the foreground were larger than symbols in the background.

Label collision
Having an option to create a subtle patterns that labels sit on, and also more prominent patterns that avoid label collisions would be ideal.

cc @ansis @kkaefer @eschow @nickidlugash

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 by reviewing the linked earlier proposal and the existing map pattern and symbol-rendering entry points. Clarify which pattern types, grid controls, edge behavior, rotation, pitch, randomness, and label-collision rules are in scope; done should be defined by an agreed implementation and corresponding rendering behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.