Skip to content
This repository was archived by the owner on May 27, 2025. It is now read-only.

Amsterdam/amsterdam-react-maps

This repo will be archived as it is no longer maintained. We've provided examples how you can implement Leaflet in React here

Amsterdam React Maps (ARM)

Storybook TypeScript code style: prettier style: styled-components

A repo with components / utilities to be used in projects published by Amsterdam. It also contains an "stories" directory where we put so-called "recipes" that developers at Amsterdam can basically copy/paste in their own projects

This is the link to the story book demo site with examples

Motivation

Currently we have a few applications that use leaflet with own developed components. The problem with this approach is that it's unable to share certain components / logic. Because we know we cannot create a one-size-fits-all leaflet application, we decided to create this repo that serves two responsibilities:

  1. Inspecting examples of implementations, so these can simply be copied to the user's project
  2. Providing compound-components / utilities / configurations for amsterdam-specific projects, so these can be maintained on one place: this repo.

Structure

This project is a monorepo with 3 packages

  • arm-core - core things like Map, BaseLayer, ViewVontainer, Zoom, GeoJSON, GeoJSONLayer, Marker, useMapInstance, useMapEvents, useEvents, getCrsRd, etc.
  • arm-cluster - exports MarkerClusterGroup (using leaflet.markercluster)
  • arm-nontiled - exports NonTiledLayer

Usage

  • npm install --save @amsterdam/arm-core
  • npm install --save @amsterdam/arm-cluster
  • npm install --save @amsterdam/arm-nontiled

NPM

Docs