SVG Trace: PaperJS on Google Maps API

Don’t ask me why I thought of doing this while laying awake last night, but I think it turned out pretty nicely. The steps involved are:

1. Add a line feature class to ArcMap. I had a polygon of Canadian provinces and used Feature to Line with a 20km tolerance, to simplify the line geometry.
2. Export to SVG
3. Upload the SVG to your web server.
4. You can figure the rest out from looking at the source code (Ctrl-U), except how I parsed the SVG file with PHP, which I accomplished like this (in PHP tags):

$xml_file_open = simplexml_load_file(“http://darrenwiens.net/svg/provs.svg “);
foreach($xml_file_open->g->g->children() as $child)
{
$trimmed_child = trim($child[d]);
echo “js_array.push(‘$trimmed_child’);\n”;
}

That’s it. If you feel inspired, you could make a cool geography guessing game with this (i.e. guess the country before the shape is finished drawing). Let me know if you do!

About these ads