Leaflet Tutorial Intermediate – How to Create Legends

leaflet legends


Leaflet.Legend is a plugin for Leaflet that display legend symbols and toggle overlays.

const legend = L.control.Legend({
            position: "bottomleft",
            collapsed: false,
            symbolWidth: 24,
            opacity: 1,
            column: 2,
            legends: [{
                label: "Marker1",
                type: "image",
                url: "marker/marker-red.png",
            }, {
                label: "Marker2",
                type: "image",
                url: "marker/purple.png"
            }, {
                label: "Marker",
                type: "circle",
                radius: 6,
                color: "blue",
                fillColor: "#FF0000",
                fillOpacity: 0.6,
                weight: 2,
                layers: [marker],
                inactive: true,
            }, {
                label: "Real line",
                type: "polygon",
                color: "#FF0000",
                fillColor: "#FF0000",
                weight: 2,
                layers: polygon
            }, {
                label: "Dotted line",
                type: "polyline",
                color: "#0000FF",
                fillColor: "#0000FF",
                dashArray: [5, 5],
                weight: 2
            }, {
                label: "Rectangle",
                type: "rectangle",
                color: "#FF0000",
                fillColor: "#FF0000",
                weight: 2
            }, {
                label: "Square",
                type: "polygon",
                sides: 4,
                color: "#FF0000",
                fillColor: "#FF0000",
                weight: 2
            }, {
                label: "Regular triangle",
                type: "polygon",
                sides: 3,
                color: "#FF0000",
                fillColor: "#FF0000",
                weight: 2
            }, {
                label: "Regular polygon",
                type: "polygon",
                sides: 5,
                color: "#FF0000",
                fillColor: "#FF0000",
                weight: 2


positionString‘topleft’The position of the control.
titleString‘Legend’The title of the control.
opacityNumber1.0Opacity of the container.
legendsLegendSymbol[][]Array of legend symbols that will be added to the container.
symbolWidthNumber24Symbol width of the legend, in pixels.
symbolHeightNumber24Symbol width of the legend, in pixels.
columnNumber1The number of columns arranged in the legend.
collapsedBooleanfalseIf true, the control will be collapsed into an icon and expanded on mouse hover or touch.


labelStringundefinedThe label of the legend symbol.
typeStringundefinedThe type of the legend symbol. Possible values are ‘image’, ‘circle’, ‘rectangle’, ‘polygon’ or ‘polyline’
urlStringundefinedThe url of the symbol image, only used when type is ‘image’
radiusNumberundefinedThe radius of the circle, in pixels, only used when type is ‘circle’
sidesNumberundefinedThe number of sides of a regular polygon, only used when type is ‘polygon’
layersLayer|Layer[]undefinedLegend symbol associated layers. While associating the layers, the display state of the layers can be toggled.
inactiveBooleanundefinedIs the legend symbol inactive
strokeBooleantrueWhether to draw stroke along the path. Set it to false to disable borders on polygons or circles.
colorString‘#3388ff’Stroke color
weightNumber3Stroke width in pixels
opacityNumber1.0Stroke opacity
lineCapString’round’A string that defines shape to be used at the end of the stroke.
lineJoinString’round’A string that defines shape to be used at the corners of the stroke.
dashArrayStringnullA string that defines the stroke dash pattern. Doesn’t work on Canvas-powered layers in some old browsers.
dashOffsetStringnullA string that defines the distance into the dash pattern to start the dash. Doesn’t work on Canvas-powered layers in some old browsers.
fillBooleandependsWhether to fill the path with color. Set it to false to disable filling on polygons or circles.
fillColorString*Fill color. Defaults to the value of the color option
fillOpacityNumber0.2Fill opacity.
fillRuleString‘evenodd’A string that defines how the inside of a shape is determined.

i use github code here

Keywords related:

osm map
osm api
openstreet view


Leave a Reply

%d bloggers like this:
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Adblockers perform their job via blocking communication with ad-forcing servers, and by hiding the webpage elements containing commercial content. By referring to filter lists containing the addresses of ad servers, ad blockers seek matches in website elements and define what should be blocked.

Adblocking detection in its turn is performed through “bait content”. Invisible to the user, such bait is implemented the way adblockers recognize it as commercial content. As soon as the webpage finishes loading, the detection algorithm calls to the properties of the bait. If the bait is hidden, the algorithm recognizes that there’s an active adblocker. Although baits are different and have different levels of complexity, it’s not that hard to disable adblock detection.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock