Nit-Picking Manager

    leaflet-material-controls

    1.1.0 • Public • Published

    Leaflet Material Controls

    Leaflet controls implemented using Google's Material Design Lite framework.

    Includes the following custom controls:

    🌍 View demo.

    Installation

    Download and use the leaflet-material.css and leaflet-material.js files located in the dist/ folder.

    <script src="leaflet-material.js"></script>
    <link href="leaflet-material.css" rel="stylesheet" />

    3rd-Party Dependencies

    Requires JS/CSS files from Leaflet/Mapbox and Material Design Lite.

    Material Design Lite

    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" />
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

    Mapbox

    <script src="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js"></script>
    <link href="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css" rel="stylesheet" />

    Leaflet

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    Leaflet-Fullscreen

    <link
      href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css"
      rel="stylesheet"
    />

    Usage

    The material-flavoured controls are implemented as L.materialControl.<Control>, e.g. the default L.Control.Zoom is 'materialised' as L.materialControl.Zoom.

    You can swap the default controls for the material ones as followed:

    • L.Control.Zoom -> L.materialControl.Zoom
    • L.Control.Fullscreen -> L.materialControl.Fullscreen
    • L.Control.Layers -> L.materialControl.Layers
    • L.mapbox.GeocoderControl -> L.materialControl.Geocoder

    Example:

    // Material zoom control:
    var materialZoomControl = new L.materialControl.Zoom({position: 'topright', materialOptions: materialOptions}).addTo(map);
    

    Lowercase shortcuts are also included that allow you to create controls without the new keyword.

    L.materialControl.zoom({position: 'topright', materialOptions: materialOptions}).addTo(map);
    

    Configuration Options

    L.Control has been extended to include additional options specific to leaflet-material. These options allow you to specify the type of material button to be used, whether tooltips should be included or if the ripple effect should be applied.

    var materialOptions = {
      fab: true,
      miniFab: true,
      rippleEffect: true,
      toolTips: false,
      color: 'primary'
    }
    

    The options correspond with the parameters stated in the Material Design Lite framework. The color option can be one of either primary, accent or any of the colour palletes included in the framework (red-400, purple-50, indigo-200, etc).

    Install

    npm i leaflet-material-controls

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    112 kB

    Total Files

    16

    Last publish

    Collaborators

    • ctippett