Skip to content

createAmplifyGeocoder returns TypeError #238

@lomungo

Description

@lomungo

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions