meilisearch · bors · Nov 11, 2021 · Nov 2, 2021 · Nov 2, 2021 · Nov 2, 2021
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -80,14 +80,6 @@ yarn playground:html
 
 A playground is available to try out the [GeoSearch](./README.md/-geo-search) in `instant-meilisearch`.
 
-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.
-
-To do so follow these steps:
-
-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.
-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!
-4. Run the playground!
-
 ```bash
 yarn playground:geo-javascript
 ```

diff --git a/playgrounds/geo-javascript/README.md b/playgrounds/geo-javascript/README.md
@@ -1,8 +1,8 @@
 # Javascript GeoSearch Playground
 
-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).
+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`.
 
-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`
+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.
 
 ## Project setup
 

diff --git a/playgrounds/geo-javascript/index.html b/playgrounds/geo-javascript/index.html
@@ -16,11 +16,15 @@
 <body>
   <div class="ais-InstantSearch">
     <h1>MeiliSearch + InstantSearch.js</h1>
-    <h2>Search in European cities </h2>
+    <h2>Search in world cities </h2>
     <p>
-      This is a small dataset of 20 european cities around Lille in France.
+      This is a dataset of 32419 world cities with more than 10000 inhabitants.
     </p>
 
+    <div class="left-panel">
+      <div id="sort-by"></div>
+    </div>
+
     <div class="right-panel">
       <div id="searchbox" class="ais-SearchBox"></div>
       <div id="maps" style="height: 500px; width: 500px"></div>

diff --git a/playgrounds/geo-javascript/setup/countries.json b/playgrounds/geo-javascript/setup/countries.json
diff --git a/playgrounds/geo-javascript/setup/index.js b/playgrounds/geo-javascript/setup/index.js
diff --git a/playgrounds/geo-javascript/setup/settings.json b/playgrounds/geo-javascript/setup/settings.json
diff --git a/playgrounds/geo-javascript/src/app.js b/playgrounds/geo-javascript/src/app.js
@@ -7,21 +7,31 @@ injectScript(
   `https://maps.googleapis.com/maps/api/js?v=quarterly&key=${GOOGLE_API}`,
   () => {
     const search = instantsearch({
-      indexName: 'countries_playground',
-      searchClient: instantMeiliSearch('http://localhost:7700', 'masterKey', {
-        limitPerRequest: 200,
-      }),
-      initialUiState: {
-        countries_playground: {
-          geoSearch: {
-            boundingBox:
-              '51.21699878945007, 4.867560211665137,50.433157541783224, 3.938237196122078',
-          },
-        },
-      },
+      indexName: 'world_cities',
+      searchClient: instantMeiliSearch(
+        'https://demos.meilisearch.com',
+        'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25',
+        {
+          limitPerRequest: 200,
+        }
+      ),
     })
 
     search.addWidgets([
+      instantsearch.widgets.sortBy({
+        container: '#sort-by',
+        items: [
+          { value: 'world_cities', label: 'Relevant' },
+          {
+            value: 'world_cities:population:desc',
+            label: 'Most Populated',
+          },
+          {
+            value: 'world_cities:population:asc',
+            label: 'Least Populated',
+          },
+        ],
+      }),
       instantsearch.widgets.searchBox({
         container: '#searchbox',
       }),
@@ -43,7 +53,13 @@ injectScript(
           item: `
             <div>
               <div class="hit-name">
-                {{#helpers.highlight}}{ "attribute": "city" }{{/helpers.highlight}}
+                City: {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+              </div>
+              <div class="hit-name">
+                Country: {{#helpers.highlight}}{ "attribute": "country" }{{/helpers.highlight}}
+              </div>
+              <div class="hit-name">
+                Population: {{#helpers.highlight}}{ "attribute": "population" }{{/helpers.highlight}}
               </div>
             </div>
           `,