My Inkscape Work

Monday, 11 July 2011

Coding summary to have basic KML-to-SVG working

***********Summary***********

Some key questions have been answered:

· XSLT can do the job for KML to SVG conversion

· Math can be done in XSLT, e.g. round, divide, math:log, math:tan, min, max and so on.

Some challenges:

It is difficult to implement algorithms in XSLT. Variable and passing is not so clear to deal with. XSLT notations are difficult to understand. Sometimes it takes a long time to write 100 lines of code.

Tasks to do:

Fix the loops and coordinates importing for more KML objects. Currently, it can handle lineString object (some other objects seem very similar).

What I have done to get the basic conversion working.

1. Read a lot of source code in Inkscape

2. Read a lot of materials on XSLT and transformation

3. I have written code for between 20 and 30 examples for practice in the tutorials: http://www.java2s.com/Tutorial/XML/0100__XSLT-stylesheet/Catalog0100__XSLT-stylesheet.htm

5. The online kml2svg is good resources. I had email discussion and questions with kml2svg author. He shared useful information. He is willing to share his work to Inkscape, saying he made kml2svg mainly because Inkscape does not have this feature.

6. I tried the online kml2svg approach too, without using XSLT. I tried reading and parsing the KML file and loop through the elements and attributes. It is very difficult to do that in Inkscape.

7. I broke Inkscape build and had crashes for several times.

Mercator projection to convert longitude and latitude

Online KML viewer:
http://display-kml.appspot.com/

Useful links:
http://code.google.com/intl/fr/apis/kml/documentation/kmlreference.html
http://mathworld.wolfram.com/MapProjection.html

Thanks the author of online kml2svg tool (http://kml2svg.free.fr/index.php), Franklin, the conversion between KML and SVG is:

need to convert a earth coordinate (lattitude/longitude) into a screen position (x/y).

Mercator projection:
    // λ = longitude
    // φ = latitude
    φ = deg2rad (φ );
    λ = deg2rad (λ );
    x = λ;
    y = -log ( tan (pi() / 4 + φ / 2) , 2.718282 );

Some formulas are much more complex, some needs input references grids, etc. Mercator and Lambert projections are relatively simpler.

Working through conversion from KML to SVG using XSLT - Steps break-down

This post describes each step to convert the original KML file, s1-Coords.kml, to the result SVG file, s4-path.xml.svg. Each step has an intermediate file. (Intermediate files are useful for the testing stage, so that the algorithm can build up from small. At the end, the best would be only saving the END result.)

Start with the original file:

s1-Coords.kml
****************************************************************

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<Folder>
<name>monde</name>
<open>1</open>
<Placemark>
<name>Sans titre - Trajet</name>
<styleUrl>#msn_ylw-pushpin00</styleUrl>
<LineString>
<tessellate>1</tessellate>
<coordinates>
2.328735169173783,50.99098347661589,0 1.939879599846932,50.95290354479823,0 6.07608623537034,46.38762461012988,0 6.102492885944002,46.5201900839377,0 6.356917438465915,49.47921006175431,0 4.176723982212366,50.03964519363036,0 2.464975417093001,51.00349748471994,0 </coordinates>
</LineString>
</Placemark>
</Folder>

</Document>
</kml>

****************************************************************

Step 1: Extract all coordinates and split them to be point by point

s1-Coords.xml

****************************************************************

<?xml version="1.0" encoding="UTF-8"?>

<point>

2.328735169173783,50.99098347661589,0</point>

</coords>

****************************************************************

Step 2: Split coordinates in each point to be longitude and latitude.

Delete 0s, as svg is 2D. (Later, may keep the Zs for 3D objects in KML, but only parse 2D coordinates to SVG)

s2-Coords.xml

****************************************************************

<?xml version="1.0" encoding="UTF-8"?>

<point>

2.328735169173783</longitude>

</point>

<point>

</point>

<point>

</point>

<point>

</point>

<point>

</point>

<point>

</point>

<point>

</point>

</coords>

****************************************************************

Step 3: Convert longitude and latitude to be x and y

s3-Coords.xml

****************************************************************

<?xml version="1.0" encoding="UTF-8"?>

<point>

</point>

<point>

</point>

<point>

</point>

<point>

</point>

<point>

</point>

<point>

</point>

<point>

</point>

</coords>

****************************************************************

Step 4: Form result SVG file.

Write x and y for each point in the above xml to the path object in SVG

s4-path.xml.svg

****************************************************************

<?xml version="1.0" encoding="UTF-8"?>

width="20"

height="20"

</svg>

****************************************************************

Working through conversion from KML to SVG using XSLT - Sample results

I am posting 3 figures to show the results so far.

The first figure is a screenshot of converted SVG file loaded in Inkscape. It is a simple path object.

The second figure shows a KML file with Asia and Africa map contours is converted SVG file loaded in Inkscape. It is a more complex path. Its transformation of latitude is not correct, although all KML coordinates (longitude and latitude) are converted to x and y values of SVG path objects.

The third figure shows correct latitude transformation. It is a SVG file converted from a the same KML as in the second figure, but using an online kml2svg converter. (http://kml2svg.free.fr/)

What I will do is to fix the latitude transformation.

I am adding one more figure as below. It is the original KML file viewed in Google Map.

Wednesday, 6 July 2011

How transformations can work with xslt

need to apply the transformations to the XY coordinates

looked at some kml and converted svg samples, done by other people.
the coordinates are not the same. and they did transformation for them.
The transformations need to be understood.

need Math on XSLT.

is math in xslt doable? If so, how can it be added?
if using Python, what part of the conversion work can be done by Python?
If you decide to use python, you will use lxml to read KML and write SVG, abstracting the XML notation. The math will be simple python expressions.

Math on XSLT

http://www.java2s.com/Tutorial/XML/0100__XSLT-stylesheet/Mathcalculation.htm

XSLT may suppot more math and more complex transformations

Try xslt and review sample code

try xslt and review sample code
aisvg.xslt

http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/share/extensions/aisvg.inx
http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/view/head:/share/extensions/aisvg.xslt

can convert kml to svg similar with aisvg.xslt

It may be easier with python

Understanding the logic behind the conversion using xslt
http://en.wikipedia.org/wiki/XSLT

xslt recognizes the pieces of a XML and output a text, and that may be other XML

need to recognize a direct translation between both that cam be made easily...

Extensions and dxf2svg example

Need to know about importing extensions.

dxf2svg in Inkscape is a relevant example to the kml2svg work.
http://bazaar.launchpad.net/~inkscape.dev/inkscape/trunk/files/head:/src/extension/dxf2svg/

kml2svg can have less code than dxf2svg.