Use this bundle creator to set up an OpenLayers map in your redux-bundler app.

Use

import { createOlMapBundle } from '@corpsmap/corpsmap-bundles';

const bundle = createOlMapBundle({
	// optional, default 'map'
    name: <string>,
        
    // optional, default [-98.579, 39.828]
    center: <array><number></array>,
        
    // optional, default 5
    zoom: <number 0-22>,
        
    // optional, default 0
    rotation: <number 0-360>,
        
    // optional, default 0
    minZoom: <number 0-22>,
        
    // optional, default 22
    maxZoom: <number 0-22>
})

Actions

{
    type: MAP_INITIALIZED,
    payload: {
        map: <ol map>
    }
}
{
    type: MAP_UPDATED_VIEW_STATE,
    payload: {
        center: center, 
        rotation: rotation, 
        zoom: zoom, 
        minZoom: minZoom, 
        maxZoom: maxZoom
    }
}

Action Creators

doMapInitialize takes a DOM element as its argument, the new ol map will be applied to that location in the page.  Use this action creator in a componentDidMount lifecycle method to add the map to the page once the DOM element is in existence.

doMapUpdateViewState is used internally to update the view state every time the map moves.

doMapResetViewState allows you to reset the view to its initial settings, the defaults, or ones passed in when the bundle is generated.

doMapZoomTo takes a coordinate (object or array) and a zoom level integer and zooms the map to that location and zoom scale, if no z value is provided then it uses zoom scale 10.

Selectors

selectMap returns a reference to the OpenLayers map object.

selectMapGeoProjection returns the projection object for EPSG:4326.

selectMapWebProjection returns the projection object for EPSG:3857.

selectMapCenter returns the current center coordinate of the map.

selectMapZoom returns the current zoom level between 0 and 22.

selectMapRotation returns the current rotation of the map.

selectMapMinZoom returns the minimum zoom level setting.

selectMapMaxZoom returns the max zoom level setting.