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

[Beeze]

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>
  );
}

[Beeze]

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>
  );
}

[Beeze]

updated to doing it via the same way they do it in londonCycle example. and still doesn't work. No errors

const MapComponent = (props) => {
  // [Long, Lat]
  const center = [-83.3677, 42.4990] as [number, number];

  const [images, setImages] = React.useState(null)
  React.useEffect(() => {
    // Create an image for the Layer
    const markerImage = new Image(30,30)
    markerImage.src = 'data:image/svg+xml;charset=utf-8;base64,' + btoa(svg);
    setImages(['marker', markerImage])
  }, [])

  if (images === null) {
    console.log("null")
    return null
  }

  console.log(images)

  const layerLayout = { 'icon-image': 'marker' }
    
  return (
    <div>
      <img height="30" width="30" src={'data:image/svg+xml;charset=utf-8;base64,' + btoa(svg)} />
      <Map
        style="mapbox://styles/beezebrown/ckj9ivjqk2tqt19nd4briqiwq"
        center={ center }
        containerStyle={{
          position: 'relative',
          height: '50vh',
          width: '100%'
        }}
      >
        <Layer 
          type="symbol" 
          id="marker" 
          layout={layerLayout} 
          images={images}
        >
          <Feature coordinates={center} />
        </Layer>
      </Map>
    </div>
  );
}

[Beeze]

note that the img works correctly with the exact same src as what I'm providing in the images object

[Beeze]

<img height="30" width="30" src={'data:image/svg+xml;charset=utf-8;base64,' + btoa(svg)} />

[FrederickEngelhardt]

Same issue. Can't get features to load like the demo example here with copy pasting the code. https://alex3165.github.io/react-mapbox-gl/

I'm on V5.1.1

[Beeze]

@alex3165 @daniel-hauser

[DonovanCharpin]

Any news on this @Beeze ? I have the same issue, sometimes it loads, sometimes it does not. I can see that the images are properly loaded but the features are not showing up.

const  = PointsOfInterest = [
  {
    value: "restroom",
  },
  {
    value: "men-restroom",
  },
  {
    value: "women-restroom",
  }
]

getImagesPointsOfInterest() {
    return PointsOfInterest.map((poi) => {
      const image = new Image(30, 30);
      image.src = `/images/floor-mapping/icons/${[poi.value]}.png`;

      return [[poi.value], image];
    });
  }

<Layer
  id="points-of-interest"
  type="symbol"
  layout={{ "icon-image": ["get", "icon"] }}
  images={this.getImagesPointsOfInterest()}>
    {pointsOfInterest.map((poi, index) => {
      return (
        <Feature
          key={poi.uuid}
          properties={poi.properties} // ex : {icon: "restroom"}
          coordinates={poi.geometry.coordinates}
        />
      );
    })}
</Layer>

[jon11w]

HI, any solution on this? Getting the exact same issue; directly copying the examples from the github but getting no feature displayed.

[Beeze]

I couldn’t figure it out, i added deck.gl, and used all their hooks to get this to work. Also, this use case is easier (and better supported) on google maps.

Leigh Halliday on YouTube has example code/videos with both these frameworks

[DonovanCharpin]

Same on my side, switched to deck.gl/nebula.gl. You can do it with an IconLayer.

[jon11w]

I ended up ditching MapBox for Leaflet after seeing that this was unresolved. Hopefully it's addressed in the future.

[3JTek]

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>

[zning]

@alex3165 @daniel-hauser I understand that you guys might pretty busy but any updates on this? I think lot of guys having issues on this, which should be the first thing to fix if there's any fix in plan. Thanks a lot~

[Skasix00]

Hey guys!! I'm having the same issue here... It's pretty disappointing that they aren't listening to us really.

<Map center={[-0,0]} zoom={[10]} style='mapbox://styles/bcastelo/ckn8pch7b01a817qw1pnjj26w' className="containerStyle" > <Layer type="symbol" id="marker" layout={{ 'icon-image': 'map_pin' }}> <Feature coordinates={-0,0]} /> </Layer> </Map>

[Skasix00]

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>

Tried it but to no avail. Didn't worked for me...

It wordked!!!!!!