react-mapfilter

Mapeo View Components

These components are designed for viewing data in Mapeo. They share a common interface:

Common Props

Name	Type	Default	Description
observations	Observation[]	[]	Array of Mapeo observations
onUpdateObservation	func		Callback fired when an observation has been updatedby the view. Signature: (observation: Observation) => void observation: The updated observation
presets	Preset[]	[]	Array of Mapeo Presets with an array of Fields instead of Field ids.
filter	array		Filter expression used to filter the observations that will be shown.
getMediaUrl	func		Function called with an id of an image attachment and a size, should return a valid URL to the image. Signature: `(id: string, size: 'thumbnail'
getIconUrl	func		Function called with an id of an icon, should return a valid URL to the icon. Signature: (id: string) => string

Contents

• <MapView />
  • MapView Props
• <MediaView />
  • MediaView Props
• <ReportView />
  • ReportView Props

<MapView />

Displays observations on a map.

MapView Props

Name	Type	Default	Description
onMapMove	func		Called with CameraOptions with properties center, zoom, bearing, pitch whenever the map is moved
initialMapPosition	object		Initial CameraOptions position for map - an object with properties center, zoom, bearing, pitch. If this is not set then the map will by default zoom to the bounds of the observations. If you are going to unmount and re-mount this component (e.g. within tabs) then you will want to use onMove to store the position in state, and pass it as initialPosition for when the map re-mounts.
mapStyle	string	'mapbox://styles/mapbox/outdoors-v10'	A Mapbox Style URL
mapboxAccessToken	string		A Mapbox Access Token used to access the style

MapView instance methods

flyTo({center, zoom}, eventData?)

Changes any combination of center, zoom, bearing, and pitch, animating the transition along a curve that evokes flight. The animation seamlessly incorporates zooming and panning to help the user maintain her bearings even after traversing a great distance, takes the same options as the flyTo method of mapbox-gl-js

fitBounds(bounds, options?, eventData?)

Pans and zooms the map to contain its visible area within the specified geographical bounds. This function will also reset the map's bearing to 0 if bearing is nonzero, takes the same options as the fitBounds method of mapbox-gl-js

<MediaView />

Display a grid of all the media attachments from the observations.

MediaView Props

MediaView does not currently have any additional props beyond the common props above.

<ReportView />

Display observations as a report that can be printed.

ReportView Props

ReportView shares several props with MapView. These props apply to the inset map in the ReportView.

Name	Type	Default	Description
onMapMove	func		Called with CameraOptions with properties center, zoom, bearing, pitch whenever the map is moved
initialMapPosition	object		Initial CameraOptions position for map - an object with properties center, zoom, bearing, pitch. If this is not set then the map will by default zoom to the bounds of the observations. If you are going to unmount and re-mount this component (e.g. within tabs) then you will want to use onMove to store the position in state, and pass it as initialPosition for when the map re-mounts.
mapStyle	string	'mapbox://styles/mapbox/outdoors-v10'	A Mapbox Style URL
mapboxAccessToken	string		A Mapbox Access Token used to access the style

Changelog

3.2.5 (2020-07-31)

Bug Fixes

• Editing multiselect fields with single values shouldn't cause (85c4dbc)
• Fix flow types not being correctly removed from compiled code (cc2cfb5)