diff --git a/packages/instant-meilisearch/README.md b/packages/instant-meilisearch/README.md index f7feb7d7..81b0a857 100644 --- a/packages/instant-meilisearch/README.md +++ b/packages/instant-meilisearch/README.md @@ -747,7 +747,7 @@ The `geoSearch` widget displays search results on a Google Map. It lets you sear - ✅ templates: The templates to use for the widget. - ✅ cssClasses: The CSS classes to override. -[See our playground for a working example](./playgrounds/geo-javascript/src/app.js) and this section in our [contributing guide](./CONTRIBUTING.md#-geo-search-playground) to set up your `Meilisearch`. +Check out our [geosearch demo](https://github.com/meilisearch/demos/tree/main/src/geo-javascript) for a working example. #### Requirements @@ -776,7 +776,7 @@ importLibrary('maps').then(() => { Replace `YOUR_GOOGLE_MAPS_API_KEY` with your Google API key. -See [code example in the playground](./playgrounds/geo-javascript/src/app.js) +Check out our [geosearch demo](https://github.com/meilisearch/demos/tree/main/src/geo-javascript) for a working example. ### Usage diff --git a/playgrounds/geo-javascript/.env.example b/playgrounds/geo-javascript/.env.example deleted file mode 100644 index aa0d283e..00000000 --- a/playgrounds/geo-javascript/.env.example +++ /dev/null @@ -1 +0,0 @@ -VITE_GOOGLE_MAPS_API_KEY="insert your Google Maps API key here" diff --git a/playgrounds/geo-javascript/.gitignore b/playgrounds/geo-javascript/.gitignore deleted file mode 100644 index 4c49bd78..00000000 --- a/playgrounds/geo-javascript/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.env diff --git a/playgrounds/geo-javascript/README.md b/playgrounds/geo-javascript/README.md deleted file mode 100644 index 3d57a2af..00000000 --- a/playgrounds/geo-javascript/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# Javascript GeoSearch 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 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 - -``` -yarn install -``` - -### Compiles and hot-reloads for development -``` -yarn dev -``` - -### Compiles and minifies for production -``` -yarn build -``` diff --git a/playgrounds/geo-javascript/index.html b/playgrounds/geo-javascript/index.html deleted file mode 100644 index 4a9adbcd..00000000 --- a/playgrounds/geo-javascript/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - Meilisearch + InstantSearch 🌍 - - - -
-

Meilisearch + InstantSearch.js

-

Search in world cities

-

- This is a dataset of 32419 world cities with more than 10000 - inhabitants. -

- -
-
-
- -
- -
-
-
- -
-
- - - - - diff --git a/playgrounds/geo-javascript/package.json b/playgrounds/geo-javascript/package.json deleted file mode 100644 index 370dd0d4..00000000 --- a/playgrounds/geo-javascript/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "@meilisearch/geo-playground", - "version": "0.0.0", - "private": true, - "description": "Instant-meilisearch playground focussed on GeoSearch written with vanilla javascript", - "type": "module", - "scripts": { - "dev": "vite" - }, - "browserslist": [ - "defaults" - ], - "license": "MIT", - "dependencies": { - "@googlemaps/js-api-loader": "^2.0.1", - "@meilisearch/instant-meilisearch": "*" - } -} diff --git a/playgrounds/geo-javascript/src/app.css b/playgrounds/geo-javascript/src/app.css deleted file mode 100644 index 0a209bd0..00000000 --- a/playgrounds/geo-javascript/src/app.css +++ /dev/null @@ -1,54 +0,0 @@ -body { - font-family: sans-serif; - padding: 1em; -} - -.ais-ClearRefinements { - margin: 1em 0; -} - -.ais-SearchBox { - margin: 1em 0; -} - -.ais-Pagination { - margin-top: 1em; -} - -.left-panel { - float: left; - width: 200px; -} - -.right-panel { - margin-left: 210px; -} - -.ais-InstantSearch { - max-width: 960px; - overflow: hidden; - margin: 0 auto; -} -.ais-InfiniteHits-item { - margin-bottom: 1em; - width: calc(50% - 1rem); -} -.ais-Hits-item { - margin-bottom: 1em; - width: calc(50% - 1rem); -} - -.ais-Hits-item img { - margin-right: 1em; - width: 100%; - height: 100%; - margin-bottom: 0.5em; -} - -.hit-name { - margin-bottom: 0.5em; -} - -.hit-info { - font-size: 90%; -} diff --git a/playgrounds/geo-javascript/src/app.js b/playgrounds/geo-javascript/src/app.js deleted file mode 100644 index 80329503..00000000 --- a/playgrounds/geo-javascript/src/app.js +++ /dev/null @@ -1,76 +0,0 @@ -/* eslint-disable no-undef */ -import { instantMeiliSearch } from '@meilisearch/instant-meilisearch' -import { setOptions, importLibrary } from '@googlemaps/js-api-loader' - -const GOOGLE_MAP_API_KEY = import.meta.env.VITE_GOOGLE_MAPS_API_KEY - -setOptions({ - apiKey: GOOGLE_MAP_API_KEY, - version: 'weekly', -}) - -importLibrary('maps').then(() => { - const search = instantsearch({ - indexName: 'world_cities_geojson', - searchClient: instantMeiliSearch( - 'https://edge.meilisearch.com', - 'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303', - {} - ).searchClient, - }) - - search.addWidgets([ - instantsearch.widgets.sortBy({ - container: '#sort-by', - items: [ - { value: 'world_cities_geojson', label: 'Relevant' }, - { - value: 'world_cities_geojson:population:desc', - label: 'Most Populated', - }, - { - value: 'world_cities_geojson:population:asc', - label: 'Least Populated', - }, - ], - }), - instantsearch.widgets.searchBox({ - container: '#searchbox', - }), - instantsearch.widgets.configure({ - hitsPerPage: 20, - }), - instantsearch.widgets.geoSearch({ - container: '#maps', - googleReference: window.google, - initialZoom: 7, - initialPosition: { - lat: 50.655250871381355, - lng: 4.843585698860502, - }, - enableRefineOnMapMove: false, - enableClearMapRefinement: false, - enableRefineControl: false, - }), - instantsearch.widgets.infiniteHits({ - container: '#hits', - templates: { - item: ` -
-
- City: {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}} -
-
- Country: {{#helpers.highlight}}{ "attribute": "country" }{{/helpers.highlight}} -
-
- Population: {{#helpers.highlight}}{ "attribute": "population" }{{/helpers.highlight}} -
-
- `, - }, - }), - ]) - - search.start() -}) diff --git a/playgrounds/geo-javascript/src/index.css b/playgrounds/geo-javascript/src/index.css deleted file mode 100644 index 30475b7b..00000000 --- a/playgrounds/geo-javascript/src/index.css +++ /dev/null @@ -1,10 +0,0 @@ -body, -h1 { - margin: 0; - padding: 0; -} - -body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, - Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; -}