Annotation is rendering behind map

[willb335]

The annotation line is rendering behind the map, any help is appreciated.

https://codesandbox.io/s/peaceful-thunder-jk7dj?file=/src/App.js

[zimrick]

Hi @willb335, It seems that you are rendering the annotations (line + text) in the same iteration as the geographies, based on the geography data. That's perfectly fine to do in react-simple-maps. The only issue is that this will put certain annotations under the geographies that are rendered later. If you want the annotations to be above the geographies altogether, you need to map over the geographies data twice, and render the annotations after (i.e. further down in the code than) the geographies. It would roughly look something like this:

<Geographies>
  {({ geographies }) => {
    return (
      <React.Fragment>
        {geographies.map(geo =>
          <Geography key={geo.rsmKey} geography={geo} />
        )}
        {geographies.map(geo => {
          return // annotations go here...
        })}
      </React.Fragment>
    )
  }
</Geographies>

Let me know if this works for you.

[willb335]

Worked great, thank you!