Demo
Leaflet.NotificationsA 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 |