Auto address use Azure Maps
// https://portal.azure.com/#browse/Microsoft.Maps%2Faccounts
Create Accout, Azure_Maps ->Settings->Authentication=>Primary key
```html
<h2 mat-dialog-title><i class="bi bi-info-circle text-success"> </i> {{data.action}} Location</h2>
<hr>
<form [formGroup]="frm" (ngSubmit)="onSubmit(frm)">
<mat-dialog-content>
<div class="form-group" hidden>
<label>Id</label>
<input class="form-control" [attr.disabled]="true" formControlName="id">
</div>
<div class="form-group mb-2">
<label>Full Address</label> <span style="color: red;"> *</span>
<input type="text" class="form-control" (input)="searchAddress()" placeholder="Enter an address"
formControlName="name">
<div class="search-results" (mouseleave)="clearSearchResults()">
<div *ngFor="let result of searchResults" (click)="selectAddress(result)">
{{ result.address.freeformAddress }}
</div>
</div>
</div>
<div class="form-group mb-2">
<label>Street Address</label>
<input class="form-control auto-filling" type="text" formControlName="streetName">
</div>
<div class="form-group mb-2">
<label>City</label>
<input class="form-control auto-filling" type="text" formControlName="city">
</div>
<div class="form-group mb-2">
<label>Region</label>
<input class="form-control auto-filling" type="text" formControlName="region">
</div>
<div class="form-group mb-2">
<label>State</label> <label style="margin-left: 218px;">Postcode</label>
<div class="row">
<input class="form-control oneline2-3 auto-filling" type="text" formControlName="state">
<input class="form-control oneline2-3 auto-filling" type="text" formControlName="postalCode">
</div>
</div>
<div class="form-group mb-2 ">
<label>Country</label>
<input class="form-control auto-filling" type="text" formControlName="country">
</div>
<div class="form-group mb-3 ">
<div>
<label>Source</label><span style="color: red;"> *</span>
<label style="margin-left: 194px;">Destination</label> <span style="color: red;"> *</span>
</div>
<div class="row">
<div class="form-check form-switch oneline2-3">
<input class="form-check-input" type="checkbox" style="width:35px;height:20px;" formControlName="source"
value="0">
</div>
<div class="form-check form-switch oneline2-3">
<input class="form-check-input" type="checkbox" style="width:35px;height:20px;" formControlName="destination"
value="0">
</div>
</div>
</div>
<hr>
<div><span style="color: red;">*</span> is required</div>
</mat-dialog-content>
<div mat-dialog-actions align="center">
<button class="btn btn-block btn-outline-secondary btn-sm" mat-button mat-dialog-close>Cancel</button>
<span> </span>
<button type="submit" [disabled]="!frm.valid || submitClicked" class="btn btn-outline-success btn-sm"
mat-button>Save</button>
</div>
</form>
```// Some code
```scss
.search-results {
position: absolute;
width: 90%;
background-color: rgb(231, 240, 248);
// border: 1px solid #ccc;
z-index: 100;
}
.search-results div {
padding: 2px 6px;
cursor: pointer;
}
.search-results div:hover {
background-color: #93def5;
}
.auto-filling {
background-color: rgb(241, 241, 241);
}
```// Some code
```typescript
//import { Appearance, Location } from '@angular-material-extensions/google-maps-autocomplete';
import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { LocationService } from 'src/app/services/location.service';
import { AzureMapService } from 'src/app/services/share/azure-map.service';
@Component({
selector: 'app-location-add-update',
templateUrl: './location-add-update.component.html',
styleUrl: './location-add-update.component.scss'
})
export class LocationAddUpdateComponent implements OnInit {
frm!: FormGroup;
submitClicked = false;
errorMessage: any;
is_edit: boolean = true;
LocationList: any;
Role: any;
searchQuery: string = '';
searchResults: any[] = [];
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public router: Router,
public fb: FormBuilder,
private dialog: MatDialog,
public toastr: ToastrService,
private locationService: LocationService,
private azureMapService: AzureMapService
) { }
ngOnInit(): void {
this.initialForm(this.data);
}
initialForm(data: any) {
this.frm = this.fb.group({
id: [{ value: 0, disabled: !this.is_edit }],
name: ['', Validators.required],
streetName: [],
city: [],
region: [],
state: [],
postalCode: [],
country: [],
source: [false, Validators.required],
destination: [false, Validators.required],
});
if (data.action == 'Edit') {
this.frm = this.fb.group({
id: data.location.id,
name: [data.location.name, Validators.required],
streetName: [data.location.streetName],
city: [data.location.city],
region: [data.location.county],
state: [data.location.state],
postalCode: [data.location.postalCode],
country: [data.location.country],
source: [data.location.source, Validators.required],
destination: [data.location.destination, Validators.required],
});
}
}
//#region
async onSubmit(frm: FormGroup) {
this.submitClicked = true;
if (this.data.action == 'New') {
this.locationService.addNewLocation(frm.value)
.subscribe({
next: data => {
if (data.status == 200) {
this.toastr.success('A new record has added successfully !', 'Success', { timeOut: 1000 });
this.dialog.closeAll();
this.reload(this.router.url);
}
},
error: error => {
console.error('There was an error in update!', error);
this.toastr.error('Add Fail', 'Error')
}
})
// console.log(result);
}
else if (this.data.action == 'Edit') {
this.locationService.editLocation(frm.value)
.subscribe({
next: data => {
if (data.status == 200) {
this.toastr.success('Update Success', 'Success');
this.dialog.closeAll();
this.reload(this.router.url);
}
},
error: error => {
console.error('There was an error in update!', error);
this.toastr.error('Update Fail', 'Error')
}
})
}
}
async reload(url: string): Promise<boolean> {
await this.router.navigateByUrl('weighing', { skipLocationChange: true });
return this.router.navigateByUrl(url);
}
searchAddress(): void {
this.searchQuery = this.frm.get('name')?.value;
if (this.searchQuery.length > 2) {
this.azureMapService.searchAddress(this.searchQuery)
.then(data => {
this.searchResults = data.results;
})
.catch(error => {
console.error('Error searching address:', error);
});
} else {
this.clearSearchResults();
}
}
selectAddress(result: any) {
this.clearSearchResults();
this.populateForm(result.address);
}
// Populate the form with the selected address
populateForm(address: any) {
this.frm.controls['name'].setValue(address.freeformAddress);
this.frm.controls['streetName'].setValue(address.streetNumber ? address.streetNumber + ' ' + address.streetName : address.streetName);
this.frm.controls['city'].setValue(address.localName);
this.frm.controls['region'].setValue(address.countrySecondarySubdivision);
this.frm.controls['state'].setValue(address.countrySubdivisionCode);
this.frm.controls['postalCode'].setValue(address.postalCode);
this.frm.controls['country'].setValue(address.country);
}
clearSearchResults() {
this.searchResults = [];
}
//#endregion
}
```
```typescript
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { constants } from 'src/app/constants';
@Injectable({
providedIn: 'root'
})
export class AzureMapService {
azureMapsKey = constants.AzureMapsKey;
searchUrl: string = 'https://atlas.microsoft.com/search/fuzzy/json';
http: any;
constructor() {
}
searchAddress(query: string): Promise<any> {
const params = new URLSearchParams({
query: query,
countrySet: 'AU',
typeahead: 'true',
limit: '5',
'subscription-key': this.azureMapsKey
});
return fetch(this.searchUrl + '?' + params.toString())
.then(response => response.json())
.catch(error => {
console.error('Error fetching data:', error);
return Promise.reject(error);
});
}
// Get address suggestions from Azure Maps
getAddressSuggestions(query: string): Observable<any> {
const params = new URLSearchParams({
query: query,
countrySet: 'AU',
typeahead: 'true',
limit: '5',
'subscription-key': this.azureMapsKey
});
//let a= 'https://atlas.microsoft.com/search/address/json?typeahead=true&api-version=1&query=${query}&language=en&countrySet=AU&view=Auto';
const url = this.searchUrl + '?' + params.toString();
return this.http.get(url);
}
}
```Last updated
Was this helpful?