$3

> leaflet-spots is a paradigm and tool for rendering spots on a leaflet map.

---

$3

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.

---

$3

https://codesandbox.io/s/leaflet-spot-demo-80eyw

---

$3

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

---

$3

See this demo with source code:

https://codesandbox.io/s/leaflet-spot-demo-80eyw

---

$3

`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 = (metadata: T) => LatLng;
export type ShapeParser = (metadata: T) => Layer;
export type IdParser = (metadata: T) => string;
export type ShouldUpdateParser = (prev: T, next: T) => boolean;
export type FilterationParser = (metadata: T) => boolean;
`

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

`typescript
/**
* The options to create the instance of LeafletSpots
* @template T User data unit
*/
export interface LeafletSpotsOptions {
/**
* Use MetadatParser 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;
`

$3

- [x] Support Typescript
- [x] Support Javascript`
- [ ] Testing
- [x] Logo
- [x] User manual
- [x] Introduce
- [x] Quick Start
- [x] API Reference
- [x] Demo page
- [x] Publish to NPM