Skip to content

Instantly share code, notes, and snippets.

@mpfeil
Last active Aug 29, 2015
Embed
What would you like to do?
CSS class for horizontal leaflet-bar
<!DOCTYPE html>
<html>
<head>
<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="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet" type="text/css" href="leaflet-bar-horizontal.css">
</head>
<body>
<div id="map" style="width: 100%; height: 600px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script>
var myMap = L.map('map').setView([52.06, 7.40], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);
//Create vertical control
var horizontalCtrl = L.control();
horizontalCtrl.setPosition('topright');
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;
};
horizontalCtrl.addTo(myMap);
</script>
</body>
</html>
.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