React-mapfilter NPM

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 `Preset`s with an array of `Field`s instead of Field `id`s.
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' \| 'preview' \| 'original') => string`
getIconUrl	`func`		Function called with an `id` of an icon, should return a valid URL to the icon. Signature: `(id: string) => string`

`<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