Tag Archives: SVG path

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!

Advertisements

Maps, missiles, and moving labels

Image

This is my second fear mongering post seemingly focused on 10,000km-range North Korean missiles (the first can be found here). I’m really not all that concerned about North Korean missiles in my day-to-day life. The real point of this post is that the web map (here) features animated SVG symbols that are (that is, appear to be) animated along circles, not simple polylines (they actually are polylines in the shape of geodesic circles). Also, notice that the “symbols” are in fact numbers, not simple shapes, which took a while to code, so I hope you enjoy them.

My First RaphaelJS Attempt

Image

A while ago I was enjoying PaperJS. It seemed like every time I searched for something to do with PaperJS, something else about RaphaelJS showed up. These two appear to be the major players in web drawing, at the moment. While PaperJS uses new technology (the HTML5 canvas element), RaphaelJS relies on SVG, making it compatible with older browsers (although apparently not with Android devices). The thing that I really like about RaphaelJS is that it’s very easy to export complex spatial shapes from ArcMap to SVG format, and use these shapes in a web drawing (I’m not sure of the easiest way to use a spatial shape in PaperJS). Here’s an example of mine, borrowed heavily from the RaphaelJS animation demos.

Update: FRI AGM Tour Route

Image

Above is an update on last month’s post, FRI AGM Tour Route. The new features include: a jQuery UI accordion control (for “Tour Information” and “What to Bring” sections) and a styled, animated bus symbol.