Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for adding custom image at runtime using map.addImage

See original GitHub issue

Mapbox-gl allow to add custom images at runtime using loadImage and addImage, I don’t think loadImage is necessary, instead user should pass an HTMLImageElement to addImage and query for the image by their own using new window.Image().

In term of API I am not sure what is best between using prop of Layer component:

<Layer
  addImage={image}
>
</Layer>

Or having a component for that:

<ImageSource image={image}/>

See: https://www.mapbox.com/mapbox-gl-js/api/#map#addimage

Issue Analytics

State:
Created 6 years ago
Comments:15 (3 by maintainers)

Top GitHub Comments

16reactions

alex3165commented, Sep 11, 2017

For reference, the prop images has been added to react-mapbox-gl with the release 2.5.0, it can be use this way:

const image = new Image(30, 30);
image.src = 'image_source_url_or_base64';

const images = ['myImage', image];
...
<Layer
  layout={{ icon-image: 'myImage' }}
  images={images}
/>

4reactions

Validcommented, Dec 25, 2017

This works for me (shows the image) but gives me a few errors when removing the <Layer> the new image is associated with:

const image = new Image(40, 60);
image.src = '/img/new-icon.svg';

const images = ['newIcon', image];

{show && (
<Layer
  type="symbol"
  layout={{ 'icon-image': 'newIcon' }}
  images={images}
>
...
)}

Errors when !show:

mapbox-gl.js:484 Uncaught TypeError: Cannot read property 'style' of undefined
    at e.removeImage (mapbox-gl.js:484)
    at Array.forEach (<anonymous>)
    at Layer../N:/Dropbox/Work/wildcrowd-web-app/node_modules/react-mapbox-gl/lib/layer.js.Layer.componentWillUnmount (layer.js:129)
    at ReactCompositeComponent.js:406
    at measureLifeCyclePerf (ReactCompositeComponent.js:73)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:405)
    at Object.unmountComponent (ReactReconciler.js:76)
    at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:415)
    at Object.unmountComponent (ReactReconciler.js:76)
    at Object.updateChildren (ReactChildReconciler.js:128)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:204)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:308)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js:295)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:944)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js:758)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:720)
    at Object.receiveComponent (ReactReconciler.js:122)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:751)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:721)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:642)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:544)
    at Object.receiveComponent (ReactReconciler.js:122)
    at Object.updateChildren (ReactChildReconciler.js:107)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:204)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:308)
    at ReactDOMComponent.updateChildren (ReactMultiChild.js:295)
    at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:944)
    at ReactDOMComponent.updateComponent (ReactDOMComponent.js:758)
    at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:720)
    at Object.receiveComponent (ReactReconciler.js:122)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:751)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:721)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:642)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:558)
    at Object.performUpdateIfNecessary (ReactReconciler.js:154)
    at runBatchedUpdates (ReactUpdates.js:148)
    at ReactReconcileTransaction.perform (Transaction.js:141)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:141)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:87)
    at Object.flushBatchedUpdates (ReactUpdates.js:170)
    at ReactDefaultBatchingStrategyTransaction.closeAll (Transaction.js:207)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:154)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:60)
    at Object.batchedUpdates (ReactUpdates.js:95)
    at dispatchEvent (ReactEventListener.js:145)

and

An image with this name already exists.
    at t.addImage (mapbox-gl.js:374)
    at e.addImage (mapbox-gl.js:484)
    at layer.js:89
    at Array.forEach (<anonymous>)
    at Layer._this.initialize (layer.js:88)
    at e.Layer._this.onStyleDataChange (layer.js:101)
    at e.Evented.fire (mapbox-gl.js:510)
    at e._onData (mapbox-gl.js:484)
    at e.Evented.fire (mapbox-gl.js:510)
    at t.Evented.fire (mapbox-gl.js:510)
    at t.update (mapbox-gl.js:374)
    at e._render (mapbox-gl.js:484)