Camille Hodoul

Convert KML Placemarks to SVG Polygons

April 11, 2017

Being easily confused by basic geometry, I tend to stick to 2D whevener possible.

Unfortunately, (in France at least) publicly available data on administrative divisions often comes in various geographic coordinates systems which, while convenient if you need to georeference something, make everything complicated when you just want to display a nice SVG map.

I hacked together a handy JavaScript tool to aleviate some of the pain involved for a product I was building.

If we abstract I/O, the whole process can be summarized to two steps: projection and simplification.

1. Projection

In order to convert KML placemark “polygons” to actual SVG Polygons, one must convert each points of said polygons.
Converting points from 3D space, such as a geographical coordinates system, to a 2D plane is called a projection.
Of course, there are many different projections and of course, if you listen to the internet, ALL of them are terrible for one reason or another.

For my experimentations though, I picked equirectangular and mercator.
The implementations can be found here.

2. Simplification

Our polygons are now properly flattened, but we can’t ship them to our users yet.
As the KML source files are too precise for our needs, so is our SVG output.

Fortunately, the field of geometry is full of interesting algorithms ready to solve our problems. Picking a simplification algorithm was as easy as 2 google searches:


Camille Hodoul

I'm a JavaScript and PHP developer living in Marseille, France.
Twitter, Github, Flickr