UNPKG

react-leaflet-ellipsis

Version:
89 lines (65 loc) 4.42 kB
## Import Ellipsis layers in react-leaflet ### Install Install using `npm install react-leaflet-ellipsis` ### Usage In a React app, import the RasterLayer and VectorLayer: `import { EllipsisRasterLayer } from 'react-leaflet-ellipsis'` `import { EllipsisVectorLayer } from 'react-leaflet-ellipsis'` `import { EllipsisApi } from 'react-leaflet-ellipsis'` ### Example You can use RasterLayer and VectorLayer within a `<MapContainer />` or `<Map />` component. ```jsx <MapContainer> <EllipsisRasterLayer pathId={pathId} /> <EllipsisVectorLayer pathId={pathId} /> </MapContainer> ``` To request metadata of Ellipsis Drive layers you can use the function available in the `EllipsisApi`. ```js useEffect(() => { EllipsisApi.getMetadata(mapId).then((response) => { console.log(response); }); }, []); ``` If the Ellipsis Drive layers you wish to use are not set to public or linksharing you need to create a token for your app. See [here](https://docs.ellipsis-drive.com/developers/authentication-options) for how to obtain such a token. #### RasterLayer props | Name | Description | | ----------- | --------------------------------------------------- | | pathId | id of the path | | timestampId | id of the timestamp (optional) | | style | id of a style or an object describing it (optional) | | zoom | int to use as max native zoom (optional) | | token | token of the user (optional) | | mask | Mask of type multipolygon (optional) | _note_ for the style object, refer to [this documentation about it](https://docs.ellipsis-drive.com/developers/api-v3/path-raster/styles/add-style). #### VectorLayer props | Name | Description | | ------------------ | ------------------------------------------------------------------------------------- | | pathId | Id of the path (Only required option) | | timestampId | Id of the timestamp | | onFeatureClick | A function to run on feature click, with as argument the clicked feature and the event | | onFeatureHover | A function to run on feature hover, with as argument the clicked feature and the event | | zoom | max native zoomlevel of the layer. If not specified, use the one specified in layer info. | | token | Token of the user | | style | Id of a style or a style object. | | filter | A property filter to use | | pageSize | Size to retreive per step. Default 25, max 3000. | | maxMbPerTile | The maximum mb to load per tile. Default 16mb. | | maxRenderTiles | The number of tiles to keep in cache. Default 500. | | maxFeaturesPerTile | The maximum number of vectors to load per tile. Default 200. | | loadAll | Boolean whehter to keep loading features indefinitely. Default false. | | usMarkers | Boolean whehter to use markers for points, default false. | _warning_ `loadAll=true` will ignore maxMbPerTile, maxTilesInCache and maxFeaturesPerTile settings. _note_ for the style object, refer to [this documentation about it](https://docs.ellipsis-drive.com/developers/api-v3/path-vector/styles/add-style). ### Fetching metadata ``` #### EllipsisApi.getPath description **parameters** | name | description | | ------ | --------------------------------------------------------------------------------- | | pathId | The id of the path. | | user | (Optional) An user object which can contain a token like `user: {token: mytoken}` | **return value** It returns JSON, which depends on the type of the specified object. ```