diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d86571f..0377920 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,9 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@googlemaps/polyline-codec": "^1.0.28",
-				"leaflet": "^1.9.2"
+				"currency.js": "^2.0.4",
+				"leaflet": "^1.9.2",
+				"leaflet.vectorgrid": "^1.3.0"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
@@ -26,6 +28,7 @@
 				"postcss": "^8.4.19",
 				"prettier": "^2.6.2",
 				"prettier-plugin-svelte": "^2.7.0",
+				"simple-svelte-autocomplete": "^2.5.1",
 				"svelte": "^3.44.0",
 				"svelte-check": "^2.7.1",
 				"svelte-preprocess": "^4.10.7",
@@ -1030,6 +1033,11 @@
 				"color-support": "bin.js"
 			}
 		},
+		"node_modules/commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1077,6 +1085,14 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/currency.js": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/currency.js/-/currency.js-2.0.4.tgz",
+			"integrity": "sha512-6/OplJYgJ0RUlli74d93HJ/OsKVBi8lB1+Z6eJYS1YZzBuIp4qKKHpJ7ad+GvTlWmLR/hLJOWTykN5Nm8NJ7+w==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2157,6 +2173,25 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/ieee754": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+			"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
 		"node_modules/ignore": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -2338,6 +2373,20 @@
 			"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.2.tgz",
 			"integrity": "sha512-Kc77HQvWO+y9y2oIs3dn5h5sy2kr3j41ewdqCMEUA4N89lgfUUfOBy7wnnHEstDpefiGFObq12FdopGRMx4J7g=="
 		},
+		"node_modules/leaflet.vectorgrid": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/leaflet.vectorgrid/-/leaflet.vectorgrid-1.3.0.tgz",
+			"integrity": "sha512-kWmj1pKM+MVdo/7Mg5zsB3YrGZvo/uIuiANV9MvWUFOG+Y2xAJzrteDhoIcCgTjHSSRJ36xdeGdIQVhuWjnCZw==",
+			"dependencies": {
+				"pbf": "^3.0.2",
+				"topojson-client": "^2.1.0",
+				"vector-tile": "^1.3.0",
+				"whatwg-fetch": "^2.0.3"
+			},
+			"peerDependencies": {
+				"leaflet": "^1.0.2"
+			}
+		},
 		"node_modules/levn": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2791,6 +2840,18 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/pbf": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+			"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+			"dependencies": {
+				"ieee754": "^1.1.12",
+				"resolve-protobuf-schema": "^2.1.0"
+			},
+			"bin": {
+				"pbf": "bin/pbf"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2818,6 +2879,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/point-geometry": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/point-geometry/-/point-geometry-0.0.0.tgz",
+			"integrity": "sha512-tXK8bY2l3/CPkyO7+UbOWbVjCpKoYY4t6uY3AYYy4Bagd4Z942gLeQOgtHICwBwgPf8dI6fw4VqKwzSNgvlw4A==",
+			"deprecated": "This module has moved: please install @mapbox/point-geometry instead"
+		},
 		"node_modules/postcss": {
 			"version": "8.4.19",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
@@ -2979,6 +3046,11 @@
 				"svelte": "^3.2.0"
 			}
 		},
+		"node_modules/protocol-buffers-schema": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+			"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+		},
 		"node_modules/punycode": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -3102,6 +3174,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/resolve-protobuf-schema": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+			"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+			"dependencies": {
+				"protocol-buffers-schema": "^3.3.1"
+			}
+		},
 		"node_modules/reusify": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -3290,6 +3370,12 @@
 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
 			"dev": true
 		},
+		"node_modules/simple-svelte-autocomplete": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/simple-svelte-autocomplete/-/simple-svelte-autocomplete-2.5.1.tgz",
+			"integrity": "sha512-wC0RzbmWhMMAqJ3PK+4sBSAHZl+Y/Qz7KDk1Wp5Fnxj+PJvOXWCIAOi5FLQZGrIMl82YKvFErzEtOCmfNOMUJg==",
+			"dev": true
+		},
 		"node_modules/sirv": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
