Skip to content

Amsterdam/amsterdam-react-maps

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