I have been developing a web application that geocodes a point upon clicking on a map.
The app was initially built in Angular 2, but I do not have a strong grasp of Angular.
Currently, the app uses Google for geocoding and updates the text box automatically once the result is returned. The existing code is as follows:
import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Point } from '../models/geojson.model';
@Injectable()
export class GeocoderService {
private geocodeUrl: string = 'https://maps.googleapis.com/maps/api/geocode/json?key=REDACTED';
constructor(private http: Http) {
}
public addressFromPoint(point: Point) {
let url: string = this.geocodeUrl + '&latlng=' + encodeURIComponent(point.latLong());
console.log(url);
return this.http.get(url);
}
public addressToPoint(address: string) {
let url: string = this.geocodeUrl + '&address=' + encodeURIComponent(address);
console.log(url);
return this.http.get(url);
}
public getAddress(point: Point) {
let address: string;
this.addressFromPoint(point).subscribe(
(response) => {
address = response.json();
}
)
return address;
}
public getPoint(address: string):Point {
let point: Point;
this.addressToPoint(address).subscribe(
(response) => {
point = new Point([]);
},
(error) => {
});
return point;
}
}
To enhance functionality, I decided to switch to using the Mapbox Places API, leading to the following changes:
import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Point } from '../models/geojson.model';
@Injectable()
export class GeocoderService {
private geocodeUrl: string = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
private ACCESS_TOKEN: string = 'access_token=REDACTED';
constructor(private http: Http) {
}
public addressFromPoint(point: Point) {
let url: string = this.geocodeUrl + point.longLat() + '.json?' + this.ACCESS_TOKEN;
console.log(url);
return this.http.get(url);
}
public addressToPoint(address: string) {
let url: string = this.geocodeUrl + address + '.json?' + this.ACCESS_TOKEN;
console.log(url);
return this.http.get(url);
}
public getAddress(point: Point) {
let address: string;
this.addressFromPoint(point).subscribe(
(response) => {
address = response.json();
}
)
return address;
}
public getPoint(address: string):Point {
let point: Point;
this.addressToPoint(address).subscribe(
(response) => {
point = new Point([]);
},
(error) => {
});
return point;
}
}
The geocoder service is implemented as shown:
this.app.geocoder.addressFromPoint(point).subscribe((response) => { let name = response.json().formatted_address; });
With the shift to Mapbox API, the implementation now looks like this:
this.app.geocoder.addressFromPoint(point).subscribe((response) => { let name = response.json().features[0].place_name; });
Upon running the updated app, I notice that the correct address is being geocoded in the F12 Console. However, the automatic updating of text boxes is no longer functioning.
I speculated that it could be related to typings or string length issues, but even after various attempts, including converting to string literals, the problem persists. My suspicion is that the issue might be linked to how observables are being used, but I'm uncertain of how to proceed with troubleshooting.
What other factors could potentially be causing the text box to stop updating? Feel free to request additional information or code if needed.