Prefabs for map implementations

Usage no npm install needed!

<script type="module">
  import airglowPrefabMap from 'https://cdn.skypack.dev/@airglow/prefab-map';



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


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.


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);


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])


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