Skip to content

Commit

Permalink
SearchBox: render relations in overpass search (#213)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zbycz
zbycz authored Dec 3, 2023
1 parent cecbf65 commit 6fa9080
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 167 deletions.
32 changes: 24 additions & 8 deletions src/components/Map/styles/layers/overpassLayers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const overpassLayers: LayerSpecification[] = [
'line-color': '#f8f4f0',
'line-width': 6,
},
},
} as LayerSpecification,
{
id: 'overpass-line',
type: 'line',
Expand All @@ -24,7 +24,7 @@ export const overpassLayers: LayerSpecification[] = [
1,
],
},
},
} as LayerSpecification,
{
id: 'overpass-line-text',
type: 'symbol',
Expand All @@ -47,7 +47,7 @@ export const overpassLayers: LayerSpecification[] = [
1,
],
},
},
} as LayerSpecification,
{
id: 'overpass-fill',
type: 'fill',
Expand All @@ -62,12 +62,12 @@ export const overpassLayers: LayerSpecification[] = [
0.5,
],
},
},
} as LayerSpecification,
{
id: 'overpass-circle',
type: 'circle',
source: 'overpass',
filter: ['all', ['==', '$type', 'Point']],
filter: ['all', ['==', '$type', 'Point'], ['!=', 'osmappType', 'relation']],
paint: {
'circle-color': 'rgba(255,255,255,0.9)',
'circle-radius': 12,
Expand All @@ -80,12 +80,28 @@ export const overpassLayers: LayerSpecification[] = [
1,
],
},
},
} as LayerSpecification,
{
id: 'overpass-circle-relation',
type: 'circle',
source: 'overpass',
filter: ['all', ['==', '$type', 'Point'], ['==', 'osmappType', 'relation']],
paint: {
'circle-color': 'rgba(255,0,0,0.7)',
'circle-radius': 5,
'circle-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
0.5,
1,
],
},
} as LayerSpecification,
{
id: 'overpass-symbol',
type: 'symbol',
source: 'overpass',
filter: ['all', ['==', '$type', 'Point']],
filter: ['all', ['==', '$type', 'Point'], ['!=', 'osmappType', 'relation']],
layout: {
'text-padding': 2,
'text-font': ['Noto Sans Regular'],
Expand Down Expand Up @@ -116,5 +132,5 @@ export const overpassLayers: LayerSpecification[] = [
1,
],
},
},
} as LayerSpecification,
];
12 changes: 8 additions & 4 deletions src/components/SearchBox/SearchBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ fetchSchemaTranslations().then(() => {
presetsForSearch = Object.values(presets)
.filter(({ searchable }) => searchable === undefined || searchable)
.filter(({ locationSet }) => !locationSet?.include)
.filter(({ tags }) => Object.keys(tags).length > 0)
.map(({ name, presetKey, tags, terms }) => {
const tagsAsStrings = Object.entries(tags).map(([k, v]) => `${k}=${v}`);
return {
Expand Down Expand Up @@ -120,7 +121,7 @@ const findInPresets = (inputValue) => {
.filter((result) => result.name === 0 && result.sum > 0)
.map((result) => ({ preset: result }));

// // experiment with sorting by number of matches
// // experiment with sorting by number of matches // TODO search in all words
// const options = results
// .filter((result) => result.sum > 0)
// .sort((a, b) => {
Expand Down Expand Up @@ -169,11 +170,13 @@ const fetchOptions = debounce(

const useFetchOptions = (inputValue: string, setOptions) => {
const { view } = useMapStateContext();

useEffect(() => {
if (inputValue === '') {
setOptions([]);
return;
}

if (inputValue.length > 2) {
const overpassQuery = getOverpassQuery(inputValue);
const { nameMatches, rest } = findInPresets(inputValue);
Expand All @@ -184,10 +187,11 @@ const useFetchOptions = (inputValue: string, setOptions) => {
]);
const before = [...overpassQuery, ...nameMatches];
fetchOptions(inputValue, view, setOptions, before, rest);
} else {
setOptions([{ loader: true }]);
fetchOptions(inputValue, view, setOptions);
return;
}

setOptions([{ loader: true }]);
fetchOptions(inputValue, view, setOptions);
}, [inputValue]);
};

Expand Down
202 changes: 106 additions & 96 deletions src/services/__tests__/overpassSearch.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { osmJsonToSkeletons } from '../overpassSearch';
import { overpassGeomToGeojson } from '../overpassSearch';

/*
[out:json][timeout:25];
Expand All @@ -19,6 +19,36 @@ const response = {
'The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.',
},
elements: [
{
type: 'node',
id: 761541677,
lat: 49.9594996,
lon: 14.3231551,
tags: {
highway: 'crossing',
crossing: 'marked',
},
},
{
type: 'way',
id: 11005021,
bounds: {
minlat: 49.9414065,
minlon: 14.2801555,
maxlat: 49.944281,
maxlon: 14.2929424,
},
nodes: [73359754, 9441919612, 97951778],
geometry: [
{ lat: 49.9414065, lon: 14.2929424 },
{ lat: 49.942755, lon: 14.2892883 },
{ lat: 49.944281, lon: 14.2801555 },
],
tags: {
highway: 'track',
tracktype: 'grade3',
},
},
{
type: 'relation',
id: 8337908,
Expand All @@ -36,30 +66,6 @@ const response = {
lat: 49.9511921,
lon: 14.3409309,
},
{
type: 'node',
ref: 4303193147,
role: 'platform',
lat: 49.9560895,
lon: 14.3420546,
},
{
type: 'node',
ref: 5650107055,
role: 'platform',
lat: 49.95976,
lon: 14.35261,
},
{
type: 'way',
ref: 143079042,
role: '',
geometry: [
{ lat: 49.9510996, lon: 14.3406283 },
{ lat: 49.9512392, lon: 14.340966 },
{ lat: 49.9512882, lon: 14.3409961 },
],
},
{
type: 'way',
ref: 431070311,
Expand All @@ -72,75 +78,9 @@ const response = {
],
},
{
type: 'way',
ref: 143079039,
role: '',
geometry: [
{ lat: 49.9512723, lon: 14.3405453 },
{ lat: 49.9512769, lon: 14.3403348 },
{ lat: 49.9512638, lon: 14.3402265 },
{ lat: 49.9512376, lon: 14.3399046 },
{ lat: 49.9512538, lon: 14.3397224 },
{ lat: 49.9513307, lon: 14.3396011 },
{ lat: 49.9514674, lon: 14.339525 },
{ lat: 49.9516502, lon: 14.3394962 },
{ lat: 49.9519514, lon: 14.3395323 },
{ lat: 49.9524812, lon: 14.3397353 },
{ lat: 49.9528361, lon: 14.3398737 },
{ lat: 49.9529293, lon: 14.3399175 },
{ lat: 49.9533275, lon: 14.3401047 },
{ lat: 49.9536045, lon: 14.3402959 },
{ lat: 49.9543101, lon: 14.340794 },
{ lat: 49.9555376, lon: 14.3415765 },
{ lat: 49.9564591, lon: 14.3422582 },
{ lat: 49.9569866, lon: 14.3425944 },
{ lat: 49.9574162, lon: 14.3429583 },
{ lat: 49.9576284, lon: 14.3431366 },
{ lat: 49.9578467, lon: 14.3434496 },
{ lat: 49.9582484, lon: 14.3441399 },
{ lat: 49.9588316, lon: 14.3454072 },
{ lat: 49.9589787, lon: 14.3459137 },
{ lat: 49.9590815, lon: 14.3465416 },
],
},
{
type: 'way',
ref: 538959927,
role: '',
geometry: [
{ lat: 49.9590815, lon: 14.3465416 },
{ lat: 49.9596598, lon: 14.3496964 },
{ lat: 49.9598834, lon: 14.3509159 },
{ lat: 49.959959, lon: 14.3513285 },
{ lat: 49.9600528, lon: 14.3518402 },
{ lat: 49.9600898, lon: 14.3520419 },
{ lat: 49.9602015, lon: 14.3522125 },
],
},
{
type: 'way',
ref: 311389592,
role: '',
geometry: [
{ lat: 49.9598062, lon: 14.3530042 },
{ lat: 49.9598857, lon: 14.3529381 },
{ lat: 49.9599703, lon: 14.3528484 },
{ lat: 49.9600301, lon: 14.3527557 },
{ lat: 49.9600872, lon: 14.3526668 },
{ lat: 49.9601506, lon: 14.3525137 },
{ lat: 49.9602015, lon: 14.3522125 },
],
},
{
type: 'way',
ref: 166349501,
role: '',
geometry: [
{ lat: 49.9598062, lon: 14.3530042 },
{ lat: 49.9597388, lon: 14.3526991 },
{ lat: 49.9596846, lon: 14.3526796 },
{ lat: 49.9595677, lon: 14.3527257 },
],
type: 'relation',
ref: 388266,
role: 'subarea',
},
],
tags: {
Expand All @@ -160,11 +100,80 @@ const response = {
],
};

const skeletons = [
const geojson = [
{
center: [14.3231551, 49.9594996],
geometry: {
coordinates: [14.3231551, 49.9594996],
type: 'Point',
},
id: 7615416770,
osmMeta: {
id: 761541677,
type: 'node',
},
properties: {
class: 'information',
crossing: 'marked',
highway: 'crossing',
osmappType: 'node',
subclass: 'crossing',
},
tags: {
crossing: 'marked',
highway: 'crossing',
},
type: 'Feature',
},
{
center: [14.28654895, 49.942843749999994],
geometry: {
coordinates: [
[14.2929424, 49.9414065],
[14.2892883, 49.942755],
[14.2801555, 49.944281],
],
type: 'LineString',
},
id: 110050211,
osmMeta: {
id: 11005021,
type: 'way',
},
properties: {
class: 'information',
highway: 'track',
osmappType: 'way',
subclass: 'track',
tracktype: 'grade3',
},
tags: {
highway: 'track',
tracktype: 'grade3',
},
type: 'Feature',
},
{
center: [14.3407707, 49.95124845],
geometry: {
geometries: [
{
coordinates: [14.3409309, 49.9511921],
type: 'Point',
},
{
coordinates: [
[14.3409961, 49.9512882],
[14.3408764, 49.9513048],
[14.3406756, 49.9512958],
[14.3405453, 49.9512723],
],
type: 'LineString',
},
],
type: 'GeometryCollection',
},
id: 83379084,
osmMeta: {
id: 8337908,
type: 'relation',
Expand All @@ -175,6 +184,7 @@ const skeletons = [
name: '243: Kazín ⇒ Lipence',
network: 'PID',
operator: 'cz:DPP',
osmappType: 'relation',
'public_transport:version': '2',
ref: '243',
route: 'bus',
Expand Down Expand Up @@ -202,5 +212,5 @@ const skeletons = [
];

test('conversion', () => {
expect(osmJsonToSkeletons(response)).toEqual(skeletons);
expect(overpassGeomToGeojson(response)).toEqual(geojson);
});
Loading

1 comment on commit 6fa9080

@vercel
Copy link

@vercel vercel bot commented on 6fa9080 Dec 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

osmapp – ./

osmapp-zbycz.vercel.app
osmapp-git-master-zbycz.vercel.app
osmapp.vercel.app
osmapp.org

Please sign in to comment.