I have been working with Mapbox GL JS and successfully retrieved data in the console. However, I am facing issues when trying to display this data on an HTML page. Can anyone assist me with this problem? I specifically need the data inside mapdata to be shown on the HTML page. Additionally, I want the showStory condition to become true when clicking on a marker. I attempted to use ngFor with mapData but it did not work. The data from the console also does not appear when logging outside of Mapbox.
HTML:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" (click)="openFav()" *ngIf="showStory">
<ul class="addressClass">
<li><i class="fa fa-star-o" aria-hidden="true"></i></li>
<li><b>Place/Name</b></li>
<li>Country, City</li>
<li>Postal Code, Address</li>
</ul>
</div>
Ts:
public showStory:boolean = false;
this.ApiService
.getAllPins()
.subscribe(
pins => {
this.places = pins.data;
this.points = this.places.map(function(pins) {
return {"name":pins.name,"lat":pins.lat,"lang":pins.lang,"address":pins.address,"category_name":pins.category_name,
"description":pins.description,"email":pins.email,"phone_number":pins.phone_number,"pin_media":pins.pin_media,
"country":pins.user_details.country,"user_name":pins.user_details.user_name};
});
mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA';
var coOrdinates = this.points;
var map = new mapboxgl.Map({
container: 'maps',
style: 'mapbox://styles/mapbox/streets-v9',
center: [coOrdinates[1].lat,coOrdinates[1].lang],
zoom: 3
});
map.on('load', function () {
for(var i=0; i< coOrdinates.length; i++) {
map.addLayer({
"id": "points" + i,
"type": "circle",
"paint":{
"circle-radius":15,
"circle-color":'#' + (Math.random().toString(16) + "000000").substring(2,8)
},
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {"field":coOrdinates[i],"name":coOrdinates[i].name},
"geometry": {
"type": "Point",
"coordinates": [coOrdinates[i].lat,coOrdinates[i].lang]
}
}]
}
}
});
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on("mouseenter", "points" + i, e => {
this.id = e.features[0].layer.id;
map.setPaintProperty(e.features[0].layer.id, 'circle-radius', 20);
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.name;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
popup.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
map.on("mouseleave", "points" + i, e => {
if(this.id) {
map.setPaintProperty(this.id, 'circle-radius', 15);
this.id = undefined;
}
popup.remove();
});
map.on("click", "points" + i, e => {
this.id = undefined;
this.mapData = e.features[0].properties
for(var i=0; i< coOrdinates.length; i++) {
map.setPaintProperty('points'+i, 'circle-radius', 15);
}
map.setPaintProperty(e.features[0].layer.id, 'circle-radius', 20);
this.showStory = true;
this.mapData = JSON.parse(this.mapData.field);
console.log(this.mapData);
});
}
});
}, error => {});