Skip to content

Instantly share code, notes, and snippets.

Last active Aug 29, 2015
What would you like to do?
CSS class for horizontal leaflet-bar
<!DOCTYPE html>
<title>Leaflet Vertical Control Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="" />
<link rel="stylesheet" type="text/css" href="leaflet-bar-horizontal.css">
<div id="map" style="width: 100%; height: 600px"></div>
<script src=""></script>
var myMap ='map').setView([52.06, 7.40], 10);
L.tileLayer('http://{s}{z}/{x}/{y}.png', {
attribution: '&copy; <a href="">OpenStreetMap</a> contributors'
//Create vertical control
var horizontalCtrl = L.control();
horizontalCtrl.onAdd = function () {
var container = L.DomUtil.create('div', ' leaflet-bar leaflet-bar-horizontal ', this._control);
var backwards = L.DomUtil.create('a', ' ', container);
backwards.innerHTML = '<strong><</strong>';
var middle = L.DomUtil.create('a', ' ', container);
middle.innerHTML = '<strong>==</strong>';
var forwards = L.DomUtil.create('a', ' ', container);
forwards.innerHTML = '<strong>></strong>';
return container;
.leaflet-bar-horizontal a {
float: left;
border-right: 1px solid #ccc;
border-bottom-width: 0px;
.leaflet-bar-horizontal a:hover {
border-bottom-width: 0px;
.leaflet-bar-horizontal a:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 0px;
.leaflet-bar-horizontal a:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 0px;
border-right-width: 0px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment