diff --git a/src/components/EditableLabel.vue b/src/components/EditableLabel.vue
index c3b4260..81144ed 100644
--- a/src/components/EditableLabel.vue
+++ b/src/components/EditableLabel.vue
@@ -62,7 +62,14 @@ export default {
left: 0;
width: 100%;
padding: 8px;
+ border: none;
+ flex: 1;
+ height: 100%;
+ font-size: 16px;
+ &:focus {
+ outline: none;
+ }
}
}
-
-
\ No newline at end of file
+
+
diff --git a/src/components/FindPlace.vue b/src/components/FindPlace.vue
index 3caa947..dfd5485 100644
--- a/src/components/FindPlace.vue
+++ b/src/components/FindPlace.vue
@@ -4,9 +4,29 @@
This website renders every single road within a city
-
Note: Large cities may require 200MB+ of data transfer and may need a powerful device to render.
@@ -19,7 +39,7 @@
-
-
{{suggestion.name}} ({{suggestion.type}})
@@ -78,10 +98,13 @@ export default {
},
data () {
const enteredInput = appState.get('q') || '';
+ const query = appState.get('t') || '';
let hasValidArea = restoreStateFromQueryString();
return {
enteredInput,
+ query,
+ Query,
loading: null,
lastCancel: null,
suggestionsLoaded: false,
@@ -91,7 +114,7 @@ export default {
hideInput: false,
noRoads: false,
clicked: false,
- showWarning: hasValidArea,
+ showWarning: hasValidArea,
mainActionText: hasValidArea ? 'Download Area' : FIND_TEXT,
suggestions: []
}
@@ -115,19 +138,20 @@ export default {
methods: {
onSubmit() {
queryState.set('q', this.enteredInput);
+ queryState.set('t', this.query);
this.cancelRequest()
this.suggestions = [];
this.noRoads = false;
this.error = false;
this.showWarning = false;
- const restoredState = restoreStateFromQueryString(this.enteredInput);
+ const restoredState = restoreStateFromQueryString(this.enteredInput)
if (restoredState) {
- this.pickSuggestion(restoredState);
+ this.pickSuggestion(restoredState, this.query);
return;
}
- const query = encodeURIComponent(this.enteredInput);
+ const osmQuery = encodeURIComponent(this.enteredInput);
this.loading = 'Searching cities that match your query...'
findBoundaryByName(this.enteredInput)
.then(suggestions => {
@@ -143,7 +167,7 @@ export default {
}, 50)
} else {
this.suggestionsLoaded = true;
- this.suggestions = suggestions;
+ this.suggestions = suggestions;
}
});
},
@@ -176,24 +200,27 @@ export default {
retry() {
if (this.lastSuggestion) {
- this.pickSuggestion(this.lastSuggestion);
+ this.pickSuggestion(this.lastSuggestion, this.lastQuery);
}
},
- pickSuggestion(suggestion) {
+ pickSuggestion(suggestion, query) {
+ queryState.set('q', this.enteredInput);
+ queryState.set('t', this.query);
this.lastSuggestion = suggestion;
+ this.lastQuery = query;
this.error = false;
if (appState.isCacheEnabled() && suggestion.areaId) {
- this.checkCache(suggestion)
+ this.checkCache(suggestion, query)
.catch(error => {
if (error.cancelled) return; // no need to do anything. They've cancelled
// No Cache - fallback
- return this.useOSM(suggestion);
+ return this.useOSM(suggestion, query);
});
} else {
// we don't have cache for nodes yet.
- this.useOSM(suggestion);
+ this.useOSM(suggestion, query);
}
},
@@ -205,9 +232,12 @@ export default {
}, 10000);
},
- checkCache(suggestion) {
+ checkCache(suggestion, query) {
this.loading = 'Checking cache...'
let areaId = suggestion.areaId;
+ if(query !== Query.Road) {
+ return Promise.reject({message: 'No cache-hit for non Road queries.'})
+ }
return request(config.areaServer + '/' + areaId + '.pbf', {
progress: this.generateNewProgressToken(),
@@ -225,13 +255,13 @@ export default {
});
},
- useOSM(suggestion) {
+ useOSM(suggestion, query) {
this.loading = 'Connecting to OpenStreetMap...'
-
- // it may take a while to load data.
+
+ // it may take a while to load data.
this.restartLoadingMonitor();
Query.runFromOptions(new LoadOptions({
- wayFilter: Query.Road,
+ wayFilter: query,
areaId: suggestion.areaId,
bbox: suggestion.bbox
}), this.generateNewProgressToken())
@@ -347,7 +377,7 @@ h3.site-header {
text-align: center;
}
-input {
+.query-input {
border: none;
flex: 1;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -359,7 +389,9 @@ input {
outline: none;
}
}
-
+.row {
+ height: 40px;
+}
.search-box {
position: relative;
background-color: emphasis-background;
@@ -367,8 +399,7 @@ input {
padding: 0 0 0 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
- height: 48px;
- display: flex;
+ height: 96px;
font-size: 16px;
cursor: text;
a {
@@ -379,6 +410,10 @@ input {
align-items: center;
flex-shrink: 0;
}
+ label {
+ align-items: center;
+ display:flex;
+ }
}
.prompt {