@ta-interaktiv/react-swissmap

A choropleth map of switzerland. Using @ta-interaktiv/react-municipality-search

Usage

The fullscreen button is hidden by default. Pass showFullscreenButton={true} to SwissMap to show it.

The map defaults to the 20260101 topology from municipality-data. Use topoJsonDate={20260101} to select a dataset date (YYYYMMDD), or pass topoJson to use your own topology without fetching. topoJsonDate replaces topoJsonYear.

const reactSwissmap = require('@ta-interaktiv/react-swissmap');

const [hoveredData, setHoveredData] = useState()
const [activeMunicipalityId, setActiveMunicipalityId] = useState<number>(261)
const ToolTip: React.FC = ({ activeData }): ReactElement => {
    return (
      <div>
        {activeData && (
          <div>
            <h4>{activeData.Gemeindename}</h4>
            <div>Belastung: {activeData.Belastung + '%'}</div>
            <div>Belastung: {(activeData.Belastung / 100) * currentIncome}</div>
          </div>
        )}
      </div>
    )
  }
...
// inside your JSX
{dummyData && (
        <SwissMap
          municipalityData={dummyData.municipalities}
          propertyNameToCompare='Belastung'
          minValue={dummyData.extent[0]}
          maxValue={dummyData.extent[1]}
          municipalitySearchYear="2020"
          topoJsonDate={20260101}
          hoverHandler={newData => {
            setHoveredData(newData)
          }}
          newActiveMunicipalityIdHandler={newID => {
            setActiveMunicipalityId(newID)
          }}
          activeMunicipalityId={activeMunicipalityId}
          ToolTip={ToolTip}
        />
      )
}