Skip to content

Commit 97af2f3

Browse files
bors[bot]CaroFG
bors[bot]
and
CaroFG
authored
Merge #587
587: Update geo javascript playground r=bidoubiwa a=CaroFG Replace 20 European cities dataset with 32419 world cities, add sort by population feature. Co-authored-by: CaroFG <[email protected]> Co-authored-by: CaroFG <[email protected]>
2 parents 901c7bd + b3fe2ee commit 97af2f3

File tree

7 files changed

+37
-233
lines changed

7 files changed

+37
-233
lines changed

‎CONTRIBUTING.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,6 @@ yarn playground:html
8080

8181
A playground is available to try out the [GeoSearch](./README.md/-geo-search) in `instant-meilisearch`.
8282

83-
Unfortunately, for the moment, no online dataset is provided. Meaning that to make the playground work, you will have to set up your MeiliSearch accordingly to the playground needs.
84-
85-
To do so follow these steps:
86-
87-
1. Run a MeiliSeaerch instance. See [Setup](#setup) section to launch MeiliSearch with `Docker`. It is important to use the same `host` and `apikey` as provided in the `setup` section.
88-
2. Add the settings and the documents to your running MeiliSearch instance. We provide a script that does this automatically. Please run `node playgrounds/geo-javascript/setup/index.js`. Or you can look at the script to take inspiration!
89-
4. Run the playground!
90-
9183
```bash
9284
yarn playground:geo-javascript
9385
```

‎playgrounds/geo-javascript/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Javascript GeoSearch Playground
22

3-
To run this playground you will first have to set up your MeiliSearch accordingly to the playground needs. To do so please follow the steps in our [contributing guide](./CONTRIBUTING.md#-geo-search-playground).
3+
The provided Google Maps API Key is limited to 300 requests per day, so it might be down sometimes. In which case, please create a new [Google API Key](https://developers.google.com/maps/documentation/javascript/get-api-key) and add it in the `.env` file at the root of the playground: `/playgrounds/geo-javascript`.
44

5-
The provided Google Maps Api Key is limited at 300 requests per day, so it might be down sometimes. In which case, please create a new [Google Api Key](https://developers.google.com/maps/documentation/javascript/get-api-key) and add it in the `.env` file at the root of the playground: `/playgrounds/geo-javascript`
5+
The same dataset is [downloadable here](https://github.com/meilisearch/datasets/tree/main/datasets/world_cities) if you want to try it out on your own MeiliSearch.
66

77
## Project setup
88

‎playgrounds/geo-javascript/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,15 @@
1616
<body>
1717
<div class="ais-InstantSearch">
1818
<h1>MeiliSearch + InstantSearch.js</h1>
19-
<h2>Search in European cities </h2>
19+
<h2>Search in world cities </h2>
2020
<p>
21-
This is a small dataset of 20 european cities around Lille in France.
21+
This is a dataset of 32419 world cities with more than 10000 inhabitants.
2222
</p>
2323

24+
<div class="left-panel">
25+
<div id="sort-by"></div>
26+
</div>
27+
2428
<div class="right-panel">
2529
<div id="searchbox" class="ais-SearchBox"></div>
2630
<div id="maps" style="height: 500px; width: 500px"></div>

‎playgrounds/geo-javascript/setup/countries.json‎

Lines changed: 0 additions & 162 deletions
This file was deleted.

‎playgrounds/geo-javascript/setup/index.js‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎playgrounds/geo-javascript/setup/settings.json‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎playgrounds/geo-javascript/src/app.js‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,31 @@ injectScript(
77
`https://maps.googleapis.com/maps/api/js?v=quarterly&key=${GOOGLE_API}`,
88
() => {
99
const search = instantsearch({
10-
indexName: 'countries_playground',
11-
searchClient: instantMeiliSearch('http://localhost:7700', 'masterKey', {
12-
limitPerRequest: 200,
13-
}),
14-
initialUiState: {
15-
countries_playground: {
16-
geoSearch: {
17-
boundingBox:
18-
'51.21699878945007, 4.867560211665137,50.433157541783224, 3.938237196122078',
19-
},
20-
},
21-
},
10+
indexName: 'world_cities',
11+
searchClient: instantMeiliSearch(
12+
'https://demos.meilisearch.com',
13+
'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25',
14+
{
15+
limitPerRequest: 200,
16+
}
17+
),
2218
})
2319

2420
search.addWidgets([
21+
instantsearch.widgets.sortBy({
22+
container: '#sort-by',
23+
items: [
24+
{ value: 'world_cities', label: 'Relevant' },
25+
{
26+
value: 'world_cities:population:desc',
27+
label: 'Most Populated',
28+
},
29+
{
30+
value: 'world_cities:population:asc',
31+
label: 'Least Populated',
32+
},
33+
],
34+
}),
2535
instantsearch.widgets.searchBox({
2636
container: '#searchbox',
2737
}),
@@ -43,7 +53,13 @@ injectScript(
4353
item: `
4454
<div>
4555
<div class="hit-name">
46-
{{#helpers.highlight}}{ "attribute": "city" }{{/helpers.highlight}}
56+
City: {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
57+
</div>
58+
<div class="hit-name">
59+
Country: {{#helpers.highlight}}{ "attribute": "country" }{{/helpers.highlight}}
60+
</div>
61+
<div class="hit-name">
62+
Population: {{#helpers.highlight}}{ "attribute": "population" }{{/helpers.highlight}}
4763
</div>
4864
</div>
4965
`,

0 commit comments

Comments
 (0)