@@ -3651,6 +3737,19 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/topojson-client": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-2.1.0.tgz",
+			"integrity": "sha512-mxXNa6imbsrWXqUKF7iwGl2TkrshZ7dwQF+KuAB4hX9wTmfecNzqSjMmQZNhP2Ztvfwx8rKt0BfQfHF+ki6hQw==",
+			"dependencies": {
+				"commander": "2"
+			},
+			"bin": {
+				"topo2geo": "bin/topo2geo",
+				"topomerge": "bin/topomerge",
+				"topoquantize": "bin/topoquantize"
+			}
+		},
 		"node_modules/totalist": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz",
@@ -3783,6 +3882,15 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"node_modules/vector-tile": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/vector-tile/-/vector-tile-1.3.0.tgz",
+			"integrity": "sha512-ECpYpDhbgTSGIRwaf4bLbiDHcUHDM+LGrBOmV1tdG+Lde8vajJtywP5vGFmMj0Z3cApTV0+9sLWgBCVsRuoAKQ==",
+			"deprecated": "This module has moved: please install @mapbox/vector-tile instead",
+			"dependencies": {
+				"point-geometry": "0.0.0"
+			}
+		},
 		"node_modules/vite": {
 			"version": "3.1.8",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz",
@@ -3849,6 +3957,11 @@
 			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
 			"dev": true
 		},
+		"node_modules/whatwg-fetch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+			"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
+		},
 		"node_modules/whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -4645,6 +4758,11 @@
 			"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
 			"dev": true
 		},
+		"commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+		},
 		"concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4680,6 +4798,11 @@
 			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 			"dev": true
 		},
+		"currency.js": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/currency.js/-/currency.js-2.0.4.tgz",
+			"integrity": "sha512-6/OplJYgJ0RUlli74d93HJ/OsKVBi8lB1+Z6eJYS1YZzBuIp4qKKHpJ7ad+GvTlWmLR/hLJOWTykN5Nm8NJ7+w=="
+		},
 		"debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -5406,6 +5529,11 @@
 				"debug": "4"
 			}
 		},
+		"ieee754": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+			"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+		},
 		"ignore": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -5547,6 +5675,17 @@
 			"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.2.tgz",
 			"integrity": "sha512-Kc77HQvWO+y9y2oIs3dn5h5sy2kr3j41ewdqCMEUA4N89lgfUUfOBy7wnnHEstDpefiGFObq12FdopGRMx4J7g=="
 		},
+		"leaflet.vectorgrid": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/leaflet.vectorgrid/-/leaflet.vectorgrid-1.3.0.tgz",
+			"integrity": "sha512-kWmj1pKM+MVdo/7Mg5zsB3YrGZvo/uIuiANV9MvWUFOG+Y2xAJzrteDhoIcCgTjHSSRJ36xdeGdIQVhuWjnCZw==",
+			"requires": {
+				"pbf": "^3.0.2",
+				"topojson-client": "^2.1.0",
+				"vector-tile": "^1.3.0",
+				"whatwg-fetch": "^2.0.3"
+			}
+		},
 		"levn": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5866,6 +6005,15 @@
 			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
 			"dev": true
 		},
+		"pbf": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+			"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+			"requires": {
+				"ieee754": "^1.1.12",
+				"resolve-protobuf-schema": "^2.1.0"
+			}
+		},
 		"picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -5884,6 +6032,11 @@
 			"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
 			"dev": true
 		},
+		"point-geometry": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/point-geometry/-/point-geometry-0.0.0.tgz",
+			"integrity": "sha512-tXK8bY2l3/CPkyO7+UbOWbVjCpKoYY4t6uY3AYYy4Bagd4Z942gLeQOgtHICwBwgPf8dI6fw4VqKwzSNgvlw4A=="
+		},
 		"postcss": {
 			"version": "8.4.19",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
@@ -5969,6 +6122,11 @@
 			"dev": true,
 			"requires": {}
 		},
+		"protocol-buffers-schema": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+			"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+		},
 		"punycode": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -6045,6 +6203,14 @@
 			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
 			"dev": true
 		},
+		"resolve-protobuf-schema": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+			"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+			"requires": {
+				"protocol-buffers-schema": "^3.3.1"
+			}
+		},
 		"reusify": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -6175,6 +6341,12 @@
 			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
 			"dev": true
 		},
+		"simple-svelte-autocomplete": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/simple-svelte-autocomplete/-/simple-svelte-autocomplete-2.5.1.tgz",
+			"integrity": "sha512-wC0RzbmWhMMAqJ3PK+4sBSAHZl+Y/Qz7KDk1Wp5Fnxj+PJvOXWCIAOi5FLQZGrIMl82YKvFErzEtOCmfNOMUJg==",
+			"dev": true
+		},
 		"sirv": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
