Angular page is no longer loading the Esri Map when clicking on it to get the latitude and longitude. The error message 'toJSON' of null at Object.b.locationToAddress is

I am currently encountering an issue when clicking on the esri map. This functionality previously worked without any problems. The error is happening at the locatorTask.locationToAddress(event.mapPoint).then(function (response) {

The error message displayed in the console can be seen here: https://i.sstatic.net/yjBpk.png

Below is the code snippet in question:

  mapView.when(function () {
  mapView.popup.autoOpenEnabled = false;
  mapView.on("click", function (event) {
    searchWidget.clear();
    mapView.popup.clear();
    locatorTask
      .locationToAddress(event.mapPoint)
      .then(function (response) {
        // If an address is successfully found, show it in the popup's content
        mapView.popup.content = response.address;
        var address = response.address;
        showPopup(address, event.mapPoint);
      })
      .catch(function (error) {
        // If the promise fails and no result is found, show a generic message
        mapView.popup.content = "No address was found for this location";
        showPopup("No address found.", event.mapPoint);
      });

    mapView.popup.visible = true;
  });
})

Any assistance or guidance on how to resolve this issue would be greatly appreciated!

Answer №1

Have you made any updates to your JavaScript API version? The changes were implemented in version 4.12.

Check out the latest updates here

"The arguments for locatorTask.locationToAddress() have been modified from (location, distance, requestOptions) to now accept (params, requestOptions). The params object includes location and locationType properties."

Full details can be found in the new documentation: Latest Locator documentation here

Make sure your code matches the updated format:

locatorTask
      .locationToAddress(location:{event.mapPoint})
      .then(function (response) {

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Data that changes dynamically on a chart

When making a rest call to fetch data, I aim to populate the pieChartData with the obtained information. However, I am facing difficulties in achieving this task. Can someone guide me on how to accomplish this? import { Component, OnInit} from '@angu ...

Exploring the dynamic duo of SystemJS and AngularJS 2

I am currently working on integrating the Core Angular2 module into my application, which is written in Typescript. It's essentially following the same structure as the quick start tutorial on the Angular.IO website. However, I am facing a challenge ...

Make fun of the server's response, even when the server is not responding

Here are some things I have learned (Please correct me if any information is incorrect, thank you :)): HttpInterceptor functions similarly to Aspect-oriented programming in certain ways; We can manipulate the httpOptions for requests; Modifying response ...

Maintaining checkbox selection while switching pages in Angular

When I try to edit the settings for accepting payments in all currencies under the "Pricing" component, the checkbox is unchecked every time I return to the "General" section. How can I prevent this from happening and keep the checkbox checked? Refer to ...

The Angular Material components are not being detected

After spending a considerable amount of time on this issue, I decided to start a new Angular 5 project and incorporate Angular Material into it. I proceeded by importing and exporting the necessary material modules in a file named material.module.ts: imp ...

The Name 'require' could not be found (TS2304)

My app is encountering a build error with Webpack, specifically due to awesome-typescript-loader. The error message reads as follows: ERROR in [at-loader] ./src/app/app.ts:6:13 TS2304: Cannot find name 'require'. Here is the code snippet cau ...

Angular 10 is displaying a message indicating that a font has not been

I'm facing an error in my Angular project when trying to add a font to the SCSS file. How can I resolve this issue? style.scss: @import "~@angular/material/theming"; @include mat-core(); $PWP-primary: mat-palette($mat-indigo); $PWP-accent: ...

Determine the type of a variable at compile time using TypeScript

In my programming project, I have a base class called GenericSetting that is subclassed in approximately 10 or more types. export class GenericSetting { configuration: SettingArgs constructor(args: SettingArgs) { this.configuration = args } } A ...

Managing forms in large Angular 2 applications

In the company where I work, we are in the process of developing a complex application that requires users to fill out multiple forms to register for our program. Once all questions have been answered, users are taken to a summary section that displays the ...

Tips for removing a character from an input field during an Angular unit test

Struggling to conduct a basic unit test that confirms pressing the backspace key in a text field will delete a character. Despite experimenting with various event triggers, the character deletion is not functioning as expected. The code snippet below is ...

Ways to determine if an optional parameter has been defined

One method I use to verify if the body property has been passed to the function. Is there a more straightforward approach in TypeScript? httpAPI<T>(httpMethod: HttpMethod, url: string, optional?: { params?: HttpParams, body?: any, isUseCache?:boole ...

Is there an Angular Carousel feature that previews the next image?

Here's the design I'm working on: https://i.sstatic.net/mDroM.png The image is centered with a glimpse of the previous/next images on the sides. I've explored various angular carousels from but none seem to have this specific feature. C ...

Tsc encounters issues when interacting with AWS services

When attempting to compile TypeScript code into JavaScript using tsc, I encountered constant crashes specifically related to AWS code within the node_modules directory. Despite my efforts to resolve the issue by adding skipLibCheck to my tsconfig file, inc ...

Typescript turns a blind eye to improper usage of a passed prop function within React components

My React component is structured like this: const BirthdaySearch: FC<{ onSearch: (year: string, month: string) => void }> = (props) => { const monthInputRef = useRef<HTMLInputElement>(null); const dayInputRef = useRef<HTMLInp ...

Experiencing a 400 bad request error while making a post request in Angular. Any solutions to resolve

I need assistance with my Angular and Django project because I am encountering a 400 bad response error when making a post request. The project workflow is as follows: the user successfully signs up, is then directed to a profile form, and upon submitting ...

What's causing the subscription feature to malfunction in a fresh browser tab?

I am facing an issue with camera entries on an angular website. Whenever I click on an entry, a new window opens to display the camera livestream. However, I am having trouble with the subscribe functionality. Important note: Once the window is open, subs ...

I am having difficulty accessing the values stored in my cardTiles variable

I am facing an issue with a variable called cardTiles in my Angular 9 component. The variable is defined as cardTitles:Product[] = []; The Product class is defined as follows export class Product{ productName: string;} When I console.log(this.cardTi ...

When using angular2 to dynamically create a materialize sidenav with dropdown, the collapsible dropdown may not be properly initialized

Currently, I am in the process of learning Angular2 along with the materialize plugin. My main task is to create a dynamic materialize side-nav menu list with multiple dropdowns. Although I have successfully created the menus, the collapsible feature seems ...

Subject fails to subscribe to the change

There are two components in my project that share a common service. shared.service.ts // ..... skipping top level codes private pickAnalysisForBubble = new Subject<any>(); analysisForBubble$ = this.pickAnalysisForBubble.asObservable(); mapTo ...

Understanding class declaration within a dynamic context in TypeScript

I am currently working on a library and facing difficulties with dynamically inferring types. Within the library, the useModel function returns a Model instance. class Database { ... public useModel(target: Function) { const tableName = getClassMe ...