react-leaflet-ellipsis
Version:
Use Ellipsis Drive layers in leaflet projects.
89 lines (65 loc) • 4.42 kB
Markdown
Install using `npm install react-leaflet-ellipsis`
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'`
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.
| 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).
```
**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.
```