Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

createAmplifyGeocoder returns TypeError #238

Open
lomungo opened this issue Dec 14, 2023 · 0 comments
Open

createAmplifyGeocoder returns TypeError #238

lomungo opened this issue Dec 14, 2023 · 0 comments

Comments

@lomungo
Copy link

lomungo commented Dec 14, 2023

Dear all -

when using maplibre-gl-js-amplify in angular the map displays correctly, but when adding a createAmplifyGeocoder the app returns the following error when trying to get suggestions:

Failed to get suggestions with error: TypeError: Cannot read properties of undefined (reading 'default') on AmplifyMapLibreGeocoder.js

Here is the code of the controller:

async function initializeMap() {
  const map = await createMap({
    container: 'map', // An HTML Element or HTML element ID to render the map in https://maplibre.org/maplibre-gl-js-docs/api/map/
    zoom: 14,
    center: [6.988825, 51.012405],
    attributionControl: false
  });
  return map
}

@Component({
  selector: 'app-search-geo-tags',
  templateUrl: './search-geo-tags.component.html',
  styleUrls: ['./search-geo-tags.component.css']
})
export class SearchGeoTagsComponent implements OnInit {

  geoConfig: ResourcesConfig['Geo'] = {
    LocationService: {
      region: 'us-east-1',
      maps: {
        // Optional
        items: {
          "MyCustomMap": {
            "style": "VectorEsriStreets"
          }
        },
        default: 'MyCustomMap'
      },
      searchIndices: {
        items: ['MyIndex'], // REQUIRED - Amazon Location Service Place Index name
        default: 'MyIndex' // REQUIRED - Amazon Location Service Place Index name to set as default
      },
    }
  }

  constructor(private getGeotags: GetGeotagsGQL, private messageService: MessageService) {
    Amplify.configure({
      ...Amplify.getConfig(),
      Geo: this.geoConfig
    });
  }

  ngOnInit(): void {
    initializeMap().then(map => {
      const geocoder = createAmplifyGeocoder({ autocomplete: true });
      map.addControl(geocoder);
      map.on('load', function () {
        console.log('loaded')
      })
    }
    )
  }

When looking at AmplifyMapLibreGeocoder.js during runtime it seems that _config is empty because within AmplifyMapLibreGeocoder.js Amplify.getConfig() returns null

Extract from package.json
"@aws-amplify/geo": "^3.0.7",
"maplibre-gl": "^2.4.0",
"maplibre-gl-js-amplify": "^4.0.0",
"aws-amplify": "^6.0.7",
"@maplibre/maplibre-gl-geocoder": "^1.5.0",

Any idea what's happening here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant