@amsterdam/arm-core
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

ARM Core

Part of Amsterdam React Maps library.

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

Installation

Add this package to your project by running:

npm install --save @amsterdam/arm-core

Usage

import 'leaflet/dist/leaflet.css' // make sure this is always included!
import { Map, BaseLayer, GeoJSON, ViewerContainer, Zoom } from '@amsterdam/arm-core'

const json = {
    type: 'Feature',
    properties: {
      name: 'Amsterdam',
    },
    geometry: {
      type: 'Point',
      coordinates: [52, 4],
    },
  }

const MyComponent = () => (
  <Map fullScreen>
    <GeoJSON args={[json]} />
    <ViewerContainer bottomRight={<Zoom />} />
    <BaseLayer />
  </Map>
)

export default MyComponent

And when you want to use mapInstance in a different component:

...
import { useMapInstance } from '@amsterdam/arm-core';

const Search = () => (
    const mapInstance = useMapInstance();
    
    useEffect(() => {
      mapInstance.flyTo(x,y)
    }, [mapInstance])
)

export default Search

Exports components

  • Map: props options?, fullScreen?, setInstance?
  • BaseLayerToggle
  • ControlButton: extends Button
  • MapPanel
  • Scale: props options
  • ViewerContainer: props bottomLeft?, topLeft?, topRight?, bottomRight?
  • Marker: props latLng, options?, setInstance?
  • Zoom: props tabIndexIn?, tabIndexOut?

Exports leaflet layers

  • BaseLayer: props baseLayer?, options?, setInstance?
  • GeoJSON: props args, options?, setInstance?
  • GeoJSONLayer: props url, options, setInstance?
  • RDGeoJSON: props geometry, properties?, options?, setInstance?
  • WfsLayer: props url, options, zoomLevel, setInstance?

Exports hooks

  • useMapInstance()
  • useMapEvents(events?)
  • useEvents(instance, events?)
  • useGetAddressFromLatLng()
  • usePanToLatLng()
  • useStateRef()

Exports services

  • fetchWithAbort()
  • getBBox(mapInstance)
  • getCrsRd()

Exports constants

  • AMSTERDAM_LAYERS
  • AERIAL_AMSTERDAM_LAYERS
  • MIN_ZOOM_LEVEL
  • MAX_ZOOM_LEVEL
AMSTERDAM_MAPS_OPTIONS = {
  center: [52.3731081, 4.8932945],
  zoom: 10,
  maxZoom: 16,
  minZoom: 3,
  zoomControl: false,
  crs: getCrsRd(),
  maxBounds: [
    [52.25168, 4.64034],
    [52.50536, 5.10737],
  ],
}

Readme

Keywords

none

Package Sidebar

Install

npm i @amsterdam/arm-core

Weekly Downloads

467

Version

1.0.0

License

MPL-2.0

Unpacked Size

412 kB

Total Files

261

Last publish

Collaborators

  • vincent.smedinga
  • alimpens
  • dlnr
  • jthijsamsterdam
  • remyvdwereld
  • leonardsmit
  • datapunt-admin
  • fortunato