tomay/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" ; Content-Type: text/html; charset=utf-8/>
    <title>
        Karte der Kita Rabauken und Trompeten
    </title>

    <script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
    <link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' />

    <style>
        body {
            margin: 0;
            padding: 0;
        }
        html,
        body,
        #map {
            height: 100%;
        }
        .leaflet-bar a {
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            /* border-bottom-color: rgb(204, 204, 204); */

            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;
       }

       .leaflet-control-mapbox-geocoder-results a {width: 100%}

    </style>

</head>

<body>

    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />

    <style>
        .leaflet-control-locate {
            border: 1px solid rgba(0, 0, 0, 0.4);
        }
        ;
        .leaflet-control-locate a {
            background-color: #fff;
            background-position: -3px, -2px;
        }
        ;
        .leaflet-control-locate.active a {
            background-position: -33px -2px;
        }
        ;
    </style>

    <div id='map'></div>

    <script type='text/javascript'>
        window.onload = function() {
            L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiUXl1TUlibyJ9.F8RtDaUfUbi3Rs0og3GmCQ';

            var map = L.map('map', {
                zoomControl: false
            });
            var geocoder = L.mapbox.geocoderControl('mapbox.places', {autocomplete:true});

            // custom zoom bar control that includes a Zoom Home function
            L.Control.zoomHome = L.Control.extend({
                options: {
                    position: 'topleft',
                    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);

            // add ipp locater to the map
            var iplocate = L.control.locate();
            iplocate.addTo(map);
            geocoder.addTo(map);

        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" ; Content-Type: text/html; charset=utf-8/>
	<title>
	Karte der Kita Rabauken und Trompeten
	</title>

	<script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
	<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
	<link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' />

	<style>
	body {
	margin: 0;
	padding: 0;
	}
	html,
	body,
	#map {
	height: 100%;
	}
	.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	/* border-bottom-color: rgb(204, 204, 204); */

	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;
	}

	.leaflet-control-mapbox-geocoder-results a {width: 100%}

	</style>

	</head>

	<body>

	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />

	<style>
	.leaflet-control-locate {
	border: 1px solid rgba(0, 0, 0, 0.4);
	}
	;
	.leaflet-control-locate a {
	background-color: #fff;
	background-position: -3px, -2px;
	}
	;
	.leaflet-control-locate.active a {
	background-position: -33px -2px;
	}
	;
	</style>

	<div id='map'></div>

	<script type='text/javascript'>
	window.onload = function() {
	L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiUXl1TUlibyJ9.F8RtDaUfUbi3Rs0og3GmCQ';

	var map = L.map('map', {
	zoomControl: false
	});
	var geocoder = L.mapbox.geocoderControl('mapbox.places', {autocomplete:true});

	// custom zoom bar control that includes a Zoom Home function
	L.Control.zoomHome = L.Control.extend({
	options: {
	position: 'topleft',
	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);

	// add ipp locater to the map
	var iplocate = L.control.locate();
	iplocate.addTo(map);
	geocoder.addTo(map);

	}
	</script>
	</body>

	</html>