mapbox / mapbox/mapbox-gl-js

Support For Multi-Image Sources + Raster Layers

Open
#10,919 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation
Mapbox currently supports an `image` source + `raster` layer, which can display a single image over a map. For example: https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/

If you were to build a real world application with the above though, you would need a separate `image` source & `raster` layer for every single image, which quickly becomes unmanageable (and presumably, bad for performance).

Some use cases:
- Adding building interior raster images
- Adding weather pattern overlays
- Adding custom captured drone satellite imagery

Often it isn't possible or performant to create a full tile raster layer for the above use cases, and there would be many "holes" in the map (e.g. for building interiors)

## Design Alternatives
- Adding an image source + raster layer for every single image (messy + likely impacts performance)
- Building a complete raster tile layer by combining all images into one (non-performant in case layer has many holes/gaps + requires overhead to regenerate all tiles every time a new image is added)

## Design

Not knowing anything about Mapbox internals, I can't really suggest an implementation, but from an API consumer perspective, something like the below would be ideal:

```
map.addSource('radar', {
'type': 'image',
'images': [{
'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
'coordinates': [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
}]
});
```

And being able to display the `radar` source in a single raster layer like below:

```
map.addLayer({
id: 'radar-layer',
'type': 'raster',
'source': 'radar',
'paint': {
'raster-fade-duration': 0
}
});
```

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 implementation files or tests are named. Start by tracing the existing image source and raster layer entry points behind the linked image-on-a-map example; done means one image source accepts multiple images and a single raster layer displays them as proposed.

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.