Skip to content

Commit da808b4

Browse files
bidoubiwabidoubiwa
committed
Add geosearch
1 parent ce03bcd commit da808b4

File tree

8 files changed

+175
-77
lines changed

8 files changed

+175
-77
lines changed

‎playgrounds/javascript/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ <h2>Misc</h2>
4242

4343
<div class="right-panel">
4444
<div id="searchbox" class="ais-SearchBox"></div>
45+
<div id="maps" style="height: 500px; width: 500px"></div>
4546
<div id="hits"></div>
4647
<div id="pagination"></div>
4748
</div>

‎playgrounds/javascript/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,7 @@
2222
"last 3 safari versions"
2323
],
2424
"license": "MIT",
25-
"dependencies": {}
25+
"dependencies": {
26+
"scriptjs": "^2.5.9"
27+
}
2628
}

‎playgrounds/javascript/src/app.js‎

Lines changed: 107 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,112 @@
11
import { instantMeiliSearch } from '../../../src/index'
2+
import injectScript from 'scriptjs'
23

3-
const search = instantsearch({
4-
indexName: 'steam-video-games',
5-
searchClient: instantMeiliSearch(
6-
'https://demo-steam.meilisearch.com',
7-
'90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
8-
{
9-
limitPerRequest: 30,
10-
}
11-
),
12-
})
13-
14-
search.addWidgets([
15-
instantsearch.widgets.sortBy({
16-
container: '#sort-by',
17-
items: [
18-
{ value: 'steam-video-games', label: 'Relevant' },
19-
{
20-
value: 'steam-video-games:recommendationCount:desc',
21-
label: 'Most Recommended',
4+
injectScript(
5+
'https://maps.googleapis.com/maps/api/js?v=quarterly&key=AIzaSyBNrL9pJHScT2Xma6OdhyVZLBGO9v7JcAA',
6+
() => {
7+
const search = instantsearch({
8+
indexName: 'steam-video-games',
9+
searchClient: instantMeiliSearch(
10+
'https://demo-steam.meilisearch.com',
11+
'90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
12+
{
13+
limitPerRequest: 30,
14+
}
15+
),
16+
searchFunction: function (helper) {
17+
console.log(JSON.stringify())
18+
helper.setQueryParameter('aroundRadius', 75000)
19+
helper.setQueryParameter('aroundLatLngViaIP', true)
20+
// helper.setQueryParameter('aroundRadius', somevalue);
21+
helper.search()
2222
},
23-
{
24-
value: 'steam-video-games:recommendationCount:asc',
25-
label: 'Least Recommended',
23+
urlSync: {
24+
trackedParameters: [
25+
'attribute:*',
26+
'query',
27+
'page',
28+
'hitsPerPage',
29+
'aroundLatLngViaIP',
30+
'aroundRadius',
31+
],
2632
},
27-
],
28-
}),
29-
instantsearch.widgets.searchBox({
30-
container: '#searchbox',
31-
}),
32-
instantsearch.widgets.clearRefinements({
33-
container: '#clear-refinements',
34-
}),
35-
instantsearch.widgets.refinementList({
36-
container: '#genres-list',
37-
attribute: 'genres',
38-
}),
39-
instantsearch.widgets.refinementList({
40-
container: '#players-list',
41-
attribute: 'players',
42-
}),
43-
instantsearch.widgets.refinementList({
44-
container: '#platforms-list',
45-
attribute: 'platforms',
46-
}),
47-
instantsearch.widgets.configure({
48-
hitsPerPage: 6,
49-
attributesToSnippet: ['description:150'],
50-
}),
51-
instantsearch.widgets.refinementList({
52-
container: '#misc-list',
53-
attribute: 'misc',
54-
}),
55-
instantsearch.widgets.hits({
56-
container: '#hits',
57-
templates: {
58-
item: `
59-
<div>
60-
<div class="hit-name">
61-
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
62-
</div>
63-
<img src="{{image}}" align="left" />
64-
<div class="hit-name">
65-
{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
66-
</div>
67-
<div class="hit-info">price: {{price}}</div>
68-
<div class="hit-info">release date: {{releaseDate}}</div>
69-
<div class="hit-info">Recommendation: {{recommendationCount}}</div>
70-
</div>
71-
`,
72-
},
73-
}),
74-
instantsearch.widgets.pagination({
75-
container: '#pagination',
76-
}),
77-
])
33+
})
34+
35+
search.addWidgets([
36+
instantsearch.widgets.sortBy({
37+
container: '#sort-by',
38+
items: [
39+
{ value: 'steam-video-games', label: 'Relevant' },
40+
{
41+
value: 'steam-video-games:recommendationCount:desc',
42+
label: 'Most Recommended',
43+
},
44+
{
45+
value: 'steam-video-games:recommendationCount:asc',
46+
label: 'Least Recommended',
47+
},
48+
],
49+
}),
50+
instantsearch.widgets.searchBox({
51+
container: '#searchbox',
52+
}),
53+
instantsearch.widgets.clearRefinements({
54+
container: '#clear-refinements',
55+
}),
56+
instantsearch.widgets.refinementList({
57+
container: '#genres-list',
58+
attribute: 'genres',
59+
}),
60+
instantsearch.widgets.refinementList({
61+
container: '#players-list',
62+
attribute: 'players',
63+
}),
64+
instantsearch.widgets.refinementList({
65+
container: '#platforms-list',
66+
attribute: 'platforms',
67+
}),
68+
instantsearch.widgets.configure({
69+
hitsPerPage: 6,
70+
attributesToSnippet: ['description:150'],
71+
}),
72+
instantsearch.widgets.refinementList({
73+
container: '#misc-list',
74+
attribute: 'misc',
75+
}),
76+
instantsearch.widgets.geoSearch({
77+
container: '#maps',
78+
googleReference: window.google,
79+
enableRefineControl: true,
80+
enableRefineOnMapMove: false,
81+
initialPosition: {
82+
lat: 45.7597786530353,
83+
lng: 4.843585698860502,
84+
},
85+
}),
86+
instantsearch.widgets.hits({
87+
container: '#hits',
88+
templates: {
89+
item: `
90+
<div>
91+
<div class="hit-name">
92+
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
93+
</div>
94+
<img src="{{image}}" align="left" />
95+
<div class="hit-name">
96+
{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
97+
</div>
98+
<div class="hit-info">price: {{price}}</div>
99+
<div class="hit-info">release date: {{releaseDate}}</div>
100+
<div class="hit-info">Recommendation: {{recommendationCount}}</div>
101+
</div>
102+
`,
103+
},
104+
}),
105+
instantsearch.widgets.pagination({
106+
container: '#pagination',
107+
}),
108+
])
78109

79-
search.start()
110+
search.start()
111+
}
112+
)

‎playgrounds/javascript/yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4432,6 +4432,11 @@ saxes@^3.1.9:
44324432
dependencies:
44334433
xmlchars "^2.1.1"
44344434

4435+
scriptjs@^2.5.9:
4436+
version "2.5.9"
4437+
resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
4438+
integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
4439+
44354440
[email protected]:
44364441
version "7.0.0"
44374442
resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"

‎playgrounds/react/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"instantsearch.css": "^7.4.5",
2121
"react": "^17.0.1",
2222
"react-dom": "^17.0.1",
23-
"react-instantsearch-dom": "^6.11.0"
23+
"react-instantsearch-dom": "^6.11.0",
24+
"react-instantsearch-dom-maps": "^6.12.1"
2425
},
2526
"devDependencies": {
2627
"@babel/core": "^7.13.1",

‎playgrounds/react/src/App.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ import {
1212
SortBy,
1313
Snippet,
1414
} from 'react-instantsearch-dom'
15+
import {
16+
GoogleMapsLoader,
17+
GeoSearch,
18+
Control,
19+
Marker,
20+
} from 'react-instantsearch-dom-maps'
1521

1622
import './App.css'
1723
import { instantMeiliSearch } from '../../../src/index'
@@ -38,6 +44,22 @@ const App = () => (
3844
This is not the official Steam dataset but only for demo purpose. Enjoy
3945
searching with MeiliSearch!
4046
</p>
47+
<div style={{ height: 500 }}>
48+
<GoogleMapsLoader apiKey="AIzaSyBNrL9pJHScT2Xma6OdhyVZLBGO9v7JcAA">
49+
{(google) => (
50+
<GeoSearch google={google}>
51+
{({ hits }) => (
52+
<div>
53+
<Control />
54+
{hits.map((hit) => (
55+
<Marker key={hit.objectID} hit={hit} />
56+
))}
57+
</div>
58+
)}
59+
</GeoSearch>
60+
)}
61+
</GoogleMapsLoader>
62+
</div>
4163
<InstantSearch indexName="steam-video-games" searchClient={searchClient}>
4264
<Stats />
4365
<div className="left-panel">

‎playgrounds/react/yarn.lock‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4283,6 +4283,15 @@ react-instantsearch-core@^6.11.0:
42834283
prop-types "^15.6.2"
42844284
react-fast-compare "^3.0.0"
42854285

4286+
react-instantsearch-dom-maps@^6.12.1:
4287+
version "6.12.1"
4288+
resolved "https://registry.yarnpkg.com/react-instantsearch-dom-maps/-/react-instantsearch-dom-maps-6.12.1.tgz#01e551674a11dbc3b6b06b0d8eda3803be47871e"
4289+
integrity sha512-Sl50ETCNo6khUsLNMZLKBrMFS+kAMV06d1QzKt/GMQYCh4M5bGkO3l37/LRHNzBqh1ZxgbnwiF5BH6MiR5wGUg==
4290+
dependencies:
4291+
"@babel/runtime" "^7.1.2"
4292+
prop-types "^15.6.2"
4293+
scriptjs "^2.5.8"
4294+
42864295
react-instantsearch-dom@^6.11.0:
42874296
version "6.11.0"
42884297
resolved "https://registry.yarnpkg.com/react-instantsearch-dom/-/react-instantsearch-dom-6.11.0.tgz#8e319e7a2fab98051978c9ba3b2eb25747bdd354"
@@ -4560,6 +4569,11 @@ scheduler@^0.20.1:
45604569
loose-envify "^1.1.0"
45614570
object-assign "^4.1.1"
45624571

4572+
scriptjs@^2.5.8:
4573+
version "2.5.9"
4574+
resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
4575+
integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
4576+
45634577
[email protected]:
45644578
version "7.0.0"
45654579
resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"

‎src/client/index.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ export function instantMeiliSearch(
1212
MeiliSearchClient: new MeiliSearch({ host: hostUrl, apiKey: apiKey }),
1313
search: async function (instantSearchRequests) {
1414
try {
15+
console.log(JSON.stringify(instantSearchRequests, null, 2))
1516
const isSearchRequest = instantSearchRequests[0]
1617
const { params: instantSearchParams, indexName } = isSearchRequest
17-
1818
// Split index name and possible sorting rules
1919
const [indexUid, ...sortByArray] = indexName.split(':')
2020

@@ -38,6 +38,17 @@ export function instantMeiliSearch(
3838
)
3939
const cachedFacet = cacheFilters(msSearchParams.filter)
4040

41+
// When recieving aroundLatLngViaIP, but no insideBoundingBox, create _geo arround user's IP
42+
// If no access to users's IP use go to default
43+
// We need a default starting position
44+
// We need to determine the aroundRadius by default
45+
46+
// When recieving insideBoundingBox, calculate center of diagonal of points recieved. This is the center position arround which the radius is applied
47+
// ex "_geoRadius(lat, long, ..)"
48+
49+
// When reciving insideBoundingBox calculate height between longs or lats and take biggest number
50+
// ex "_geoRadius(lat, long, biggest number)"
51+
4152
// Executes the search with MeiliSearch
4253
const searchResponse = await client
4354
.index(indexUid)
@@ -49,6 +60,15 @@ export function instantMeiliSearch(
4960
searchResponse.facetsDistribution
5061
)
5162

63+
searchResponse.hits[0]._geoloc = {
64+
lat: 45.7597786530353,
65+
lng: 4.843585698860502,
66+
}
67+
68+
// searchResponse.hits[0]._geoloc = {
69+
// lat: 45.7597786530353,
70+
// lng: 4.843585698860502,
71+
// }
5272
// Parses the MeiliSearch response and returns it for InstantSearch
5373
const ISresponse = adaptToISResponse(
5474
indexUid,

0 commit comments

Comments
 (0)