How do I display multiple geojson properties in a popup using Mapbox-GL? - mapbox

Question

I am trying to display two propeties from a geojson file in a popup on a map with points.
Here is an example of one item from the geojson file:
{ "type": "Feature", "properties": { "LONG": 144.760809, "LAT": -37.866606, "STOP_ID": 19924, "STOP_NAME": "Aircraft ", "2016_17_PATRONAGE": 294702, "2016_17_PATRONAGE_DAILY": 805.2, "METRO": "Yes" }, "geometry": { "type": "Point", "coordinates": [ 144.760809, -37.866606 ] } },
I am trying to display both the STOP_NAME and 2016_17_PATRONAGE_DAILY attributes in the same popup.
I have tried looking at this example and this example but neither approach seems to work.
This is my code so far (that works):
map.on('click', 'layername', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var name = e.features[0].properties.STOP_NAME;
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(name)
.addTo(map);
});
I tried this code using the examples above:
map.on('click', 'layername', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var name = e.features[0].properties.STOP_NAME;
var patronage = e.features[0].properties.2016_17_PATRONAGE;
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(name) + ' (' + properties.2016_17_PATRONAGE + ')')
.addTo(map);
});
This didn't work and I got a message: "SyntaxError: identifier starts immediately after numeric literal"
I'm fairly new to Mapbox-GL-JS so would appreciate any assistance.

Answer 1

You're so close. Just change that setHTML line to include an expression that references both properties:
.setHTML(e.features[0].properties.STOP_NAME + ' (' + e.feature[0].properties.2016_17_PATRONAGE + ')')
For convenience, I tend to do:
var p = e.features[0].properties;
So this would be:
.setHTML(p.STOP_NAME + ' (' + p.2016_17_PATRONAGE + ')')