react-mapfilter

    3.2.5 • Public • Published

    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

    Keywords

    none

    Install

    npm i react-mapfilter

    DownloadsWeekly Downloads

    3

    Version

    3.2.5

    License

    MIT

    Unpacked Size

    9.73 MB

    Total Files

    669

    Last publish

    Collaborators

    • andrew_chou
    • substack
    • karissa
    • digidem-admin
    • gmaclennan
    • noffle
    • mojodna