0

I am showing marker by using layer property.

import markerIcon from "../map-marker.png";
const image = new Image();
image.src = markerIcon;
const images = ['customImage', image];

<Mapbox
    style="mapbox://styles/mapbox/streets-v8"
    containerStyle={{
        height: "100vh"
    }}
    >
    <Layer
        type="symbol"
        id="marker"
        layout={{
        "icon-image": "customImage",
        "icon-allow-overlap": false
        }}
        images={images}
    >
        <Feature
            key="1"
            coordinates={[-0.2416815, 51.5285582]}
        />
        <Feature
            key="2"
            coordinates={[-0.3416815, 51.6285582]}
        />
    </Layer>
</Mapbox>

Above code is working properly. But, my requirement is that I want to show 2 different images for 2 markers. Right now I have shown 2 sample coordinates (Features). Is it possible to show different images for different features? I am not getting any help regarding this. Any help will be appreciated. Thanks in advance.

Mahesh Gaikwad
  • 192
  • 2
  • 18

1 Answers1

-2

Assuming you're using pure MapboxGL, follow these directions to put a custom image on a marker. It provides a very clear example on your problem. FYI, you want to use markers instead of features whether you are using pure Mapbox or a wrapper.

If you're using a wrapper for Mapbox, let me know and we can work around it.

lve
  • 307
  • 2
  • 5
  • 15