better-leaflet

New Feature

1. GridCluster
2. HoneyComb
3. TextMarker
4. HeatLayer
5. Esri
6. Esri-Heatlayer
7. Migration

GridCluster

Example:

let grid = L.gridCluster([[1,2],[3,4],[5,6]], {
  weight: 1,
  radius: 25
}),
 
grid.on('drawStart', function () {}),
 
grid.on('drawEnd', () => {})
 
grid.addTo(map),

Creation

L.gridCluster(<[[number,number]]> data, <Options> options?)
 
or
 
new L.gridCluster(<GridData> data, <Options> options?)

GridData

{
  latlng:[[1,2],[3,4]],
  oneField: any,
  otherField: any,
  ...
}

Opitons

{
  radius?: number,
  ribbon?: string[],
  level?: number,
  statistic?: GridCluster.statistic,
  field?: string
  stroke?: boolean,
  color?: string,
  weight?: number,
  opacity?: number,
  lineCap?: LineCapShape,
  lineJoin?: LineJoinShape,
  dashArray?: string,
  dashOffset?: string,
  fill?: boolean,
  fillColor?: string,
  fillOpacity?: number,
  fillRule?: FillRule,
  renderer?: Renderer,
  className?: string
}

Methods

  L.gridCluster.remove();
 
  L.gridCluster.changeOptions(options: GridOptions);
 
  L.gridCluster.getLayers(): any;

GridCluster.statistic

 GridCluster.statistic = {
    sum: 0,
    average: 1,
    min: 2,
    max: 3
  }

HoneyComb

extend from GridData.

Creation

L.honeyComb(<[[number,number]]> data, <Options> options?)
 
or
 
new L.HoneyComb(<GridData> data, <Options> options?)

TextMarker

Example

  L.textMarker([10, 20], 'some text', {
      xOff: -6,
      yOff: 8
   }).addTo(map);

Creation

L.textMarker(<latlng> centerPt, <Options> options?)
 
or
 
new L.TextMarker(<latlng> centerPt, <Options> options?)

Options

{
  xOff?: number,
  yOff?: number,
  fontSize?: number,
  width?: number,
  color?: string,
}

HeatLayer

detail document

Example

var heat = L.heatLayer([
    [50.5, 30.5, 0.2], // lat, lng, intensity
    [50.6, 30.4, 0.5],
    ...
], {radius: 25}).addTo(map);

Creation

L.heatLayer(<[[number,number,?number]]> data, <Options> options?)
 
or
 
new L.HeatLayer(<[[number,number,?number]]> data, <Options> options?)

Options

{
  minOpacity: number, // 0.5
  maxZoom: number,    // 18
  radius: number,     // 25
  blur: number,       // 15
  max: number,        // 1.0
  gradient: object    // {0.4: 'blue', 0.65: 'lime', 1: 'red'}
}

Esri

detail document

Example

L.esri.tiledMapLayer({
  url: "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer"
}).addTo(map);

Esri-Heatlayer

extend from esri-featurelayer

Example

L.esri.heatLayer({
  "url": 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/ArcGIS/rest/services/Graffiti_Reports/FeatureServer/0'
}).addTo(map);

Creation

L.esri.heatLayer({
  url: string,
  field?: string
});
 
or
 
new L.esri.HeatLayer({
  url: string,
  field?: string
});

Migration

detail document

Example

var migrationLayer = new L.migrationLayer({
    map: map,
    data: data,
    zIndx: number  // new Feature
})