mapbox / mapbox/mapbox-gl-js

Support for Multiple Images in Raster Source

Open
#12,742 1 comment 4 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

I would like to request a new feature for Mapbox GL JS to support multiple images within a single set of coordinates in a raster source.

Currently, the raster image source in Mapbox GL JS accepts only a single URL for the image. However, there are cases where it would be beneficial to display multiple images within the same geographical area. This could be useful for scenarios such as providing additional context through multiple images.

To achieve this, I propose enhancing the raster image source to accept an array of image URLs instead of a single URL. Each URL in the array would correspond to a separate image, and they would be displayed within the same set of coordinates.

By supporting multiple images within a raster source, developers would have more flexibility in creating dynamic and interactive map visualizations. This feature would enhance the capabilities of Mapbox GL JS and open up new possibilities for creative map designs.

Thank you for considering this feature request. I believe it would greatly benefit the Mapbox GL JS community and contribute to a more versatile mapping experience.

```
map.addSource('my-raster-source', {
type: 'image',
url: 'https://example.com/path/to/image.png', // Here it should take multiple photos
coordinates: [
[lng1, lat1], // Top-left coordinate
[lng2, lat2], // Top-right coordinate
[lng3, lat3], // Bottom-right coordinate
[lng4, lat4] // Bottom-left coordinate
]
});
map.addLayer({
id: 'my-raster-source-layer',
'type': 'raster',
'source': 'my-raster-source'',
'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

Start from the map.addSource image-source entry point and the raster source behavior described in the issue. Determine how an array of image URLs should be represented and rendered over the shared coordinates; done means multiple images can be supplied and displayed within one raster source without breaking the existing single-URL form.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.