SVG Trace: PaperJS on Google Maps API

Image

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

2 thoughts on “SVG Trace: PaperJS on Google Maps API

  1. Pingback: GoogleBig » Archive » Tracing Countries on Google Maps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s