开源软件名称: consbio/Leaflet.HtmlLegend开源软件地址: https://github.com/consbio/Leaflet.HtmlLegend开源编程语言:
HTML
47.1%
开源软件介绍: Leaflet.HtmlLegend
A simple Leaflet plugin for creating legends with HTML.
Tested with Leaflet 1.3.x
Install
From NPM:
npm install leaflet-html-legend
Usage
Include the CSS:
< link rel ="stylesheet " href ="L.Control.HtmlLegend.css " />
Include the JavaScript:
< script src ="L.Control.HtmlLegend.min.js "> </ script >
Options:
Option
Type
Default
Description
position
String
'topright'
Map position of element
legend
Array
-
Array of legend entries (see below for the structure)
collapseSimple
bool
false
Whether to use compact presentation for legend entries that are from a simple renderer
detectStreched
bool
false
Test to see if legend entries look stretched (these are usually in sets of 3 with the middle element having no label)
collapsedOnInit
bool
false
Whether to initialize instance in collapsed mode
disableVisibilityControls
bool
false
Whether to add visibility toggle button and opacity sliders
updateOpacity
function
null
If set, this function is used to update opacity of the attached layer (it receives the layer and opacity as arguments)
defaultOpacity
number
1
Default opacity for layers in specified in legends
visibleIcon
String
'leaflet-html-legend-icon-eye'
css class for the visible icon on opacity slider
hiddenIcon
String
'leaflet-html-legend-icon-eye-slash'
css class for the hidden icon on opacity slider
toggleIcon
String
'leaflet-html-legend-icon-eye-slash'
css class for the icon on visibility toggle button
Each entry in legends
array can have the following keys:
Each element has:
label (optional)
html (optional): string representaiton of an HTML elemnt that goes into the legend block
style (optional): an object containing css styling of the legend block
You can use addLegend
method to add legends to existing instances of HtmlLegend
:
var htmlLegend = L . control . htmllegend ( { ...} ) ;
htmlLegend . addLegend ( {
name : 'Layer name' ,
layer : layerInstance ,
elements : [ {
html : '<div>Legend description</div>'
} ]
} )
An existing entry in a legend control instance can be removed using removeLegend
. This method needs id of the entry, which can be obtained from htmllegend._entries
(see the example for usage).
See the example for usage details.
Contributors:
请发表评论