search

zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.03k stars 424 forks source link

Geographies render order #361

Closed val-moizan closed 4 weeks ago

val-moizan commented 4 weeks ago

I'm currently drawing a black border around a selected Geography. My problem is that neighboring geographies will sometimes render AFTER the selected geography, so their borders will override my black border. I think a solution is to draw the selected geography last, but I can't find how. Here is the code

            {({ geographies }) =>
              geographies.map((geo) => {
                const isSelected = selectedRegion === geo.properties.code;
                return (
                  <Geography
                    key={geo.properties.nom}
                    data-tooltip-id="my-tooltip"
                    data-tooltip-content={geo.properties.nom}
                    geography={geo}
                    onMouseDown={() => handleRegionClick(geo.properties.code)}
                    stroke={isSelected ? "#000000" : "#999999"}
                    strokeWidth={isSelected ? 3 : 1}
   ...

Here is an example :
image