lmc
leaflet-material-controls
npm i leaflet-material-controls
lmc

leaflet-material-controls

Custom Leaflet.js controls themed using Google Material Design

by Chris

1.1.0 (see all)License:MITTypeScript:Not Found
npm i leaflet-material-controls
Readme

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).

Downloads/wk

2

GitHub Stars

27

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

3

OPEN PRs

0
VersionTagPublished
1.1.0
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate