> `leaflet-spots` is a paradigm and tool for rendering spots on a [leaflet](https://leafletjs.com/) map.
npm install leaflet-spots
> leaflet-spots is a paradigm and tool for rendering spots on a leaflet map.
---
Part of my job is data visualization based on geographic location. For example:
- Texi/bus realtime positioning
- IoT realtime positioning
- Satellites projecting on earth
- User distribution
Taxis, buses, IoT devices, satellite projections, users need to be drawn on the map, and I call them spot. A taxi is a spot, a user is a spot, etc.
See this example:
This kind of projects have an almost same logic, so I decided to abstract it out to be a common extension of leaflet.
---
https://codesandbox.io/s/leaflet-spot-demo-80eyw
---
``bash`install dependency
yarn add leaflet
// or
// npm install --save leaflet
`bash`install leaflet-spots
yarn add leaflet-spots
// or
// npm install --save leaflet-spots
---
See this demo with source code:
https://codesandbox.io/s/leaflet-spot-demo-80eyw
---
`javascript`
import { LeafletSpots, MetadataParser } from 'leaflet-spots';
#### class MetadataParser\
> Describe how to parse your data in class MetadataParser
> T is the type of your metadata like { id: 1, lng: 120, lat: 30 }
| Method | Parameters | Return | Description |
| ----------- | -------------------------- | ------ | ----------- |
| constructor | MetadataParserOptions\
##### MetadataParserOptions
`typescript`
export interface MetadataParserOptions
/**
* parse lat,lng from metadata
*/
parseLatlng: LatlngParser
/**
* parse leaflet shape from metadata
*/
parseShape: ShapeParser
/**
* parse id from metadata
*/
parseId: IdParser
/**
* parse whether the station should be update
*/
parseShouldUpdate?: ShouldUpdateParser
/**
* parse whether the station is filtered
*/
parseFilteration?: FilterationParser
}
##### Parser types
`typescript`
export type LatlngParser
export type ShapeParser
export type IdParser
export type ShouldUpdateParser
export type FilterationParser
#### class LeafletSpots\
> Using this class to visualize your data
> T is the type of your metadata like { id: 1, lng: 120, lat: 30 }
| Method | Parameters | Return | Description |
| ------------ | ------------------------ | ------------------------------------------------------------------- | --------------------------------------------------------------------- |
| constructor | LeafletSpotsOptions\
| getLayer | - | LayerGroup | The layer group that holds all the spots |
| setSpots | T[] | void | Set spots data, LeafletSpots will render them to leaflet map instance |
| addSpot | T | void | Add a spot to leaflet map instance |
| removeSpot | T | void | Remove a spot from leaflet map instance |
| updateSpot | T | void | Update a spot in leaflet map instance |
| selectSpot | T | void | Mark this spot to be selected |
| unselectSpot | T | void | Cancel selection |
| forceRender | - | void | Force rerender all spots |
---
##### LeafletSpotsOptions
`typescriptLeafletSpots
/**
* The options to create the instance of MetadatParser
* @template T User data unit
*/
export interface LeafletSpotsOptions
/**
* Use to parse user data.`
* @template T User data unit
*/
metadataParser: MetadataParser
/**
* The spot events which will be attached to the spot.
* @template T User data unit
*/
spotEvents?: SpotEvents
/**
* handle interactive like 'selected', 'filtered', etc
* @template T User data unit
*/
handleInteractive?: InteractiveHandler
}
##### SpotEvents\
`typescript`
/**
* The spot events which will be attached to the spot.
* @template T User data unit
*/
export interface SpotEvents
[eventName: string]: (e: LeafletEvent, metadata: T) => void;
}
##### InteractiveHandler\
`typescript
/**
* Interactive options.
*/
export interface InteractiveOptions {
filtered: boolean;
selected: boolean;
}
/**
* User defined handler for interactive.
* @template T User data unit
*/
export type InteractiveHandler
metadata: T,
shape: Layer,
options: InteractiveOptions,
) => void;
`
- [x] Support TypescriptJavascript`
- [x] Support
- [ ] Testing
- [x] Logo
- [x] User manual
- [x] Introduce
- [x] Quick Start
- [x] API Reference
- [x] Demo page
- [x] Publish to NPM