Leaflet.js Control and Jquery Uniform.js
Switch branches/tags
Nothing to show
Clone or download
chriscalip show html code.
Update README.md #4
Latest commit 690e0ad Mar 25, 2014



Leaflet layer control with stylable checkboxes and radio buttons.

Styable through uniform.js http://uniformjs.com/

Form elements with jQuery. Now with HTML5 attributes!

Version 1.0

Works well with Leaflet 0.7+

Works well with jQuery 1.6+

Licensed under the MIT License

Online Demo Provided Here: http://chriscalip.github.io/L.UniformControl/

Screenshots : Leaflet Control before styling and after styling before-and-after


Installation of Uniform is quite simple. First, make sure you have jQuery installed. Then you’ll want to link to the jquery.uniform.js file and uniform.default.css in the head area of your page. Second, make sure you have Leaflet installed. Then you'll want to link to the UniformControl.min.js/UniformControl.js in the head area of the page.

Here's what your <head> tag contents should probably contain:

  <!-- Make sure your CSS file is listed before jQuery -->
	<link rel="stylesheet" href="uniform.default.css" media="screen" />
  <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
  <script src="//cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script src="jquery.uniform.js"></script>
	<script src="UniformControl.js"></script>
    / **
    * standard leaflet code.
    ** /
    // initialize stylable leaflet control widget
    var control = L.control.UniForm(null, overlayMaps, {
            collapsed: false,
            position: 'topright'
    // add control widget to map and html dom.
    // update the control widget to the specific theme.

This relies upon a copy of jquery.uniform.js, uniform.default.css, UniformControl.js and the various images all being available on your webserver.