diff --git a/WebContent/base/leaflet/L.Control.Goto.js b/WebContent/base/leaflet/L.Control.Goto.js
new file mode 100644
index 000000000..6b2b4ba1e
--- /dev/null
+++ b/WebContent/base/leaflet/L.Control.Goto.js
@@ -0,0 +1,63 @@
+/*
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU AFFERO General Public License as published by
+the Free Software Foundation; either version 3 of the License, or
+any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+or see http://www.gnu.org/licenses/agpl.txt.
+*/
+
+// goto Layers control
+// [used to add clickable buttons to the map]
+L.Control.Goto = L.Control.extend({
+	options: {
+		position: 'topright'
+	},
+
+	onAdd: function (map) {
+		var className = 'leaflet-control-goto',
+		    container = L.DomUtil.create('div', className);
+
+		this._createButton('Goto Location', className + '-my-location', container, map.zoomIn, map);
+		this._createButton('Goto Route', className + '-route', container, map.zoomOut, map);
+
+		return container;
+	},
+
+	_createButton: function (title, className, container, fn, context) {
+		var link = L.DomUtil.create('a', className, container);
+		link.href = '#';
+		link.title = title;
+
+		L.DomEvent
+			.on(link, 'click', L.DomEvent.stopPropagation)
+			.on(link, 'click', L.DomEvent.preventDefault)
+			.on(link, 'click', fn, context)
+			.on(link, 'dblclick', L.DomEvent.stopPropagation);
+
+		return link;
+	}
+});
+
+L.Map.mergeOptions({
+	gotoControl: true
+});
+
+L.Map.addInitHook(function () {
+	if (this.options.gotoControl) {
+		this.gotoControl = new L.Control.Goto();
+		this.addControl(this.gotoControl);
+	}
+});
+
+L.control.Goto = function (options) {
+	return new L.Control.Goto(options);
+};
\ No newline at end of file
diff --git a/WebContent/base/leaflet/L.Control.Layers.js b/WebContent/base/leaflet/L.Control.Layers.js
new file mode 100644
index 000000000..b968b1aab
--- /dev/null
+++ b/WebContent/base/leaflet/L.Control.Layers.js
@@ -0,0 +1,205 @@
+
+L.Control.Layers = L.Control.extend({
+	options: {
+		collapsed: true,
+		position: 'topright',
+		autoZIndex: true
+	},
+
+	initialize: function (baseLayers, overlays, options) {
+		L.Util.setOptions(this, options);
+
+		this._layers = {};
+		this._lastZIndex = 0;
+
+		for (var i in baseLayers) {
+			if (baseLayers.hasOwnProperty(i)) {
+				this._addLayer(baseLayers[i], i);
+			}
+		}
+
+		for (i in overlays) {
+			if (overlays.hasOwnProperty(i)) {
+				this._addLayer(overlays[i], i, true);
+			}
+		}
+	},
+
+	onAdd: function (map) {
+		this._initLayout();
+		this._update();
+
+		return this._container;
+	},
+
+	addBaseLayer: function (layer, name) {
+		this._addLayer(layer, name);
+		this._update();
+		return this;
+	},
+
+	addOverlay: function (layer, name) {
+		this._addLayer(layer, name, true);
+		this._update();
+		return this;
+	},
+
+	removeLayer: function (layer) {
+		var id = L.Util.stamp(layer);
+		delete this._layers[id];
+		this._update();
+		return this;
+	},
+
+	_initLayout: function () {
+		var className = 'leaflet-control-layers',
+		    container = this._container = L.DomUtil.create('div', className);
+
+		if (!L.Browser.touch) {
+			L.DomEvent.disableClickPropagation(container);
+		} else {
+			L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
+		}
+
+		var form = this._form = L.DomUtil.create('form', className + '-list');
+
+		if (this.options.collapsed) {
+			L.DomEvent
+				.on(container, 'mouseover', this._expand, this)
+				.on(container, 'mouseout', this._collapse, this);
+
+			var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
+			link.href = '#';
+			link.title = 'Layers';
+
+			if (L.Browser.touch) {
+				L.DomEvent
+					.on(link, 'click', L.DomEvent.stopPropagation)
+					.on(link, 'click', L.DomEvent.preventDefault)
+					.on(link, 'click', this._expand, this);
+			}
+			else {
+				L.DomEvent.on(link, 'focus', this._expand, this);
+			}
+
+			this._map.on('movestart', this._collapse, this);
+			// TODO keyboard accessibility
+		} else {
+			this._expand();
+		}
+
+		this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
+		this._separator = L.DomUtil.create('div', className + '-separator', form);
+		this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
+
+		container.appendChild(form);
+	},
+
+	_addLayer: function (layer, name, overlay) {
+		var id = L.Util.stamp(layer);
+
+		this._layers[id] = {
+			layer: layer,
+			name: name,
+			overlay: overlay
+		};
+
+		if (this.options.autoZIndex && layer.setZIndex) {
+			this._lastZIndex++;
+			layer.setZIndex(this._lastZIndex);
+		}
+	},
+
+	_update: function () {
+		if (!this._container) {
+			return;
+		}
+
+		this._baseLayersList.innerHTML = '';
+		this._overlaysList.innerHTML = '';
+
+		var baseLayersPresent = false,
+			overlaysPresent = false;
+
+		for (var i in this._layers) {
+			if (this._layers.hasOwnProperty(i)) {
+				var obj = this._layers[i];
+				this._addItem(obj);
+				overlaysPresent = overlaysPresent || obj.overlay;
+				baseLayersPresent = baseLayersPresent || !obj.overlay;
+			}
+		}
+
+		this._separator.style.display = (overlaysPresent && baseLayersPresent ? '' : 'none');
+	},
+
+	// IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
+	_createRadioElement: function (name, checked) {
+
+		var radioHtml = '<input type="radio" name="' + name + '"';
+		if (checked) {
+			radioHtml += ' checked="checked"';
+		}
+		radioHtml += '/>';
+
+		var radioFragment = document.createElement('div');
+		radioFragment.innerHTML = radioHtml;
+
+		return radioFragment.firstChild;
+	},
+
+	_addItem: function (obj) {
+		var label = document.createElement('label'),
+		    input,
+		    checked = this._map.hasLayer(obj.layer);
+
+		if (obj.overlay) {
+			input = document.createElement('input');
+			input.type = 'checkbox';
+			input.defaultChecked = checked;
+		} else {
+			input = this._createRadioElement('leaflet-base-layers', checked);
+		}
+
+		input.layerId = L.Util.stamp(obj.layer);
+
+		L.DomEvent.on(input, 'click', this._onInputClick, this);
+
+		var name = document.createTextNode(' ' + obj.name);
+
+		label.appendChild(input);
+		label.appendChild(name);
+
+		var container = obj.overlay ? this._overlaysList : this._baseLayersList;
+		container.appendChild(label);
+	},
+
+	_onInputClick: function () {
+		var i, input, obj,
+			inputs = this._form.getElementsByTagName('input'),
+			inputsLen = inputs.length;
+
+		for (i = 0; i < inputsLen; i++) {
+			input = inputs[i];
+			obj = this._layers[input.layerId];
+
+			if (input.checked) {
+				this._map.addLayer(obj.layer, !obj.overlay);
+			} else {
+				this._map.removeLayer(obj.layer);
+			}
+		}
+	},
+
+	_expand: function () {
+		L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+	},
+
+	_collapse: function () {
+		this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
+	}
+});
+
+L.control.layers = function (baseLayers, overlays, options) {
+	return new L.Control.Layers(baseLayers, overlays, options);
+};
diff --git a/WebContent/base/leaflet/L.Control.Zoom.js b/WebContent/base/leaflet/L.Control.Zoom.js
new file mode 100644
index 000000000..69cd953e2
--- /dev/null
+++ b/WebContent/base/leaflet/L.Control.Zoom.js
@@ -0,0 +1,44 @@
+L.Control.Zoom = L.Control.extend({
+	options: {
+		position: 'topleft'
+	},
+
+	onAdd: function (map) {
+		var className = 'leaflet-control-zoom',
+		    container = L.DomUtil.create('div', className);
+
+		this._createButton('Zoom in', className + '-in', container, map.zoomIn, map);
+		this._createButton('Zoom out', className + '-out', container, map.zoomOut, map);
+
+		return container;
+	},
+
+	_createButton: function (title, className, container, fn, context) {
+		var link = L.DomUtil.create('a', className, container);
+		link.href = '#';
+		link.title = title;
+
+		L.DomEvent
+			.on(link, 'click', L.DomEvent.stopPropagation)
+			.on(link, 'click', L.DomEvent.preventDefault)
+			.on(link, 'click', fn, context)
+			.on(link, 'dblclick', L.DomEvent.stopPropagation);
+
+		return link;
+	}
+});
+
+L.Map.mergeOptions({
+	zoomControl: true
+});
+
+L.Map.addInitHook(function () {
+	if (this.options.zoomControl) {
+		this.zoomControl = new L.Control.Zoom();
+		this.addControl(this.zoomControl);
+	}
+});
+
+L.control.zoom = function (options) {
+	return new L.Control.Zoom(options);
+};
\ No newline at end of file
diff --git a/WebContent/main.css b/WebContent/main.css
index 28ba219a2..cc2c982d8 100644
--- a/WebContent/main.css
+++ b/WebContent/main.css
@@ -49,6 +49,62 @@ html, body {
 	font-size:9px;
 	display:none;
 }