@@ -6413,6 +6585,14 @@
 				"is-number": "^7.0.0"
 			}
 		},
+		"topojson-client": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-2.1.0.tgz",
+			"integrity": "sha512-mxXNa6imbsrWXqUKF7iwGl2TkrshZ7dwQF+KuAB4hX9wTmfecNzqSjMmQZNhP2Ztvfwx8rKt0BfQfHF+ki6hQw==",
+			"requires": {
+				"commander": "2"
+			}
+		},
 		"totalist": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz",
@@ -6503,6 +6683,14 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"vector-tile": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/vector-tile/-/vector-tile-1.3.0.tgz",
+			"integrity": "sha512-ECpYpDhbgTSGIRwaf4bLbiDHcUHDM+LGrBOmV1tdG+Lde8vajJtywP5vGFmMj0Z3cApTV0+9sLWgBCVsRuoAKQ==",
+			"requires": {
+				"point-geometry": "0.0.0"
+			}
+		},
 		"vite": {
 			"version": "3.1.8",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz",
@@ -6543,6 +6731,11 @@
 			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
 			"dev": true
 		},
+		"whatwg-fetch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+			"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
+		},
 		"whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c79dc24..bd27aae 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
 		"postcss": "^8.4.19",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
+		"simple-svelte-autocomplete": "^2.5.1",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-preprocess": "^4.10.7",
@@ -39,5 +40,7 @@
 	"dependencies": {
 		"@googlemaps/polyline-codec": "^1.0.28",
 		"currency.js": "^2.0.4",
+		"leaflet": "^1.9.2",
+		"leaflet.vectorgrid": "^1.3.0"
 	}
 }
diff --git a/frontend/src/lib/ReverseGeocodeLabel.svelte b/frontend/src/lib/ReverseGeocodeLabel.svelte
new file mode 100644
index 0000000..a0061ae
--- /dev/null
+++ b/frontend/src/lib/ReverseGeocodeLabel.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import {reverseGeocode, latLngString, placeToName} from '$lib/utils';
+
+  export let latlng;
+  export let place = null;
+  let label = latLngString(latlng);
+
+  $: (async () => {
+    place = await reverseGeocode(latlng.lat, latlng.lng);
+    label = place ? placeToName(place) : latLngString(latlng);
+  })();
+</script>
+
+<span>{label}</span>
\ No newline at end of file
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index f5ecaa2..93bcec5 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,3 +1,4 @@
+// generate a path-dependent if we have VITE_API_URL defined (dev mode) or not
 export const apiUrl = (path: string) => `${import.meta.env.VITE_API_URL || ''}${path}`;
 export const otpBase = 'https://otp.nat.omg.lol/otp';
 
@@ -62,11 +63,52 @@ export function lightenDarkenColor(col, amt) {
 }
 
 // https://stackoverflow.com/a/11868398
