I spent the better part of a week or so adding support for polylines into Flagship Geo.  The hard part wasn’t the data structure development, it was the ability to easily edit the lines in a way that made sense.

Google Maps works as a great User Interface control for maps, but its just a control.  You have to tell it what to do when someone drags a marker around or clicks on the map, there is no automatic way to tell it that the person is trying to edit the line.  All the objects people can interact with need event handlers written for them, which reminds me a lot of regular desktop application development.  I usually take for granted the fact that a tag like <a href=”#”></a> will automatically know what to do when clicked.  Tools like jQuery make it easily to build on those actions, sending that a href into a AJAX library or something.  Building the polyline editing interface was much more like building a desktop application in C, Python, or alike where you have to bind everything yourself.

Looking back on the past week, the hardest part was the ability to delete a point from your line.  This kind of reminded me of my days in Data Structures or Algorithms at RPI when you’re manipulating nodes in a tree or a list (a polyline is just an array of latitudes & longitudes) except unlike C, JavaScript doesn’t have any notion of pointers.

I got stuck trying to do have my markers (the icons you drag to manipulate the map) both update the visual line you see AND update the hidden HTML fields that store the latitudes and longitude for the point.  I found that replacing the event listeners with code that contained the update line point weren’t working correctly, so I ended up building my own pointer-esque data structure that contains id numbers to match up markers, polyline points, and html points.  While I try and minimize my use of global arrays, I couldn’t find any decent way around JavaScript’s (and Google Maps event listener) limitations.

You can take a look at the commit where most of this code was sent along here: http://github.com/bamnet/flagship_geo/commit/f2e8e113bcaef2a78573d8f5569e10f18bc8de4a