react-mapfilter
v3.2.5
Published
These components are designed for viewing data in Mapeo. They share a common interface:
Downloads
777
Keywords
Readme
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
|
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 |