leaflet-notifications

Leaflet.Notifications Demo

A leaflet plugin to show notification messages (toasts) inside the map.

Installation

npm install leaflet-notifications

Usage

var mymap = L.map('mapid').setView([50, 8], 13);
var notification = L.control
    .notifications({
        timeout: 3000,
        position: 'topright',
        closable: true,
        dismissable: true,
    })
    .addTo(mymap);

//spawn notification popups
notification.alert('Alert', 'some alert message');
notification.info('Info', 'some infomessage');
notification.success('Success', 'some successmessage');
notification.warning('Warning', 'some warning message');
notification.custom('Custom', 'some <span>custom</span> message'); //HTML works for every notification, not only custom()

//custom options per notification
notification.alert('Alert', 'some more important alert message', {
    timeout: 6000,
    closable: false,
    dismissable: false,
    icon: 'fa fa-times-circle',
    className: 'important-alert',
});

/* STYLE CLASS */

/* default (picture 1) */
var notifications = L.control.notifications().addTo(mymap);
/* pastel (picture 2) */
var pastelNotifications = L.control.notifications({ className: 'pastel' }).addTo(mymap);
/* modern (picture 3) */
var modernNotifications = L.control.notifications({ className: 'modern' }).addTo(mymap);

Control options

Property	Type	Default	Description
timeout	Number	3000	Time after which the notification will vanish
position	String	'topright'	Position of the notifications. Possible values are topright, topleft, bottomright, bottomleft
closable	Boolean	true	Shows a close button on all notifications
dismissable	Boolean	true	If true a click on a notification will close it
className	String	null	A custom class name for styling
icons	object	null	Icon (class) names. Defaults are font-awesome icons
marginLeft	String/Number	null	margin-left, e.g. "5rem", 20, "30px"
marginRight	String/Number	null	margin-right, e.g. "5rem", 20, "30px"

icons options

Property	Type	Default	Description
alert	String	'fa fa-exclamation-circle'	alert icon class name
success	String	'fa fa-check-circle'	success icon class name
warning	String	'fa fa-exclamation-triangle'	warning icon class name
info	String	'fa fa-info-circle'	info icon class name
custom	String	'fa fa-cog'	custom icon class name

Hint: you might need to include the ./node_modules/font-awesome/css/font-awesome.min.css to your project

Notification options

Property	Type	Default	Description
icon	String		Icon (class) name for the specific notification. Defaults are font-awesome icons
timeout	Number	null	Time after which the specific notification will vanish
closable	Boolean	true	Shows a close button
dismissable	Boolean	true	If true a click on the specific notification will close it
className	String	null	A custom class name for styling

Methods

Method	Returns	Example	Description
alert(title, message, options)	void	notification.alert("title", "some message")	shows an alert message notification
info(title, message, options)	void	notification.alert("title", "some message")	shows an info message notification
success(title, message, options)	void	notification.alert("title", "some message")	shows a success message notification
warn(title, message, options)	void	notification.alert("title", "some message")	shows a warning message notification
custom(title, message, options)	void	notification.alert("title", "some message")	shows a custom message notification
clear()	void	notification.clear()	removes all notifications