alulsh/family-tree-map

Map your family tree from a GEDCOM file.

family-tree-map's Issues

Automatically deploy to GitHub Pages on commits to main

Right now, to deploy this project to GitHub Pages you have to manually run npm run build then npm run deploy from your machine. While this is easy, it's possible you could forget to update the deployment after pushing new changes to main.

GitHub has an action called Deploy to GitHub Pages that can be set up automatic deployments to GitHub Pages. We can set this up so that any new commits to main (or merged pull requests to main) trigger an automated build and deployment to GitHub Pages.

Filtering the data table should also filter map markers

jQuery Data Tables has a great built-in search feature. For example, I could search for all members of the Kennedy family from California:

Searching within the data table will not filter out the markers on the map though. In this case, it would be nice to only see the map markers for the California results.

To do the filter, we could listen for a data tables search event. We would then change the visibility to hidden for any map markers that are not in the search results. We can use the data-ids from #12 to link the results to map markers.

Add map style change control

It might be nice for people to change the style of the map, similar to https://docs.mapbox.com/mapbox-gl-js/example/setstyle/. Streets, light/dark, and satellite will probably be the most useful styles for genealogy research.

Geocode other types of location events

In addition to geocoding birth locations, we could geocode other types of location events supported in GEDCOM like immigration, emigration, marriage, residence, death, and burial.

A user could select multiple types of events to display. Each event type could show up as a separate layer with a different color for the markers. This would allow people to see all event types at once and compare different patterns for different event types.

jQuery DataTables console error - Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

When you initially load https://www.alexandraulsh.com/family-tree-map/ you see the following error in the browser console:

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
    at rt (jquery.dataTables.js:3140)
    at X (jquery.dataTables.js:2453)
    at HTMLTableRowElement.<anonymous> (jquery.dataTables.js:2481)
    at jquery.js:208
    at Function.map (jquery.js:463)
    at w.fn.init.map (jquery.js:207)
    at J (jquery.dataTables.js:2479)
    at N (jquery.dataTables.js:1281)
    at HTMLTableElement.<anonymous> (jquery.dataTables.js:1306)
    at Function.each (jquery.js:381)

The error has no effect on application functionality and you can load a GEDCOM file successfully.

Per https://stackoverflow.com/a/35928281, this error is likely happening because we initialize a blank empty table with only a thead with six table headers (th) and no td elements.

Adding a tbody with a table row and 6 tds does resolve the error:

<tbody>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</tbody>

Unfortunately, with the new table row, the DataTables search helper initializes twice, despite only intending to initialize DataTables once:

If you load a GEDCOM file, one table stays with 1 result. The other table processes the GEDCOM file, so it is likely that DataTables may be initialized twice.

Adjust sidebar width for 2560 × 1600 and smaller resolution

After selecting a family tree, the family tree results table is too wide for the sidebar on 2560 × 1600 resolution, the same as a Macbook Pro without an external monitor.

We should make the sidebar wider for 2560 × 1600 resolution or smaller to make the table easier to use when you're not using an external monitor.

Another option could be to make the text and padding smaller, but there is only so much wiggle room there before the data tables is unreadable. Moving the sidebar to the bottom or making the sidebar hideable are other ideas to consider as well.

_Default view on 2500 x 1600 Macbook Pro_

_Sidebar scrolled to the left to see the last column on 2500 x 1600 Macbook Pro_

Change the default geocoding language

Currently, calls to the Mapbox Geocoding API don't set the default language. The language is likely defaulting to English if not set. If your family tree includes a lot of place names in another language (e.g. France, Germany, Italy, etc.) then this may reduce the relevancy of your results.

You should be able to select a default language to improve the relevancy of your mapped results. The Mapbox Geocoding API supports multiple languages, so you could even provide multiple preferred geocoding languages. A package like https://github.com/sozialhelden/ietf-language-tags could validate the language codes you provide.

Display multiple family members for the same geocoded location

If you have multiple family members with the same geocoded location, then the map marker pop up will only display one random family member instead of multiple family members.

For example, the Kennedy family tree has 19 family members born in Boston, MA but the map marker pop up will only display one family member:

While this looks like a single map marker, it is actually 19 individual map markers with the same coordinates. The darker the shadow under the map marker, the more markers are on that coordinate.

One option is to display a table in each map marker, but this duplicates the table that already exists in the right sidebar. A better option is to link the map markers and the table. Clicking on the map marker would dynamically filter the results in the data table. One quick option is to search for the geocoded location in the table (similar to the screenshot above). A more robust solution is to add a custom data attribute for geocoded coordinates to each map marker and corresponding data table entry. Clicking on the map marker for a coordinate would then filter for all data table entries with the same coordinate.

Enable chronological sorting by birth date

Currently, the birth date column in the family tree table sorts alphabetically and not chronologically. For example, August 29, 1959 sorts before August 6, 1892.

According to the datatables documentation, we can enable chronological sorting through a data-order or data-sort attribute in the birth date td element.

We can set the data-order value to the Unix timestamp using dayjs().unix() for easy sorting.

Upgrade from [email protected] to [email protected]

This project currently uses parse-gedcom v1.0.5, which was recently renamed to gedcom for v2.

Gedcom v2 adds a new API method called compact that should simplify some of the existing parsing functions in family-tree.js.

Since this would only simplify the codebase instead of enabling new features, this is more a someday/maybe roadmap item.

Clicking the table should open a marker pop up

Right now the family tree jQuery Data Table and the map markers are not connected. It would be nice if clicking on a person in the table opened up their marker pop up and it zoomed in on the marker using flyTo.

To do this, we can generate an ID for each person and set a matching data-id attribute for each table row and map marker. Clicking on a person in the table will trigger the map marker with the same ID to pop up.

Enable filtering by birth year

Currently, you can filter map marker results by geocoding relevance. We should add a similar filter for birth year.

After parsing the family tree, we can grab the earliest year and latest year for the start and end values of the range. A user should be able to select two values - a start year and an end year.

Since the HTML5 range input only supports one value, we can use either noUiSlider or jQuery UI range slider.

We can add a custom data attribute called data-year for the filtering or reuse the Unix timestamp from #3.

Add a heatmap option

At high zoom levels (z0-z4ish), a lot of markers in one area is cluttered:

We can solve this by adding the option to display as a heatmap (https://docs.mapbox.com/mapbox-gl-js/example/heatmap-layer/). Just like in the example, we can display a circle layer at higher zoom levels so that you can still see specific birth locations.

I prefer heatmaps over clustering for this use case. With clusters you have to zoom in a lot to see the birth locations, which can be annoying and frustrating.

Add 3D terrain

It might be nice to add 3D terrain to the map using the code in https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/. 3D terrain is particularly helpful if you have a lot of ancestors in or near mountainous areas.

Add geocoding rate limiting

The Mapbox Geocoding API has a rate limit of 600 requests per minute. Currently, if you load a large enough family tree you may hit the rate limit and receive an error in the browser console. We should make this error message more user friendly via a modal.

We should also implement a client-side library like https://github.com/jhurliman/node-rate-limiter to help throttle API requests and prevent rate limit errors from happening in the first place.