-export function getContrastYIQ(hexcolor){
+export function getContrastYIQ(hexcolor) {
   hexcolor = hexcolor.replace("#", "");
   const r = parseInt(hexcolor.substr(0,2),16);
   const g = parseInt(hexcolor.substr(2,2),16);
   const b = parseInt(hexcolor.substr(4,2),16);
   const yiq = ((r*299)+(g*587)+(b*114))/1000;
   return (yiq >= 128) ? 'black' : 'white';
+}
+
+export function latLngString(latLng) {
+  return latLng.lat.toFixed(5) + ',' + latLng.lng.toFixed(5);
+}
+
+export async function reverseGeocode(lat, lon) {
+  const res = await fetch('https://photon.komoot.io/reverse?'+ new URLSearchParams({
+    lat: lat,
+    lon: lon
+  }));
+  const data = await res.json();
+  return data.features[0];
+}
+
+export function placeToName(place) {
+  const properties = place.properties;
+  return properties.name + (properties.osm_value!='bus_stop'?
+                        (properties.street? ', ' + properties.street : '')
+                        + (properties.city? ', ' + properties.city : '')
+                        + (properties.postcode? ', ' + properties.postcode : '')
+                      : '' )
+}
+
+export async function searchPlaces(query, lat = null, lon = null, zoom = null) {
+  const res = await fetch('https://photon.komoot.io/api/?'+ new URLSearchParams({
+    q: query,
+    bbox: '-7.58,49.96,1.69,58.64', // UK bounding box,
+    ...(lat && lon && {lat: lat, lon: lon}),
+    ...(zoom && {zoom: zoom})
+  }));
+  const data = await res.json();
+  if (data.features.length == 0) {
+    const re = /(-?\d{1,3}(?:\.\d+)?),\s*(-?\d{1,3}(?:\.\d+)?)/;
+    if (re.test(query)) {
+      const match = query.match(re);
+      const reverse = reverseGeocode(match[1], match[2]);
+      return [reverse];
+    }
+  }
+  return data.features;
 }
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 5bfd424..2275ec0 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { fade, fly } from 'svelte/transition'
-  import { otpBase, apiUrl, getLineColour } from '$lib/utils';
+  import { otpBase, apiUrl, getLineColour, latLngString, searchPlaces, placeToName } from '$lib/utils';
   
   import L from 'leaflet?client';
   import 'leaflet/dist/leaflet.css';
@@ -15,6 +15,9 @@
 	import Button from '$lib/Button.svelte';
 	import ItineraryLeg from '$lib/ItineraryLeg.svelte';
 	import Tooltip from '$lib/Tooltip.svelte';
+  import ReverseGeocodeLabel from '$lib/ReverseGeocodeLabel.svelte';
+
+  import AutoComplete from 'simple-svelte-autocomplete';
 
   let map;
   let leaflet;
@@ -30,10 +33,8 @@
 		map.setView(initialView, 10);
 	}
 
-  // generate a path-dependent if we have VITE_API_URL defined (dev mode) or nor
-
-  let from = '53.70346,-2.24653';
-  let to = '53.78967,-2.24336';
+  let from;
+  let to;
   let now = new Date();
   let datePicker;
   let timePicker;
@@ -71,13 +72,12 @@
   const getPlan = async () => {
     tripPlan = undefined;
     tripPlanFares = undefined;
-    tripPlanPlaceholder = 'getting trip plan...';
     gettingPlan = true;
     editSearch = false;
     showItineraryDetail = false;
     const res = await fetch(otpBase+'/routers/default/plan?'+ new URLSearchParams({
-      fromPlace: from,
-      toPlace: to,
+      fromPlace: from.geometry.coordinates[1]+','+from.geometry.coordinates[0],
+      toPlace: to.geometry.coordinates[1]+','+to.geometry.coordinates[0],
       date: date,
       time: time,
       mode: 'TRANSIT,WALK',
@@ -106,7 +106,7 @@
         })
       });
     });
