0
155
ViewsHow do I bind a pop-up to each element of a FeatureCollection coming in as a GET request response from back-end API?
Answer from back end comes back like this:
POSTMAN answer to GET REQUEST
I have a service method that sends the GET request to the back-end API.
export class PowerPlantService {
constructor(private http: HttpClient) { }
getAll() {
return this.http.get(baseUrl);
}
In the component, I create a service variable and call that GET method and subscribe to the result (data) . Then I add the data (which is a feature collection as seen in the picture above) to the map. Final line of code below.
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
//coordinates for Brasov
private latitude: number = 45.6427;
private longitude: number = 25.5887;
private tiles?: any;
private geoJsonFeature?: any;
private map!: L.Map;
private centroid: L.LatLngExpression = [this.latitude, this.longitude];
ngOnInit(): void {
this.initMap();
}
constructor(private powerPlantService: PowerPlantService) {
}
private initMap(): void {
this.map = L.map('map', {
center: this.centroid,
zoom: 2.8
});
this.tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
minZoom: 2.8,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
this.tiles.addTo(this.map);
this.powerPlantService.getAll().subscribe((data: any)=>{
console.log(data);
this.geoJsonFeature = data;
L.geoJSON(data).addTo(this.map)
})
This is how the pins are displayed on the map, this is just an example for reference.
I have tried to find a way to bind a pop-up activated on click for each pin of the feature collection which displays the properties of each Feature from the FeatureCollection but I can't find a tutorial anywhere.
1 answers
Answer question0
After trial and error, I have found a way:
- In the initMap() method I created myOnEachFeatureMethod which takes as argument the feature and your tileLayer.
- In the body of the myOnEachFeatureMethod I binded a pop-up to the layer and in the .bindPopup method I used the feature.properties to access each feature in the FeatureCollection and .DESIREDpROPERTY to display that feature's property. Ex:"Name: " + feature.properties.name
- In the subscribe method of the getAll() API request, when I add the FeatureCollection to the map, after the FeatureCollection argument (data) I add another argument between {}, the onEachFeature method of GeoJson and my implementation of this method, myOnEachFeatureMethod).
- Enjoy the pop-ups. :)
Here are some details about the onEachFeature but it's not very relevant to be honest, the documentation is rather disappointing if you are a beginner.
this.powerPlantService.getAll().subscribe((data: any)=>{
console.log(data);
this.geoJsonFeature = data;
L.geoJSON(data, {onEachFeature: myOnEachFeatureMethod}).addTo(this.map)
})
function myOnEachFeatureMethod(feature: any, layer:any)
{
layer.bindPopup(***the feature attributes you want to display go here*** );
}