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 |