-    
+
     for (const [i, itinerary] of tripPlan.plan.itineraries.entries()) {
       for (const [l, leg] of itinerary.legs.entries()) {
         if (leg.mode === 'BUS') {
@@ -175,24 +175,27 @@
       .setLatLng(mapClickPopupEvent.latlng)
       .setContent(mapClickPopupContent)
       .openOn(map);
-    console.log(mapClickPopupEvent.latlng);      
   }
 
-  const latLngString = (latLng) => {
-    return latLng.lat.toFixed(5) + ',' + latLng.lng.toFixed(5);
-  }
+  let popupPlace;
 
   const setLocation = (location, latlng) => {
     openEditSearch();
     if (location == 'from') {
-      from = latLngString(latlng);
+      from = popupPlace;
     } else if (location == 'to') {
-      to = latLngString(latlng);
+      to = popupPlace;
     }
     if (mapClickPopup) {
       mapClickPopup.remove();
     }
   }
+
+  const searchPlacesBias = async (query) => {
+    let mapCenter = map.getCenter();
+    let mapZoom = map.getZoom();
+    return await searchPlaces(query, mapCenter.lat, mapCenter.lng, mapZoom);
+  }
 </script>
 <svelte:head>
   <title>bus fares.</title>
@@ -227,32 +230,69 @@
             </div>
             <p class="mb-1 mt-4 text-gray-500 text-sm">okay, first, where to?</p>
             <div class="relative">
-              <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <div class="pointer-events-none z-10 absolute inset-y-0 left-0 flex items-center pl-3">
                 <span class="text-gray-500">from</span>
               </div>
-              <input
-                aria-label="Journey to location"
-                type="text"
-                class="
-                  mt-1 px-2 pl-14 py-1 block w-full rounded-md  border-gray-300 shadow-sm
+              <AutoComplete
+                bind:selectedItem={from}
+                searchFunction={searchPlacesBias}
+                cleanUserText={false}
+                delay={200}
+                labelFunction={(place) => {return place.properties.name}}
+                localFiltering={false}
+                localSorting={false}
+                placeholder="enter origin"
+                hideArrow
+                noInputStyles
+                className="w-full mt-1"
+                inputClassName="
+                  px-2 py-1 pl-14 block w-full rounded-md  border-gray-300 shadow-sm
                   focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                 "
-                bind:value={from} name="from" label="from"
-              />
+                dropdownClassName="
+                  mt-1 w-full rounded-md border-indigo-300 shadow-sm
+                  focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+              >
+                <div slot="item" let:item let:label>
+                  <span>
+                    <b>{@html label}</b>
+                    <span class="text-sm">{placeToName(item).replace(item.properties.name, '').replace(', ', '')}</span>
+                  </span>
+                </div>
+              </AutoComplete>
             </div>
+            
             <div class="relative">
-              <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <div class="pointer-events-none z-10 absolute inset-y-0 left-0 flex items-center pl-3">
                 <span class="text-gray-500">to</span>
               </div>
-              <input
-                aria-label="Journey to location"
-                type="text"
-                class="
-                  mt-1 px-2 pl-14 py-1 block w-full rounded-md  border-gray-300 shadow-sm
+              <AutoComplete
+                bind:selectedItem={to}
+                searchFunction={searchPlacesBias}
+                cleanUserText={false}
+                delay={200}
+                labelFunction={(place) => {return place.properties.name}}
+                localFiltering={false}
+                localSorting={false}
+                placeholder="enter destination"
+                hideArrow
+                noInputStyles
+                className="w-full mt-1"
+                inputClassName="
+                  px-2 py-1 pl-14 block w-full rounded-md  border-gray-300 shadow-sm
                   focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                 "
-                bind:value={to} name="to" label="to"
-              />
+                dropdownClassName="
+                  mt-1 w-full rounded-md border-indigo-300 shadow-sm
+                  focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+              >
+                <div slot="item" let:item let:label>
+                  <span>
+                    <b>{@html label}</b>
+                    <span class="text-sm">{placeToName(item).replace(item.properties.name, '').replace(', ', '')}</span>
+                  </span>
+                </div>
+              </AutoComplete>
             </div>
 
             <p class="mb-1 mt-4 text-gray-500 text-sm">great! now, when?</p>
@@ -321,8 +361,8 @@
             <p class="mb-1 mt-4 text-gray-500 text-sm">and, finally...</p>
             <Button wrapClasses="mt-1" on:click={getPlan}>
               <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                  <path fill-rule="evenodd" d="M8.157 2.175a1.5 1.5 0 00-1.147 0l-4.084 1.69A1.5 1.5 0 002 5.251v10.877a1.5 1.5 0 002.074 1.386l3.51-1.453 4.26 1.763a1.5 1.5 0 001.146 0l4.083-1.69A1.5 1.5 0 0018 14.748V3.873a1.5 1.5 0 00-2.073-1.386l-3.51 1.452-4.26-1.763zM7.58 5a.75.75 0 01.75.75v6.5a.75.75 0 01-1.5 0v-6.5A.75.75 0 017.58 5zm5.59 2.75a.75.75 0 00-1.5 0v6.5a.75.75 0 001.5 0v-6.5z" clip-rule="evenodd" />
-                </svg>
+                <path fill-rule="evenodd" d="M8.157 2.175a1.5 1.5 0 00-1.147 0l-4.084 1.69A1.5 1.5 0 002 5.251v10.877a1.5 1.5 0 002.074 1.386l3.51-1.453 4.26 1.763a1.5 1.5 0 001.146 0l4.083-1.69A1.5 1.5 0 0018 14.748V3.873a1.5 1.5 0 00-2.073-1.386l-3.51 1.452-4.26-1.763zM7.58 5a.75.75 0 01.75.75v6.5a.75.75 0 01-1.5 0v-6.5A.75.75 0 017.58 5zm5.59 2.75a.75.75 0 00-1.5 0v6.5a.75.75 0 001.5 0v-6.5z" clip-rule="evenodd" />
+              </svg>
               <span>find journey</span>
             </Button>
             <hr class="my-2">
@@ -332,8 +372,8 @@
             <div>journey from <span class="text-black">{from.properties.name}</span> to <span class="text-black">{to.properties.name}</span>, {arriveBy ? 'arriving by' : 'leaving at'} {date} {time}</div>
             <Button on:click={openEditSearch} wrapClasses="mt-1" classes="text-sm pl-7">
               <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
-                  <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
-                </svg>
+                <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
+              </svg>
               <span>edit</span>
             </Button>
             <hr class="my-2">
@@ -354,22 +394,21 @@
               :{y:25,duration:500,delay:500}
             }">
               {#if tripPlan.plan.itineraries.length > 0}
-                <!-- {#key showItineraryDetail} -->
-                  <div class="grid grid-rows-[1fr] grid-cols-[1fr]">
-                    {#if showItineraryDetail}
-                      <div class="row-[1] col-[1]"
+                <div class="grid grid-rows-[1fr] grid-cols-[1fr]">
+                  {#if showItineraryDetail}
+                    <div class="row-[1] col-[1]"
                       in:fly|local="{{x:100,duration:500, delay:0}}"
                       out:fly|local="{{x:100,duration:500, delay:0}}"
-                      >
+                    >
                       <Button on:click={() => showItineraryDetail = false} classes="text-sm pl-7" wrapClasses="mb-2">
                         <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                           <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
                         </svg>
                         <span>back</span>
                       </Button>
-                        {#each tripPlan.plan.itineraries[currentItinerary].legs as leg, l}
-                          <p>{new Date(leg.startTime).toLocaleString()}: {leg.mode} {leg.mode=='BUS'? '('+leg.routeShortName+' towards '+leg.headsign+')' : ''} from {leg.from.name} to {leg.to.name}</p>
-                          {#if leg.fares}
+                      {#each tripPlan.plan.itineraries[currentItinerary].legs as leg, l}
+                        <p>{new Date(leg.startTime).toLocaleString()}: {leg.mode} {leg.mode=='BUS'? '('+leg.routeShortName+' towards '+leg.headsign+')' : ''} from {leg.from.name} to {leg.to.name}</p>
+                        {#if leg.fares}
                           <div class="relative mt-1">
                             <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2 text-gray-500">
                               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
@@ -394,32 +433,32 @@
                               {/each}
                             </select>
                           </div>
-                          {/if}
+                        {/if}
                         <hr class="my-2">
-                        {/each}
-                      </div>
-                    {:else}
-                      <div class="row-[1] col-[1]"
+                      {/each}
+                    </div>
+                  {:else}
+                    <div class="row-[1] col-[1]"
                       in:fly|local="{{x:-100,duration:500, delay:0}}"
                       out:fly|local="{{x:-100,duration:500, delay:0}}"
-                      >
-                        {#each tripPlan.plan.itineraries as itinerary, i}
-                          <button on:click={() => {
-                            currentItinerary = i;
-                            showItineraryDetail = true;
-                          }}
-                            class="mb-2 w-full"
-                          >
-                            <ItinerarySummary
-                              itinerary={itinerary}
+                    >
+                      {#each tripPlan.plan.itineraries as itinerary, i}
+                        <button on:click={() => {
+                          currentItinerary = i;
+                          showItineraryDetail = true;
+                        }}
+                          class="mb-2 w-full"
+                        >
+                          <ItinerarySummary
+                            itinerary={itinerary}
                             totalFare={totalFares[i]}
-                              on:click={() => currentItinerary = i}
-                            />
-                          </button>
-                          {/each}
-                      </div>
-                    {/if}
-                  </div>
+                            on:click={() => currentItinerary = i}
+                          />
+                        </button>
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
               {:else}
                 <p>sorry, no journeys found</p>
               {/if}
@@ -466,7 +505,9 @@
   <div bind:this={mapClickPopupContent}>
     {#if mapClickPopupEvent}
       <div class="flex flex-col gap-2 font-sans text-sm">
-        <span>{mapClickPopupEvent ? latLngString(mapClickPopupEvent.latlng) : ""}</span>
+        {#if mapClickPopupEvent}
+          <ReverseGeocodeLabel bind:place={popupPlace} latlng={mapClickPopupEvent.latlng} />
+        {/if}
         <div class="flex gap-2">
           <Button on:click={() => setLocation('from', mapClickPopupEvent.latlng)} classes="text-sm">from here</Button>
           <Button on:click={() => setLocation('to', mapClickPopupEvent.latlng)} classes="text-sm">to here</Button>