mapbox / mapbox/mapbox-gl-js

Add a "square" or "rectangle" layer type

Open
#13,456 1 comment 0 reactions 0 assignees View on GitHub
needs information :pray:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

We are using mapbox GL JS to display a rather large dataset of about 100,000 GeoJSON points. It is very performant when displayed with a `circle` layer. For design and UX reasons, we wanted to switch to a `symbol` layer using sprites for square icons, but it struggles heavily when displaying such a large dataset. We switched back to the `circle` layer for now.

My team was wondering if it would be possible to have something like a `square` or `rectangle` layer, so that each point is displayed as a square with about the same level of customizability and rendering performance as the `circle` layer.

## Design

The design and usage would be relatively similar as the circle layer, but it would display each point of the dataset as squares instead. The advantages and drawbacks would be more or less the same as the `circle` layer, but would allow for more versatile maps with more varied ways to display dense data.

It could include extra `paint` properties specific to squares/rectangles such as border radius or rotation angle.

Contributor guide

Open the contributing guide

Research direction

Start by comparing the existing circle and symbol layer implementations in mapbox-gl-js and review how their paint properties support large GeoJSON datasets. Define the square or rectangle layer's scope and rendering requirements before implementation; done means a performant point layer with circle-like customization and agreed square-specific properties.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend, performance
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.