Closed cbirdsong closed 5 months ago
Just realized this is constructed in simple JS in the index.html file. Something like this might work?
map.on("click", "polygons-layer", function (e) {
var name = e.features[0].properties["NAMELSADCO"] + ", " + e.features[0].properties["STATE_NAME"];
var tract = e.features[0].properties["NAMELSAD"];
var carOwnershipRaw = e.features[0].properties["Total Car Ownership Time"];
var carOwnership = parseFloat(carOwnershipRaw).toFixed(1);
var travelTimeRaw = e.features[0].properties["Mean travel time"];
var travelTime = parseFloat(travelTimeRaw).toFixed(1);
var incomeRaw = e.features[0].properties["Median earnings"];
var income = parseFloat(incomeRaw).toFixed(2);
// Construct the table
var popupHTML =
`<table>
<caption><strong>` +
name +
`</strong><br><small>` +
tract +
`</small></caption>
<tbody>
<tr>
<th>Mean travel time</th>
<td>` +
travelTime +
` minutes(?)</td>
</tr>
<tr>
<th>Median earnings</th>
<td>$` +
income +
`</td>
</tr>
<tr>
<th><strong>Avg Hours spent per day on cars:</strong></th>
<td>` +
carOwnership +
`</td>
</tr>
</tbody>
</table>`;
// Get the coordinates of the click event
var coordinates = e.lngLat;
// Set the popup content and display it at the click location
popup.setLngLat(coordinates).setHTML(popupHTML).addTo(map);
});
You might also need some table styling:
table {
table-layout: auto;
line-height: 1.25;
border-spacing: 0px;
border-collapse: separate;
}
td, th {
padding-block: 5px;
border-top: 1px solid;
}
th {
text-align: left;
}
td {
text-align: right;
white-space: nowrap;
}
caption {
text-align: left;
padding-block: 5px;
}
Thanks @cbirdsong! Looks awesome
Instead of pointing to the field Mean travel time
I pointed to the Component 1
field, which is used in the calculations for the total time spent on cars.
Hi! Love this. While poking around, I found myself wanting to see info in the tooltip, like the name of the county/census tract, median earnings and median travel time. Would that be difficult to pull it in there? It looks like it's present in the geojson file.