Skip to content

A paradigm and tool for rendering spots on a leaflet map.

Notifications You must be signed in to change notification settings

liyuanqiu/leaflet-spots

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Introduce

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


Motivation

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.


Demo

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


Installation

# install dependency
yarn add leaflet
// or
// npm install --save leaflet
# install leaflet-spots
yarn add leaflet-spots
// or
// npm install --save leaflet-spots

Quick Start

See this demo with source code:

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


API Reference

import { LeafletSpots, MetadataParser } from 'leaflet-spots';

class MetadataParser<T>

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<T> - -
MetadataParserOptions
export interface MetadataParserOptions<T> {
  /**
   * parse lat,lng from metadata
   */
  parseLatlng: LatlngParser<T>;
  /**
   * parse leaflet shape from metadata
   */
  parseShape: ShapeParser<T>;
  /**
   * parse id from metadata
   */
  parseId: IdParser<T>;
  /**
   * parse whether the station should be update
   */
  parseShouldUpdate?: ShouldUpdateParser<T>;
  /**
   * parse whether the station is filtered
   */
  parseFilteration?: FilterationParser<T>;
}
Parser types
export type LatlngParser<T> = (metadata: T) => LatLng;
export type ShapeParser<T> = (metadata: T) => Layer;
export type IdParser<T> = (metadata: T) => string;
export type ShouldUpdateParser<T> = (prev: T, next: T) => boolean;
export type FilterationParser<T> = (metadata: T) => boolean;

class LeafletSpots<T>

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<T> - -
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
/**
 * The options to create the instance of `LeafletSpots`
 * @template T User data unit
 */
export interface LeafletSpotsOptions<T> {
  /**
   * Use `MetadatParser` to parse user data.
   * @template T User data unit
   */
  metadataParser: MetadataParser<T>;
  /**
   * The spot events which will be attached to the spot.
   * @template T User data unit
   */
  spotEvents?: SpotEvents<T>;
  /**
   * handle interactive like 'selected', 'filtered', etc
   * @template T User data unit
   */
  handleInteractive?: InteractiveHandler<T>;
}
SpotEvents<T>
/**
 * The spot events which will be attached to the spot.
 * @template T User data unit
 */
export interface SpotEvents<T> {
  [eventName: string]: (e: LeafletEvent, metadata: T) => void;
}
InteractiveHandler<T>
/**
 * Interactive options.
 */
export interface InteractiveOptions {
  filtered: boolean;
  selected: boolean;
}

/**
 * User defined handler for interactive.
 * @template T User data unit
 */
export type InteractiveHandler<T> = (
  metadata: T,
  shape: Layer,
  options: InteractiveOptions,
) => void;

Road Map

  • Support Typescript
  • Support Javascript
  • Testing
  • Logo
  • User manual
    • Introduce
    • Quick Start
    • API Reference
  • Demo page
  • Publish to NPM

About

A paradigm and tool for rendering spots on a leaflet map.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published