Currently, I am in the process of developing a simple web application. The main functionality involves retrieving latitude and longitude data from my MongoDB database and displaying markers on a map, which is functioning correctly. However, the issue I'm facing is related to setting the colors of these markers. While I can achieve this by storing the URL of the marker PNG in the database, I am exploring options to dynamically change the marker color based on specific data from MongoDB. Presently, I have included a field named 'marker' in each MongoDB document containing a number ranging from 1 to 4, which determines the color of the corresponding marker.
This snippet showcases the component.ts setup:
import { Component, OnInit } from '@angular/core';
import { SchoolService } from '../school.service';
import { School } from '../School';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
startLat = 35.782169;
startLng = -80.793457;
zoom = 7;
greenMarker = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png';
yellowMarker = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png';
schools: School[] = [];
constructor(private schoolService: SchoolService) { }
ngOnInit() {
this.getSchools();
this.getIcon();
}
getSchools(): void {
this.schoolService.getSchools()
.subscribe((schoolList: School[]) => {
this.schools = schoolList;
console.log(this.schools);
});
}
getIcon() {
for (let i = 0; i <= this.schools.length; i++) {
if (this.schools[i].marker === 1) {
return this.greenMarker;
} else {
return this.yellowMarker;
}
}
}
}
Below is the HTML markup:
<div class="container">
<ul class="legend">
<li><span class="faster"></span>IPv6 Load Time ≤ IPv4</li>
<li><span class="all-elements"></span>Fully IPv6 Accessible</li>
<li><span class="reachable"></span>DNS AAA Record</li>
<li><span class="DNS-AAAA"></span>Not IPv6 Accessible</li>
</ul>
<agm-map id="map" [latitude]="startLat" [zoom]="zoom"
[longitude]="startLng">
<agm-marker *ngFor="let school of schools; let i = index"
[latitude]="school.lat" [longitude]="school.long"
[iconUrl]="getIcon()">
<agm-info-window>
<h4>{{ school.name }}</h4>
<p>lat: {{ school.lat }}</p>
<p>long: {{ school.long }}</p>
</agm-info-window>
</agm-marker>
</agm-map>
</div>
School.ts Schema:
export class School {
name: string;
lat: number;
long: number;
marker: number;
}
School Service Implementation:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class SchoolService {
constructor(private http: HttpClient) { }
getSchools() {
return this.http.get('http://localhost:3000/get');
}
}
Error log generated:
MapComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'marker' of undefined
at MapComponent.push../src/app/map/map.component.ts.MapComponent.getIcon (map.component.ts:38)
at MapComponent.push../src/app/map/map.component.ts.MapComponent.ngOnInit (map.component.ts:25)
at checkAndUpdateDirectiveInline (core.js:22099)
at checkAndUpdateNodeInline (core.js:23363)
...