<ReactMapGL>
//...
{iconLoaded && userLocationFeature && (
<Source
key="user-location"
id="user-location"
type="geojson"
data={userLocationFeature}
>
<Layer
id="user-location-pin"
type="symbol"
source="user-location"
layout={{
'icon-image': iconName,
'icon-size': 0.1,
'icon-anchor': 'bottom',
}}
/>
</Source>
)}
//...
</ReactMapGL>
My image gets loaded into the map and displays just fine if I don't have the icon-anchor property set. However, setting it to the bottom causes the icon to flip completely (e.g. before, it was an upside down triangle, but setting this flips it to right side up). Additionally, left anchor flips the icon left over its middle axis, and so on. IIt does this for any of the anchor values, for that matter. The icon, by default, is shaped like an upside down triangle. Instead of being centered, I want the bottom tip just over the point on the map.
From all the documentation I've read, mapbox and react-map-gl do not address this as a potential issue. I doubt its a bug on their end but perhaps an issue on mine, but I can't think of any ideas of what could be wrong? My base icon image is rather large at 1090x1090, but is shrunked down greatly on the map as you can see. Not sure if that may be playing into it?