The following will add a custom zoom control with a home button to a Leaflet map. The home icon is from font-awesome, so be sure to include that reference.
Working fiddle here.
html:
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
css:
#map { height: 340px; }
.leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; color: #444; display: block; height: 26px; width: 26px; line-height: 1.45 !important; text-align: center; text-decoration: none; font: bold 18px 'Lucida Console', Monaco, monospace; }
javascript:
var lat = 51.505;
var lng = -0.09;
var zoom = 12;
// set up the map and remove the default zoomControl
var map = L.map('map', {
zoomControl: false
});
map.setView([lat, lng], zoom);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
// custom zoom bar control that includes a Zoom Home function
L.Control.zoomHome = L.Control.extend({
options: {
position: 'topright',
zoomInText: '+',
zoomInTitle: 'Zoom in',
zoomOutText: '-',
zoomOutTitle: 'Zoom out',
zoomHomeText: '<i class="fa fa-home" style="line-height:1.65;"></i>',
zoomHomeTitle: 'Zoom home'
},
onAdd: function (map) {
var controlName = 'gin-control-zoom',
container = L.DomUtil.create('div', controlName + ' leaflet-bar'),
options = this.options;
this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,
controlName + '-in', container, this._zoomIn);
this._zoomHomeButton = this._createButton(options.zoomHomeText, options.zoomHomeTitle,
controlName + '-home', container, this._zoomHome);
this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
controlName + '-out', container, this._zoomOut);
this._updateDisabled();
map.on('zoomend zoomlevelschange', this._updateDisabled, this);
return container;
},
onRemove: function (map) {
map.off('zoomend zoomlevelschange', this._updateDisabled, this);
},
_zoomIn: function (e) {
this._map.zoomIn(e.shiftKey ? 3 : 1);
},
_zoomOut: function (e) {
this._map.zoomOut(e.shiftKey ? 3 : 1);
},
_zoomHome: function (e) {
map.setView([lat, lng], zoom);
},
_createButton: function (html, title, className, container, fn) {
var link = L.DomUtil.create('a', className, container);
link.innerHTML = html;
link.href = '#';
link.title = title;
L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', fn, this)
.on(link, 'click', this._refocusOnMap, this);
return link;
},
_updateDisabled: function () {
var map = this._map,
className = 'leaflet-disabled';
L.DomUtil.removeClass(this._zoomInButton, className);
L.DomUtil.removeClass(this._zoomOutButton, className);
if (map._zoom === map.getMinZoom()) {
L.DomUtil.addClass(this._zoomOutButton, className);
}
if (map._zoom === map.getMaxZoom()) {
L.DomUtil.addClass(this._zoomInButton, className);
}
}
});
// add the new control to the map
var zoomHome = new L.Control.zoomHome();
zoomHome.addTo(map);
There are two possibilities I found (I have had the same problem).
- For the first one, the answer on top help. I was trying to do it as you did, without using the
<script> tag to load the files, but if you do so, it works. Declare each JSON file using the <script> tag:
<script src="JSONFILE-1.js" type="text/javascript"></script>
<script src="JSONFILE-2.js" type="text/javascript"></script>
Make sure each JSON file starts with the the var declaration, as it will be included through the script tag:
var jsonVar = { "type":"Feature"...
Call them in:
var layer1 = L.geoJson(var_name_from_jsonfile1, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8, ...
});
}
});
var layer2 = L.geoJson(var_name_from_jsonfile2, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8, ...
});
}
});
When calling them, you do not need to addTo(map) since this will be taken care of, as you did on your code, by L.control.layers(baseMaps, overlayMaps).addTo(map);.
- If you don't want to include the files as such and would rather use
$.geojson I found another option which is just calling the L.geoJson with null. It works just as well (though I don't know if its the most elegant solution):
var jsonVar = L.geoJson(null, {...
...then:
$.getJSON("json/nead.json", function (data) {
jsonVar.addData(data);
});
hope this helps!
Best Answer
Have you tried L.EasyButton? It's quick and easy, although the buttons can contain only icons out of the box. There's plenty of useful examples and demos on site.
If that doesn't suit your needs, you'll have to extend Leaflets L.control class. Let me know and I'll try to work up an example using L.Control