6. Markers
The framework adds several new marker types geared towards dynamic data visualization. See the Markers example for an illustration of each of these markers.
Creates an SVG-based map marker, similar to the default Leaflet image-based marker but fully customizable using the basic L.Path properties
L.MapMarker(<LatLng> LatLng, <Marker options> options?);
var marker = new L.MapMarker(new L.LatLng(0, 0), {
radius: 10,
// L.Path style options
...
});
map.addLayer(marker);Type: Number
Default: 3
If an inner radius is specified, then the marker will have a hole in the center. This property determines the shape of the hole.
Type: Number
Default: 0
If an inner radius is specified, this controls the rotation of the hole in the center.
Type: Number
Default: 10
The radius of the circular part of the marker, also adjusts the height of the marker
Type: Number
Default: null
The inner radius of the marker hole in pixels.
Type: String
Default: null
The URL of an image to display on the marker. This will be displayed in the main circular area of the marker.
Creates an N-sided marker
L.RegularPolygonMarker(<LatLng> LatLng, <Marker options> options?);
var marker = new L.RegularPolygonMarker(new L.LatLng(0, 0), {
numberOfSides: 3,
rotation: 60.0,
radius: 10,
// L.Path style options
...
});
map.addLayer(marker);Type: Number
Default: 3
This property determines the shape of the marker.
Type: Number
Default: 0
If an inner radius is specified, this controls the rotation of the hole in the center.
Type: Number
Default: 10
The radius of the circular part of the marker, also adjusts the height of the marker
Type: Number
Default: null
The inner radius of the marker hole in pixels.
Type: String
Default: null
The URL of an image to display on the marker. This will be displayed in the main circular area of the marker.
Creates a star-shaped marker with N-points
L.StarMarker(<LatLng> LatLng, <StarMarker options> options?);
Type: Number
Default: 5
The number of points the star should have
Display dynamic charts (bar chart, radial bar chart, pie chart, coxcomb chart, etc.) as markers
L.BarChartMarker(<LatLng> LatLng, <Chart options> options?);
L.RadialBarChartMarker(<LatLng> LatLng, <Chart options> options?);
L.PieChartMarker(<LatLng> LatLng, <Chart options> options?);
L.CoxcombChartMarker(<LatLng> LatLng, <Chart options> options?);
L.StackedRegularPolygonMarker(<LatLng> LatLng, <Chart options> options?);
L.RadialMeterMarker(<LatLng> LatLng, <Chart options> options?);
var options = {
data: {
'dataPoint1': Math.random() * 20,
'dataPoint2': Math.random() * 20,
'dataPoint3': Math.random() * 20,
'dataPoint4': Math.random() * 20
},
chartOptions: {
'dataPoint1': {
fillColor: '#FEE5D9',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function (value) {
return value.toFixed(2);
}
},
'dataPoint2': {
fillColor: '#FCAE91',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function (value) {
return value.toFixed(2);
}
},
'dataPoint3': {
fillColor: '#FB6A4A',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function (value) {
return value.toFixed(2);
}
},
'dataPoint4': {
fillColor: '#CB181D',
minValue: 0,
maxValue: 20,
maxHeight: 20,
displayText: function (value) {
return value.toFixed(2);
}
}
},
weight: 1,
color: '#000000',
... // Other L.Path style options
}
var barChartMarker = new L.BarChartMarker(new L.LatLng(0, 0), options);Type: Object
Default: null
A set of key/value pairs that provides a data value for each property displayed by the marker
Type: Object
Default: null
A set of key/value pairs that defines the options associated with each data property displayed by the marker.
Type: Object
Default: L.Path object with a semi-transparent gray fill and stroke
An object of L.Path style options that will be used to style the background area of the chart. Set this to null or false to prevent a background from being displayed.
Used for annotating markers, lines, and polygons. Callouts include a line and associated icon (L.Icon or L.DivIcon).
L.Callout(<LatLng> latlng, <Callout options> options?);
var callout = new L.Callout(new L.LatLng(0.0, 0.0), {
arrow: true,
numberOfSides: 3,
radius: 8,
icon: new L.DivIcon(...),
direction: L.CalloutLine.DIRECTION.NE,
lineStyle: L.CalloutLine.LINESTYLE.ARC,
size: new L.Point(50, 50),
weight: 2,
fillOpacity: 1.0,
color: '#FFFFFF',
fillColor: '#FFFFFF'
});
map.addLayer(callout);Type: Boolean
Default: true
true/false - whether or not an arrow should be added to the end of the callout line
Type: Number
Default: 3
The number of sides the arrow at the end of the callout line will have.
Type: Number
Default: 6
The radius of the arrow that will be displayed at the end of the callout line
Type: Object
Default: null
An L.Icon or L.DivIcon object that will be displayed at the end of the callout line
Type: String
Default: 'ne'
The quadrant in which the callout will be placed: 'ne', 'se', 'sw', 'nw'. Use L.CalloutLine.DIRECTION properties (NE, SE, SW, NW) to specify this
Type: String
Default: 'angle'
The style of the associated callout line: 'arc', 'angle', 'straight'. Use L.CalloutLine.LINESTYLE properties (ARC, ANGLE, STRAIGHT) to specify this. 'arc' displays a curved line, 'angle' displays an angled line, and 'straight' displays a straight line from the annotation point to the associated icon.
Type: Object
Default: L.Point(60, 30)
The bounds of the callout line
Include L.Path options to style the callout line associated with the callout object (e.g. color, fillColor, weight, etc.)