Skip to content

Latest commit

 

History

History
75 lines (52 loc) · 10.6 KB

README.md

File metadata and controls

75 lines (52 loc) · 10.6 KB
Raw

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

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