Mapbox popup displays "unknown" instead of properties - popup

Question

After clicking on a street (which is supposed to display a popup with properties), the popup displays "unknown". What should be done to make the popup show the properties? If anyone knows what to change or what could be the cause of the popups not working, I would be really grateful!
<div class="container" style="background-color:#F6F3F3">
<div id='map' style='width: 100%; height: 900px;'></div>
<script>
mapboxgl.accessToken =
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/bisqpski/cjssto8kw77g11gk4rwur575q'
});
map.on('load', function() {
// Add a layer showing the state polygons.
map.addLayer({
'id': 'kazimierz-tileset',
'type': 'fill',
'source': {
"type": "Feature",
"properties": {
"Street": "Świętego Wawrzyńca",
"Probability": "13%"
},
"geometry": {
"coordinates": [
[19.944511, 50.049316],
[19.94617, 50.049681],
[19.946307, 50.049719],
[19.947699, 50.050025],
[19.948851, 50.050282],
[19.949689, 50.050456],
[19.951076, 50.05076],
[19.951401, 50.050831]
],
"type": "LineString"
}
}
});
// When a click event occurs on a feature in the states layer, open a popup
at the
// location of the click, with description HTML from its properties.
map.on('click', 'kazimierz-tileset', function(e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.name)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the states layer.
map.on('mouseenter', 'kazimierz-tileset', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'kazimierz-tileset', function() {
map.getCanvas().style.cursor = '';
});
});
</script>
</div>

Answer 1

You don't have name as a property for your features. Only street and probability. So you're calling a property that doesn't exist. Use street or define the property name with whatever you want.
"properties": {
"Street": "Świętego Wawrzyńca",
"Probability": "13%"
"Name": "Your Name Here"
},
Or just use the street property.
.setHTML(e.features[0].properties.Street)
Snippet:
<div class="container" style="background-color:#F6F3F3">
<div id='map' style='width: 100%; height: 900px;'></div>
<script>
mapboxgl.accessToken =
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/bisqpski/cjssto8kw77g11gk4rwur575q'
});
map.on('load', function() {
// Add a layer showing the state polygons.
map.addLayer({
'id': 'kazimierz-tileset',
'type': 'fill',
'source': {
"type": "Feature",
"properties": {
"Street": "Świętego Wawrzyńca",
"Probability": "13%"
},
"geometry": {
"coordinates": [
[19.944511, 50.049316],
[19.94617, 50.049681],
[19.946307, 50.049719],
[19.947699, 50.050025],
[19.948851, 50.050282],
[19.949689, 50.050456],
[19.951076, 50.05076],
[19.951401, 50.050831]
],
"type": "LineString"
}
}
});
// When a click event occurs on a feature in the states layer, open a popup
at the
// location of the click, with description HTML from its properties.
map.on('click', 'kazimierz-tileset', function(e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.Street)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the states layer.
map.on('mouseenter', 'kazimierz-tileset', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'kazimierz-tileset', function() {
map.getCanvas().style.cursor = '';
});
});
</script>
</div>
Lastly, in your example you're adding a layer. But you already have that layer added with the same name in the style you created. You don't need to add it again or you'll get a Error: Layer with id "kazimierz-tileset" already exists on this map since it will naturally pull directly from the style. Make sure to rename the layer or remove the addLayer.