Generate a map-like navigable family tree

In this post I will show you how to generate a navigable map of your family tree starting from an image of your tree. You can see an example of what you will obtain here.

cover

The problem

One of my hobbies during the free time is genealogy. I like doing research on my family and as a result of such activity I’m building a family tree.

When you start your genealogical research the family tree is small and easily printable or visualizable in a common size monitor. Often you like to share the results of your hard work with other family members, maybe using a web site were to show your beautiful tree.

If you’re lucky you start “collecting” more and more individuals, as consequence, the family tree grows and become an huge tree (or sometime what I call a forest). Putting that enormous image of the family tree in a web page starts to be problematic. First, the browser will have some difficulties loading such a big image, if not, in some cases, it crashes. Then the navigating would not be so easy, especially if you want to have a general idea of the tree or zoom in into an individual details.

Here the idea of make the tree navigable like a map. In this post I will try to show you the necessary steps to obtain such navigable tree map.

NOTE: All the instructions are for Ubuntu like distributions.

The solution idea

Have you never used Google Maps or other similar sites? Those sites lets you navigate big maps of continents, countries or cities in the browser simply dragging it with the mouse pointer.

How they make it possible? To make it simple, they split the huge image map into small pieces, called tiles. When you navigate an area of the huge big map the browser simply download and visualizes only the tiles for that area. This make the browser loading only a small part of the map. You can notice this mechanism when your internet connection is slow and you move fast in the map, you will see that the map is loaded by pieces.

You can also zoom in and out to different altitudes, this is done visualizing pieces from different “versions” of the map, a version with more or less details.

We will try to use the same mechanism for our tree. We will use a software to generate this pieces and to generate a demo web page where navigate our tree.

Obtaining the huge tree

Let’s start obtaining our family tree. You can produce it using a genealogical software or by hand, if you are brave enough.

I prefer to use Gramps and his Descendant tree report. The report tool produces a family tree starting from the active individual. The report can be saved in different formats, but only SVG for image types. I like to use the PDF format and then convert it to image.

For the post I’ve used the Royal92 gedcom file, that as the site says “Features the Kings and Queens of Europe, including Great Britain.”. The report has been generated from the individual Stewart Matthew (I1507) and saved as PDF. In order to obtain a tree with his natural dimension and not stretched I’ve checked the Resize Page to Fit Tree Size checkbox in Size tab. You can download the generated file here.

Finally I’ve converted the file using the convert command from ImageMagick:

The conversion produced an image of 5635×32466 pixels. You can download the image here.

Tools installation

In order to generate the map we need GDAL. It “is a translator library for raster and vector geospatial data formats“.

To install GDAL you need to add the GIS PPA repository to your source repositories:

Then install GDAL bin and GDAL python support:

Now test if everything is installed running:

It will reply with the version installed.

Navigable map generation

Now we are ready to generate our navigable family tree. To do so, we will use gdal2tiles.py. The tool takes an images as input and generates an HTML page, with all the necessary scripts, and the image tiles to make our tree navigable.

First create a destination folder:

Then run the tool:

The execution will requires a little bit showing a progress like this:

When it completes the generation, you can open the openlayers.html file create inside the mytree folder with the browser. You can navigate the map produced with the example family tree here.

You can tune the result with the tool options like the numbers of zoom level to produce or the resampling method. The produce map has a little border that appears when it is zoomed out, looks like the tool requires particular sizes for input image. More information here.

You can easily integrate the obtained map on your family site.

I hope you liked the proposed solution. Feel free to comment or add suggestion as post comment.

2 thoughts on “Generate a map-like navigable family tree

  1. Why do you want an image in the first place? It’s more easy to just use HTML with some Javascript to make navigating a big tree more managable, see for example https://www.genealogieonline.nl/en/stamboom-lambrechts-grensstreek-noord-brabant-antwerpen/stamboom/I7784/stambos.php

    An even better solution (for very large trees) would be a lazy-load solution, where you load a part of the tree (via REST calls delivering JSON) and when zooming or panning get the “next bit”.

    • I’ve proposed such solution targeting an user with medium computer skills and no development skills. Both your solutions, instead requires development skills, alternatively you have to find a ready to use software.
      I’ve looked around to find one but with no success. The only software I’ve found is the PHPGedView tree navigation. In PGV the tree is rendered dynamically and load by pieces. Of course it requires a PGV installation and, as I saw, it can’t be easily isolated. Feel free to add more software solutions if you know them.
      Furthermore, a similar solution requires that the user genealogical information are in a format that can be used by the software or requires the user to “insert it” in the software storage. Maybe he has already an image of his tree drawn by someone or using his preferred software.
      Finally the customization of the tree rendering, if not possible through software options, requires again development skills.

      On the other hand, from a technical POV, I agree with you, a solution with Javascript and dynamic generation of the tree based on data retrieved lazily from the server would be the best solution. The browser keeps only a really small set of information (smaller than the images) and renders the tree on demand. The tree would be also interactive, for example making the single individual clickable and opening a new page with the individual card (like the example you have linked).

      I don’t think the solution without lazy loading will be scalable because requires loading and parsing the entire information in a single step.

      I want also to highlight that the image solution, has a really easy installation, it is only a matter of copy the files. In addition you can navigate it offline and send the entire map to other people simply zipping it.

      In conclusion, both solutions have cons and pros. Which one to use depends on the user skills.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.