How to change the background of Geographies?

[yuvalr55]

How to change the background of the map to a different background? from:

to exemple:

or:

code:

<ComposableMap className={'ComposableMap'} data-tip="" projectionConfig={{scale: 250, center:[0,0]}}>
    <ZoomableGroup
        zoom={position.zoom}
        center={position.coordinates}
        onMoveEnd={handleMoveEnd}
    >
            <Geographies geography={geoUrl}>
            {({geographies}) =>
                geographies.map(geo => (
                    <Geography
                        key={geo.rsmKey}
                        geography={geo}
                        onClick={() => {
                            const {NAME} = geo.properties;
                            setContent(`${NAME}`);
                        }}
                        onMouseLeave={() => {
                            setContent("");
                        }}
                        style={{
                            default: {
                                fill: "#D6D6DA",
                                outline: "none"
                            },
                            hover: {
                                fill: "#F53",
                                outline: "none"
                            },
                            pressed: {
                                fill: "#E42",
                                outline: "none"
                            }
                        }}
                    />
                ))
            }
        </Geographies>
        {points}
    </ZoomableGroup>
</ComposableMap>

[zimrick]

Hi @yuvalr55,

For the texture example, I think this codesandbox could be useful: https://codesandbox.io/s/map-chart-with-texture-yjs2y?file=/src/MapChart.js

It uses @vx/pattern, but you could also use the newer @visx/pattern. It has quite a lot of options for textures.

Hope this helps :)

[yuvalr55]

Thank you very much!

you helped me alot:-)