Prefab-Map

A custom Prefab for dealing with map views. It allows you to manage map zoom level, mode, position, and more.

Installation

npm install --save @airglow/prefab @airglow/prefab-map

Getting Started

To add the Map Prefab, you simply need to import the prefab somewhere in your code:

import '@airglow/prefab-map';

Now you're ready to go.

Usage

You may create a map prefab like so:

import prefab from '@airglow/prefab';

export default prefab({
  map: {
    type: 'map',
    defaultZoom: 3
  }
});

const mapState = state => ({
  zoom: prefab.map.zoom(state),
  mode: prefab.map.mode(state),
  position: prefab.map.position(state)
});

const mapHandlers = dispatch => ({
  onToggleMode: () => dispatch(prefab.map.toggleModeAction()),
  onPostiion: (latitude, longitude) => dispatch(prefab.map.positionAction({
    latitude, longitude
  })),
  onZoomOut: () => dispatch(prefab.map.zoomOutAction()),
  onZoomIn: () => dispatch(prefab.map.zoomInAction())
});

connect(mapState, mapHandlers)(View);

Selectors

The following items take the state object:

Selector	Description
zoom	The current zoom level of the map
mode	The current mode (map or satellite)
position	The current center point of the map ([latitude, longitude])

Handlers

The following actions can be dispatched to update the map's store:

Handlers	Input	Description
toggleModeAction	none	Toggles map mode betweein map and satellite
positionAction	{ latitude: X, longitude: Y }	Sets the map center position
zoomInAction	none	Zooms the map in one level. Often used with a button.
zoomOutAction	none	Zooms the map out one level. Often used with a button.
zoomAction	new zoom level	Sets a new zoom level. Often used with mouse-wheel zooms