visgl / visgl/react-map-gl

[Feat] Add onStyleImageMissing callback for Map

Open
#2,086 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature
Dominant language
TypeScript
Stars
8.5k
Forks
1.4k
Avg merge
5d 17h
Merged PRs (30d)
3

Description

Target Use Case

Mapbox throws a warning when you try to load an image that hasn't been added.

Image [...] could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

They have a new map event, styleimagemissing, that I think should be exposed by this React Wrapper. Unless this is already an event type that's supported with another callback handler that I've been overlooking.

Proposal

The usage might look something like this. I'm happy to help contribute in this feature if it's something that folks think would be good to add. I'll wait to hear back from a maintainer first though 😄

<Map
   {...initialViewState}
   mapboxAccessToken={MAPBOX_TOKEN}
   projection={'globe'}
   style={{ position: 'absolute', top: '0', bottom: '0', left: '0', right: '0' }}

   onStyleImageMissing={evt => {
      evt.target.loadImage(
         "./icons/mapbox-marker-icon-20px-red.png",
         (error, image) => {
            if (error)
               throw error;
            evt.target.addImage(mapImages.Default, image);
         }
      );
   }}
/>

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 Map component's event-handler API and the Mapbox styleimagemissing event documentation linked in the issue. Trace how existing map events are exposed, then verify that an onStyleImageMissing prop receives the event; the issue's usage example defines the expected behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.