1.0.7 • Published 3 years ago
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 |