Ich habe das Problem, dass sich um die Italien-Karte herum ein Abstand befindet und ich weiß nicht, wie ich den entfernen kann.
Code:
const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/countries/italy/italy-regions.json"
const MapChart = () => {
return (
<ComposableMap projectionConfig={{ center: [11, 39], scale: 1800 }}>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map((geo) => (
<Geography key={geo.rsmKey} geography={geo} className='geography'/>
))
}
</Geographies>
</ComposableMap>
)
}
Und CSS:
.geography {
fill: #f0f0f0;
stroke: #fff;
stroke-width: 1;
outline: none;
}
.geography:hover {
fill: #979797;
}
Noch zwei Bilder:
Im unteren Bild sieht man den Abstand. Beim oberen Bild sieht man den Code der erstellt wird. In der unteren Zeile befindet sich die Karte. In der oberen Zeile ist so eine Art "Box" durch die der Abstand ensteht.
Gibt es dafür CSS Einstellungen oder was kann ich machen um den Abstand zu entfernen?