Geo Search By Text show different results for "fort p"

setterlee commented 2 years ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Vue

Amplify APIs

Geo

Amplify Categories

geo

Environment information

``` # Put output below this line System: OS: macOS 12.2.1 CPU: (8) arm64 Apple M1 Memory: 180.80 MB / 8.00 GB Shell: 3.3.1 - /opt/homebrew/opt/fish/bin/fish Binaries: Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.0/bin/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm Browsers: Chrome: 98.0.4758.109 Safari: 15.3 npmPackages: @aws-amplify/ui-components: ^1.9.4 => 1.9.6 @chenfengyuan/vue-number-input: ^2.0.0-rc => 2.0.0-rc @maplibre/maplibre-gl-geocoder: ^1.2.0 => 1.2.0 @maplibre/maplibre-gl-style-spec: 14.1.0-dev @tanker/file-reader: ^2.25.0 => 2.25.0 @vicons/carbon: ^0.11.0 => 0.11.0 @vicons/ionicons4: ^0.11.0 => 0.11.0 @vicons/ionicons5: ^0.11.0 => 0.11.0 @vicons/tabler: ^0.11.0 => 0.11.0 @vue/cli-plugin-babel: ~4.5.0 => 4.5.15 @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15 @vue/cli-plugin-router: ~4.5.0 => 4.5.15 @vue/cli-plugin-vuex: ~4.5.0 => 4.5.15 @vue/cli-service: ~4.5.0 => 4.5.15 @vue/compiler-sfc: ^3.0.0 => 3.2.26 @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 amplify-ui-components-loader: undefined () aws-amplify: ^4.3.12 => 4.3.12 babel-eslint: ^10.1.0 => 10.1.0 braintree-web-drop-in: ^1.32.1 => 1.32.1 constant-case: ^3.0.4 => 3.0.4 core-js: ^3.6.5 => 3.20.1 eslint: ^6.7.2 => 6.8.0 eslint-plugin-prettier: ^3.3.1 => 3.4.1 eslint-plugin-vue: ^7.0.0 => 7.20.0 geolib: ^3.3.3 => 3.3.3 kebab-case: ^1.0.1 => 1.0.1 maplibre-gl: ^1.15.2 => 1.15.2 maplibre-gl-js-amplify: ^1.2.1 => 1.2.1 naive-ui: ^2.21.2 => 2.23.1 prettier: ^2.2.1 => 2.5.1 sass: ^1.45.1 => 1.45.1 sass-loader: ^10.2.0 => 10.2.0 title-case: ^3.0.3 => 3.0.3 vfonts: ^0.1.0 => 0.1.0 vue: ^3.2.24 => 3.2.26 (2.6.14) vue-browser-geolocation: ^1.8.0 => 1.8.0 vue-draggable-next: ^2.1.1 => 2.1.1 vue-router: ^4.0.0-0 => 4.0.12 vue3-date-time-picker: ^2.4.4 => 2.4.4 vuex: ^4.0.0-0 => 4.0.2 npmGlobalPackages: @angular/cli: 13.1.2 @aws-amplify/cli: 7.6.21 @modyo/cli: 3.1.21 @quasar/cli: 1.2.1 @vue/cli: 4.5.15 all-the-package-names: 1.3905.0 amplify: 0.0.11 babel-core: 6.26.3 browser-sync: 2.27.7 cordova: 11.0.0 expo-cli: 5.0.3 generator-jhipster: 7.4.0 npm: 6.14.13 quasar: 2.1.0 react-native-cli: 2.0.1 serverless-api-gateway-caching: 1.7.4 serverless-domain-manager: 5.1.5 serverless: 2.62.0 turtle-cli: 0.24.3 vue-native-cli: 0.3.0 yarn: 1.22.17 ```

Describe the bug

My client warned to me that when he try to search "fort p" on the map, he just see one option. Comparing with the behavior at AWS Location "try it!" section I noticed that in that place "fort p" show more than one...

Comparing the Geo.searchByText (just filtering countries to USA and setting maxResults to 6) with the createAmplifyGeocoder control show the same result, just one option.

Expected behavior

We expect that the result looks like the AWS Location "try it!" section

Reproduction steps

The steps decribed at Location Search section in Amplify CLI Docs

npm install @maplibre/maplibre-gl-geocoder maplibre-gl@1 maplibre-gl-js-amplify
test the following code:

import { createMap, createAmplifyGeocoder } from "maplibre-gl-js-amplify"; import maplibregl from "maplibre-gl"; import "maplibre-gl/dist/maplibre-gl.css"; import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css"; import "maplibre-gl-js-amplify/dist/public/amplify-geocoder.css"; // Optional CSS for Amplify recommended styling

async function initializeMap() { const el = document.createElement("div"); el.setAttribute("id", "map"); document.body.appendChild(el);

const map = await createMap({
    container: "map",
    center: [-123.1187, 49.2819], // [Longitude, Latitude]
    zoom: 11,
})

map.addControl(createAmplifyGeocoder());

}

