en ru | docs

Leaflet Plugins

During the development of MapBBCode a lot of Leaflet plugins were written. Here is a documentation on all of them, along with examples and download links. Source files reside along MapBBCode in its GitHub repository.

L.LetterIcon

A round icon with a white border and text inside. Can be used to display markers that don't require clicking or hovering over to see their labels.

Option Type Default Description
color String 'black' CSS color of icon background.
radius Number 11 Icon radius.

Download

L.marker([11, 22], { icon: L.letterIcon('Big', { radius: 20 }), clickable: false }).addTo(map);

L.PopupIcon

An icon that looks like a popup panel, but significantly smaller. Title should be passed to the constructor.

Option Type Default Description
width Number 150 Maximum icon width.
color String 'white' Background CSS color.
selectable Boolean false If set, text on the icon can be selected, but marker cannot be clicked or dragged.

Download

L.marker([11, 22], { icon: L.popupIcon("Don't click me"), clickable: false }).addTo(map);

L.FunctionButtons

This control simplifies creating simple Leaflet controls that invoke javascript functions when clicked. It supports multiple actions on one control: in that case they are stacked vertically, like on a standard zoom control.

Class contructor accepts two parameters: an array of button objects and an options object. Button objects can have following properties:

Property Type Description
content String or Node A string, image data URL or a component to display inside a button.
alt String A string to display in case content is empty.
title String Title attribute.
href String URL for a button. If set, clicked events are not generated, the button acts as a regular link.
bgColor String CSS color for a button background.
imageSize Number Background image size (when content is image data URL, the same for width and height, default 26).
bgPos Array Two numbers for x and y offset of button background image (when content is image data URL).

Some function button properties can be updated with setContent(id, content), setTitle(id, title), setHref(id, href) and setBgPos(id, bgPos) methods. For a single button id can be skipped, it defaults to 0.

The only option, position, is inherited from the L.Control class and stores a corner in which the button is displayed.

When clicked, the control emits a Leaflet event clicked with a single data property, idx: zero-based index of an action that was selected.

Download

var btn = L.functionButtons([{ content: 'Saint-Petersburg' }, { content: 'Hide buttons'}]);
btn.on('clicked', function(data) {
    if( data.idx == 0 ) {
        map.setView([59.939, 30.315], 13);
    } else {
        map.removeControl(btn);
    }
});
map.addControl(btn);

L.StaticLayerSwitcher

This control can replace the standard Leaflet layers control. It allows a user to switch layers and, if editable property is set, to remove layers and change their order. This control differs from the stanard one in two ways:

Each layer has to have a label (id). It is either specified on adding, or included in the layer's options object as a name property. The plugin can be used together with window.layerList module: in this case layers can be managed as a list of ids.

The constructor accepts two parameters. The first one is a layer list, either an array of ids or an object { id: layer, ... }. If a layer is not specified, it is requested from window.layerList for a given id. The second optional parameter is an options object with the following properties:

Option Type Default Description
maxLayers Number 7 Maximum number of layers on a map.
bgColor String 'white' Background CSS color of a layer switcher.
selectedColor String #ddd Background CSS color of a selected layer line.
editable Boolean false Whether a user can move and delete layers.
enforceOSM Boolean false Whether the first layer should be OSM-based.

Those methods can be used to get and manipulate layers in a layer switcher:

When active, the layer switcher emits following Leaflet events:

Event Data When fired
selectionchanged { <ILayer> selected, <String> selectedId } A user has changed active layer.
layerschanged { <String[]> layerIds } List of layers has been changed (only when it is editable).

Download

map.addControl(L.staticLayerSwitcher([
    'OpenMapSurfer', 'CycleMap', 'Humanitarian'
], { editable: true }));

window.layerList

This object (not a class!) holds a list of layers that can be used on a leaflet map, and more specifically, as a MapBBCode base layer. It is by no means complete and includes only the most popular and distinctive layers.

The list itself is in the list property: it is an array of strings, which have to be passed to eval() to be converted into a Leaflet ILayer object. Some of entries contain {key:<url>} substring. It means that the layer requires a developer key (and the link is for its website). This substring has to be replaced with an actual key.

The object has some methods to simplify working with the layer list:

Download

map.addLayer(window.layerList.getLeafletLayer('OpenStreetMap'));

L.Control.Search

Every search control on the Leaflet plugins page has flaws. This is an attempt on making a simple, good-looking (though not as good as MapBox's) search control. You just click a button, type a string and press Enter key. There are only two configurable options:

Download

map.addControl(L.control.search());

L.ExportControl

An export button for maps downloaded from an external service. Gets the supported formats list from the server.

Option Type Default Description
name String 'Export' Text written on a button.
title String '' Title text for the button.
endpoint String 'http://share.mapbbcode.org/' URL of the map sharing service.
codeid String '' Identifier of a map to export.
types String[] [] List of supported formats (if empty, then it is downloaded).
titles String[] [] Titles for supported formats (if empty, then it is downloaded).
filter String[] [] If not empty, only types that are in this array are displayed.

Download

map.addControl(L.exportControl({ codeid: 'nwrxs' }));

L.Control.PermalinkAttribution

Replaces L.Control.Attribution with itself, so you won't have to do anything besides including the plugin script. Makes OpenStreetMap links in attribution into permanent links to the displayed place on osm.org website. If other attribution links contain {lat}, {lon} and {zoom} substrings, they are replaced with actual coordinates and zoom level.

An option attributionEditLink is added to L.Map class. If it is set to true, OSM links will be followed by an edit link.

Download