Charlie-Henry / driving-timing-consumption

A map of how much time Americans spend on driving per day
https://charlie-henry.github.io/driving-timing-consumption/
0 stars 0 forks source link

Add more info to tooltip #1

Closed cbirdsong closed 5 months ago

cbirdsong commented 5 months ago

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.

cbirdsong commented 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;

}
Charlie-Henry commented 5 months ago

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.

Here's cityNerd's methodology for the first component