initializeMap();


### Code Snippet

```javascript
<template>
  <div id="mapPublication" ref="mapDrawer" class="mb-4"></div>
</template>

<script>
import { defineComponent, onMounted } from "vue";
import { createMap, createAmplifyGeocoder } from "maplibre-gl-js-amplify";
import "maplibre-gl/dist/maplibre-gl.css";
import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";
import "maplibre-gl-js-amplify/dist/public/amplify-geocoder.css"; // Optional CSS for Amplify recommended styling

export default defineComponent({
  components: {},
  setup() {
    let map = null;
    onMounted(async () => {
      map = await createMap({
        container: "mapPublication",
        center: [-123.1187, 49.2819], // [Longitude, Latitude]
        zoom: 11,
      });
      map.addControl(createAmplifyGeocoder());
    });
    return {};
  },
});
</script>

Log output

``` // Put your logs below this line [DEBUG] 03:00.571 Credentials - getting credentials ConsoleLogger.js?36de:127 [DEBUG] 03:00.571 Credentials - picking up credentials ConsoleLogger.js?36de:127 [DEBUG] 03:00.572 Credentials - getting new cred promise ConsoleLogger.js?36de:127 [DEBUG] 03:00.572 Credentials - checking if credentials exists and not expired ConsoleLogger.js?36de:139 [DEBUG] 03:00.572 Credentials - are these credentials expired? {accessKeyId: 'XXXXX', secretAccessKey: 'XXXXX', sessionToken: 'XXXXX', expiration: Thu Feb 24 2022 19:02:34 GMT-0300 (hora de verano de Chile), identityId: 'us-east-1:61282de3-b30f-4762-8690-fe80f4d2b6b6', …} ConsoleLogger.js?36de:127 [DEBUG] 03:00.573 Credentials - credentials not changed and not expired, directly return ConsoleLogger.js?36de:139 [DEBUG] 03:00.573 AmazonLocationServiceProvider - Set credentials for storage. Credentials are: {accessKeyId: 'XXXXX', sessionToken: 'XXXXX', secretAccessKey: 'XXXXXX', identityId: 'us-east-1:XXXXXX', authenticated: true} ConsoleLogger.js?36de:131 [DEBUG] 03:01.537 Signer {region: 'us-east-1', service: 'geo'} ConsoleLogger.js?36de:131 [DEBUG] 03:01.538 Signer {region: 'us-east-1', service: 'geo'} ```

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:XXXXX",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-XXXXX",
    "aws_user_pools_web_client_id": "XXXXX",
    "oauth": {},
    "aws_cognito_username_attributes": [],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL",
        "FAMILY_NAME",
        "NAME",
        "PHONE_NUMBER"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ],
    "aws_appsync_graphqlEndpoint": "https://XXXXXXXX.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-1",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "XXXXXXX",
    "aws_cloud_logic_custom": [
        {
            "name": "payments",
            "endpoint": "https://XXXXXXX.execute-api.us-east-1.amazonaws.com/dev",
            "region": "us-east-1"
        },
        {
            "name": "taxrates",
            "endpoint": "https://XXXXXXX.execute-api.us-east-1.amazonaws.com/dev",
            "region": "us-east-1"
        }
    ],
    "aws_user_files_s3_bucket": "XXXXXXX-dev",
    "aws_user_files_s3_bucket_region": "us-east-1",
    "geo": {
        "amazon_location_service": {
            "region": "us-east-1",
            "maps": {
                "items": {
                    "rtrMap-dev": {
                        "style": "VectorEsriStreets"
                    }
                },
                "default": "rtrMap-dev"
            },
            "search_indices": {
                "items": [
                    "rtrSearchIndex-dev"
                ],
                "default": "rtrSearchIndex-dev"
            }
        }
    }
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

package.json.txt

cwomack commented 1 year ago

Hello @setterlee 👋, and thanks for submitting this issue. I've got a few clarifying questions regarding what you're seeing in your (or your client's) app relative to the AWS Location "try it!" section that you referenced.

I was able to see some minor differences in the search results when creating a Vue app that used your code above (using default settings), but I believe the "Place Index" example within the AWS Console you linked has a few additional options configured as a demo.

Do you have any other customized or options settings included for Geo beyond Maps and Location Search?
Have you specified a different geospatial data provider for the Search Index other than "Esri"?
Can respond with what the "suggestions" payload comes back with?

It does appear that if you're zoomed in enough when using the Location Search AND you provide minimal text to search (such as "Fort P" in your example), the returned array of results doesn't fill to the MaxResults that is set.

cwomack commented 1 year ago

Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment back with any previously requested information and we'd be happy to re-open the issue.

Thank you!

aws-amplify / amplify-js