React Denmark Map 2.0

[MartinP460]

React Denmark Map 2.0 is here! 🥳

For the past few months, we've been working hard developing version 2 of react-denmark-map. This updates comes with a bunch of bigger or smaller improvements that should hopefully improve the overall experience for the user as well as the developer experience.

Zooming

One thing that's previously been a big downside to the component, is that it was hard to focus on smaller areas such as Frederiksberg in the Municipalities component - this was especially a problem on mobile. In v2, we've implemented the ability to zoom using zoom controls and pinching. Zooming is enabled on all maps by default and you can optionally pass a component to the new prop customZoomControls to render your own zoom controls.

import { Municipalities } from 'react-denmark-map'

const CustomZoomControls = ({ onZoomIn, onZoomOut }) => (
  <div>
    <button onClick={onZoomIn}>+</button>
    <button onClick={onZoomOut}>–</button>
  </div>
)

const App = () => <Municipalities customZoomControls={CustomZoomControls} />

Performance

All underlying SVG's have been reduced in size by ~30% with no loss of quality, which should give your application a slight performance boost. All components are now also shallowly memoized so if performance is a big bottleneck you can memoize the props to miminize rerenders (memoization should have been done from the beginning but it's better late than never 😅).

Intellisense

Some pretty extensive docstrings have been added to all props to make life easier for you as the developer. All fields in each area (i.e. id, displayName, code, etc.) also have constant values as types so you know whether the values in your dataset match those defined in react-denmark-map. For example, the field code for an municipality area has type "482" | "580" | "492" | ... instead of string.

For the full list of changes, check out the changelog or read the updated documentation.

Huge thanks to @GeorgeNonis for contributing! react-denmark-map serves a secondary purpose as a learning space and I'm so happy that we can learn together through open source. If you want to contribute, take a look at the contributing guide. Developers of all levels are welcome!

Finally, "mange tak" to everyone using the library! If you encounter any problems or have suggestions for improvements, don't hesitate to open an issue. Your feedback is invaluable.

Ready to upgrade? Remember to read the migration guide!

[GeorgeNonis]

This is just the start!