leaflet-notifications

    1.0.7 • Public • Published

    Leaflet.Notifications Demo

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

    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

    Install

    npm i leaflet-notifications

    DownloadsWeekly Downloads

    1

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    26.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • manuel_ri