ToeBee/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>OpenStreetMap-US highway shield rendering</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
  <!--[if lte IE 8]>
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
  <![endif]-->
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    #search { background-color:white; position: absolute;
              bottom: 40px; left: 40px; width: auto;
              height: auto; padding: 10px; }
    #search input { width: 200px; }
    #results { font-style: sans-serif; color:black; font-size: 75%; }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script>

    function addr_search() {
      var inp = document.getElementById("addr");

      $.getJSON('http://nominatim.openstreetmap.org/search?format=json&limit=5&q=' + inp.value, function(data) {
        var items = [];

        $.each(data, function(key, val) {
            bb = val.boundingbox;
            items.push("<li><a href='#' onclick='chooseAddr(" + bb[0] + ", " + bb[2] + ", " + bb[1] + ", " + bb[3]  + ", \"" + val.osm_type + "\");return false;'>" + val.display_name + '</a></li>');
        });

                $('#results').empty();
        if (items.length != 0) {
            $('<p>', { html: "Search results:" }).appendTo('#results');
            $('<ul/>', {
                'class': 'my-new-list',
                html: items.join('')
            }).appendTo('#results');
        } else {
            $('<p>', { html: "No results found" }).appendTo('#results');
        }
      });
    }

    function chooseAddr(lat1, lng1, lat2, lng2, osm_type) {
        var loc1 = new L.LatLng(lat1, lng1);
        var loc2 = new L.LatLng(lat2, lng2);
        var bounds = new L.LatLngBounds(loc1, loc2);
        map.fitBounds(bounds);

        if (osm_type == "node") {
                map.setZoom(13);
        }
    }

  </script>

</head>
<body>
  <div id='map'></div>
  <div id="search">
    <form action="javascript:void(0);" onsubmit="addr_search();">
    <input type="text" name="addr" value="" id="addr" size="10" />
    <button type="button" onclick="addr_search();">Search</button>
    <div id="results"/>
    </form>
  </div>

<script type='text/javascript'>
// Start https://github.com/mlevans/leaflet-hash
(function(window) {
	var HAS_HASHCHANGE = (function() {
		var doc_mode = window.documentMode;
		return ('onhashchange' in window) &&
			(doc_mode === undefined || doc_mode > 7);
	})();

	L.Hash = function(map) {
		this.onHashChange = L.Util.bind(this.onHashChange, this);

		if (map) {
			this.init(map);
		}
	};

	L.Hash.parseHash = function(hash) {
		if(hash.indexOf('#') === 0) {
			hash = hash.substr(1);
		}
		var args = hash.split("/");
		if (args.length == 3) {
			var zoom = parseInt(args[0], 10),
			lat = parseFloat(args[1]),
			lon = parseFloat(args[2]);
			if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
				return false;
			} else {
				return {
					center: new L.LatLng(lat, lon),
					zoom: zoom
				};
			}
		} else {
			return false;
		}
	};

	L.Hash.formatHash = function(map) {
		var center = map.getCenter(),
		    zoom = map.getZoom(),
		    precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));

		return "#" + [zoom,
			center.lat.toFixed(precision),
			center.lng.toFixed(precision)
		].join("/");
	},

	L.Hash.prototype = {
		map: null,
		lastHash: null,

		parseHash: L.Hash.parseHash,
		formatHash: L.Hash.formatHash,

		init: function(map) {
			this.map = map;

			// reset the hash
			this.lastHash = null;
			this.onHashChange();

			if (!this.isListening) {
				this.startListening();
			}
		},

		remove: function() {
			if (this.changeTimeout) {
				clearTimeout(this.changeTimeout);
			}

			if (this.isListening) {
				this.stopListening();
			}

			this.map = null;
		},

		onMapMove: function() {
			// bail if we're moving the map (updating from a hash),
			// or if the map is not yet loaded

			if (this.movingMap || !this.map._loaded) {
				return false;
			}

			var hash = this.formatHash(this.map);
			if (this.lastHash != hash) {
				location.replace(hash);
				this.lastHash = hash;
			}
		},

		movingMap: false,
		update: function() {
			var hash = location.hash;
			if (hash === this.lastHash) {
				return;
			}
			var parsed = this.parseHash(hash);
			if (parsed) {
				this.movingMap = true;

				this.map.setView(parsed.center, parsed.zoom);

				this.movingMap = false;
			} else {
				this.onMapMove(this.map);
			}
		},

		// defer hash change updates every 100ms
		changeDefer: 100,
		changeTimeout: null,
		onHashChange: function() {
			// throttle calls to update() so that they only happen every
			// `changeDefer` ms
			if (!this.changeTimeout) {
				var that = this;
				this.changeTimeout = setTimeout(function() {
					that.update();
					that.changeTimeout = null;
				}, this.changeDefer);
			}
		},

		isListening: false,
		hashChangeInterval: null,
		startListening: function() {
			this.map.on("moveend", this.onMapMove, this);

			if (HAS_HASHCHANGE) {
				L.DomEvent.addListener(window, "hashchange", this.onHashChange);
			} else {
				clearInterval(this.hashChangeInterval);
				this.hashChangeInterval = setInterval(this.onHashChange, 50);
			}
			this.isListening = true;
		},

		stopListening: function() {
			this.map.off("moveend", this.onMapMove, this);

			if (HAS_HASHCHANGE) {
				L.DomEvent.removeListener(window, "hashchange", this.onHashChange);
			} else {
				clearInterval(this.hashChangeInterval);
			}
			this.isListening = false;
		}
	};
	L.hash = function(map) {
		return new L.Hash(map);
	};
	L.Map.prototype.addHash = function() {
		this._hash = L.hash(this);
	};
	L.Map.prototype.removeHash = function() {
		this._hash.remove();
	};
})(window);
// End https://github.com/mlevans/leaflet-hash