+/* .leaflet-control-goto {
+	padding: 5px;
+	background: rgba(0, 0, 0, 0.25);	
+	-moz-border-radius: 7px;
+	-webkit-border-radius: 7px;
+	border-radius: 7px;	
+}
+.leaflet-control-goto a {
+	background-color: rgba(255, 255, 255, 0.75);
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	width: 26px;
+	height: 26px;			
+}
+.leaflet-control-goto a:hover {
+	background-color: #fff;
+}
+.leaflet-touch .leaflet-control-goto a {
+	width: 27px;
+	height: 27px;
+}
+.leaflet-control-goto-my-location {
+	background-image:url('images/location.png');
+	margin-bottom:5px;
+}
+
+.leaflet-control-goto-route {
+	background-image:url('images/route.png');
+}
+
+.leaflet-control-layers {
+	padding: 5px;
+	background: rgba(0, 0, 0, 0.25);	
+	-moz-border-radius: 7px;
+	-webkit-border-radius: 7px;
+	border-radius: 7px;
+}
+.leaflet-control-layers a {
+	background-color: rgba(255, 255, 255, 0.75);
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	width: 26px;
+	height: 26px;
+	background-image: url(images/layers.png);
+}
+.leaflet-control-layers a:hover {
+	background-color: #fff;
+} */
 
 /* ------------------------------------------------------------------------ */