Family Tree Designs

This page was developed to display details of my family tree.
I'd researched my family tree using and became interested in alternative ways of displaying family trees. I wanted to come up with something that was automatically generated but visually pleasing at an overall and detail level. This site is the final result. I hope you like it.

If you have any comments then please contact me by email: Simon Murray

Using the site

Start by going to the Tree tab, where you can explore the family tree. Alternative layouts can be displayed using the Trees menu at the top.
Clicking on a person will display their details on the Details tab.
Clicking on a location anywhere on this tab will show the address on Google Maps. Or, use the Add To Map button to display all locations on the map.

Technical details on how the trees were created

My original tree is maintained at and then exported in GED format. This is imported into Excel which uses VBA macros and and Office freeform shapes to generate the trees, which are then tidied up manually.

Two different methods have been used to display them on this site:

As image files

These use Openlayers to give a Google-style zoom function. The Excel files are first converted to jpeg files. I do this by printing to pdf and then using Gimp to convert the files to images at various resolutions. Multiple versions can be created with varying amounts of detail for use at different zoom levels. Map tiles are then created using gdal2tiles which creates the final png files that can be displayed using Openlayers.
The links have to be added as a separate layer (as a GeoJSON file created from the original Excel).

As SVG files

These are created from Excel using VBA macros to convert from Office format to SVG. They are displayed on the site using the svg-pan-zoom javascript library. Although quicker to create, svg support differs between browsers and reduced text wrapping and font substitution support gives varying results.


These are the technologies and libraries used in creating this site


Click on a person in the tree tab to see further details.
To view a person's location on the map,
first select a person on the Tree tab,
then click on an address on the details tab