var map = L.map('map').setView([37.7675, -122.4035], 11);
L.tileLayer('http://{s}.tile.openstreetmap.us/osmus_shields/{z}/{x}/{y}.png', {
    attribution: '<a href="http://openstreetmap.org/copyright">&copy; OpenStreetMap contributors</a>',
    maxZoom: 18
}).addTo(map);
new L.Hash(map);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>OpenStreetMap-US highway shield rendering</title>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	#search { background-color:white; position: absolute;
	bottom: 40px; left: 40px; width: auto;
	height: auto; padding: 10px; }
	#search input { width: 200px; }
	#results { font-style: sans-serif; color:black; font-size: 75%; }
	</style>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script>

	function addr_search() {
	var inp = document.getElementById("addr");

	$.getJSON('http://nominatim.openstreetmap.org/search?format=json&limit=5&q=' + inp.value, function(data) {
	var items = [];

	$.each(data, function(key, val) {
	bb = val.boundingbox;
	items.push("<li><a href='#' onclick='chooseAddr(" + bb[0] + ", " + bb[2] + ", " + bb[1] + ", " + bb[3] + ", \"" + val.osm_type + "\");return false;'>" + val.display_name + '</a></li>');
	});

	$('#results').empty();
	if (items.length != 0) {
	$('<p>', { html: "Search results:" }).appendTo('#results');
	$('<ul/>', {
	'class': 'my-new-list',
	html: items.join('')
	}).appendTo('#results');
	} else {
	$('<p>', { html: "No results found" }).appendTo('#results');
	}
	});
	}

	function chooseAddr(lat1, lng1, lat2, lng2, osm_type) {
	var loc1 = new L.LatLng(lat1, lng1);
	var loc2 = new L.LatLng(lat2, lng2);
	var bounds = new L.LatLngBounds(loc1, loc2);
	map.fitBounds(bounds);

	if (osm_type == "node") {
	map.setZoom(13);
	}
	}

	</script>

	</head>
	<body>
	<div id='map'></div>
	<div id="search">
	<form action="javascript:void(0);" onsubmit="addr_search();">
	<input type="text" name="addr" value="" id="addr" size="10" />
	<button type="button" onclick="addr_search();">Search</button>
	<div id="results"/>
	</form>
	</div>

	<script type='text/javascript'>
	// Start https://github.com/mlevans/leaflet-hash
	(function(window) {
	var HAS_HASHCHANGE = (function() {
	var doc_mode = window.documentMode;
	return ('onhashchange' in window) &&
	(doc_mode === undefined \|\| doc_mode > 7);
	})();

	L.Hash = function(map) {
	this.onHashChange = L.Util.bind(this.onHashChange, this);

	if (map) {
	this.init(map);
	}
	};

	L.Hash.parseHash = function(hash) {
	if(hash.indexOf('#') === 0) {
	hash = hash.substr(1);
	}
	var args = hash.split("/");
	if (args.length == 3) {
	var zoom = parseInt(args[0], 10),
	lat = parseFloat(args[1]),
	lon = parseFloat(args[2]);
	if (isNaN(zoom) \|\| isNaN(lat) \|\| isNaN(lon)) {
	return false;
	} else {
	return {
	center: new L.LatLng(lat, lon),
	zoom: zoom
	};
	}
	} else {
	return false;
	}
	};

	L.Hash.formatHash = function(map) {
	var center = map.getCenter(),
	zoom = map.getZoom(),
	precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));

	return "#" + [zoom,
	center.lat.toFixed(precision),
	center.lng.toFixed(precision)
	].join("/");
	},

	L.Hash.prototype = {
	map: null,
	lastHash: null,

	parseHash: L.Hash.parseHash,
	formatHash: L.Hash.formatHash,

	init: function(map) {
	this.map = map;

	// reset the hash
	this.lastHash = null;
	this.onHashChange();

	if (!this.isListening) {
	this.startListening();
	}
	},

	remove: function() {
	if (this.changeTimeout) {
	clearTimeout(this.changeTimeout);
	}

	if (this.isListening) {
	this.stopListening();
	}

	this.map = null;
	},

	onMapMove: function() {
	// bail if we're moving the map (updating from a hash),
	// or if the map is not yet loaded

	if (this.movingMap \|\| !this.map._loaded) {
	return false;
	}

	var hash = this.formatHash(this.map);
	if (this.lastHash != hash) {
	location.replace(hash);
	this.lastHash = hash;
	}
	},

	movingMap: false,
	update: function() {
	var hash = location.hash;
	if (hash === this.lastHash) {
	return;
	}
	var parsed = this.parseHash(hash);
	if (parsed) {
	this.movingMap = true;

	this.map.setView(parsed.center, parsed.zoom);

	this.movingMap = false;
	} else {
	this.onMapMove(this.map);
	}
	},

	// defer hash change updates every 100ms
	changeDefer: 100,
	changeTimeout: null,
	onHashChange: function() {
	// throttle calls to update() so that they only happen every
	// `changeDefer` ms
	if (!this.changeTimeout) {
	var that = this;
	this.changeTimeout = setTimeout(function() {
	that.update();
	that.changeTimeout = null;
	}, this.changeDefer);
	}
	},

	isListening: false,
	hashChangeInterval: null,
	startListening: function() {
	this.map.on("moveend", this.onMapMove, this);

	if (HAS_HASHCHANGE) {
	L.DomEvent.addListener(window, "hashchange", this.onHashChange);
	} else {
	clearInterval(this.hashChangeInterval);
	this.hashChangeInterval = setInterval(this.onHashChange, 50);
	}
	this.isListening = true;
	},

	stopListening: function() {
	this.map.off("moveend", this.onMapMove, this);

	if (HAS_HASHCHANGE) {
	L.DomEvent.removeListener(window, "hashchange", this.onHashChange);
	} else {
	clearInterval(this.hashChangeInterval);
	}
	this.isListening = false;
	}
	};
	L.hash = function(map) {
	return new L.Hash(map);
	};
	L.Map.prototype.addHash = function() {
	this._hash = L.hash(this);
	};
	L.Map.prototype.removeHash = function() {
	this._hash.remove();
	};
	})(window);
	// End https://github.com/mlevans/leaflet-hash

	var map = L.map('map').setView([37.7675, -122.4035], 11);
	L.tileLayer('http://{s}.tile.openstreetmap.us/osmus_shields/{z}/{x}/{y}.png', {
	attribution: '<a href="http://openstreetmap.org/copyright">© OpenStreetMap contributors</a>',
	maxZoom: 18
	}).addTo(map);
	new L.Hash(map);
	</script>
	</body>
	</html>