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.

Feature not showing up on map when using images prop with svg

See original GitHub issue

having an issue where feature doesn’t show up on map.

I’m loading a custom image with images prop. confirmed via logs the images prop is being set correctly.

import marker from './marker.svg';

// tslint:disable-next-line:no-var-requires
const { token, styles } = require('./config.json');

// full options found at: https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md
const Map = ReactMapboxGl({ accessToken: token });

const MapComponent = (props) => {

  const [images, setImages] = React.useState(null)
  React.useEffect(() => {
    const markerImage = new Image(30, 30)
      markerImage.src = marker
      setImages(['custom-marker', markerImage])
  }, [])

  // long, lat
  const center = [-83.0458, 42.3314] as [number, number];

  if (images === null) {
    return null
  }

  console.log(images)

  return (
    <Map
      style="mapbox://styles/mapbox/light-v9"
      center={center}
      zoom={[9]}
      containerStyle={{
        height: '100vh',
        width: '100vw'
      }}
    >
      {images.length > 0 ? (
        <Layer 
          type="symbol"
          id="marker"
          images={images}
          layout={{ 'icon-image': 'custom-marker' }}
        >
          <Feature coordinates={center} />
        </Layer>
      ) : (
        <div></div>
      )
    }
    </Map>
  );
}

Issue Analytics

State:
Created 3 years ago
Comments:15

Top GitHub Comments

6reactions

3JTekcommented, Apr 4, 2021

Hi Guys,

I think this bug has been introduced in v5.

I’ve installed v4.8.6 and it works (got the marker showing up)

<Map style="mapbox://styles/mapbox/streets-v8" zoom={[8]} containerStyle={{ height: '100%', width: '500px' }} > <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}> <Feature coordinates={[-0.481747846041145, 51.3233379650232]} /> </Layer> </Map>

6reactions

Beezecommented, Dec 21, 2020

even if i use the example from the npm page, still doesn’t work

 return (
    <Map
      style="mapbox://styles/mapbox/light-v9"
      center={[-0.481747846041145, 51.3233379650232]}
      zoom={[9]}
      containerStyle={{
        height: '100vh',
        width: '100vw'
      }}
    >
      <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
        <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
      </Layer>
    </Map>
  );
}