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' | '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 |
Contents
<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 |