Playing with the HTML5 Drag and Drop API

So another thing that inspired me during Sean Maday's talk at Google's Geospatial Awareness Day was his demonstration of using HTML5's drag and drop API to load a KML file into a Google Earth API site. In that sample, he loaded the KML file. The JS then parsed the KML and read it into the plugin. I immediately thought about using it with Maps, and adding in a GroundOverlay. So I wrote a quick sample to do just that. Of course, it doesn't work on older browsers, but if you're using later versions of Chrome, FF, or Safari it works just fine. I haven't tested it on IE9.

The code owes a lot to Riyad Kalla's HTML5 Drag and Drop Upload and File API Tutorial. He does a good job of explaining the API, so I'll leave that part to his post. All mine does is put any image in a GroundOverlay on a map. Drag any image from your computer into the little space at the top and it'll show up in a pre-defined place on the map. Next-up I'll work on a way to stretch and position the image. I'm also thinking I'll try to pull out any positioning in the EXIF headers to make a guess about location.

I'm thinking this would be useful for image upload and positioning sites. Say I want users to place images of old maps or more recent satellite imagery. They could position it on the map and then upload it to my server. Of course this doesn't take care of proper georeferencing or projections. Thoughts for another project.

Here's my code for creating the GroundOverlay:

function handleReaderLoadEnd(evt) {

  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216,-74.213393),
    new google.maps.LatLng(40.765641,-74.139235));
  var oldmap = new google.maps.GroundOverlay(evt.target.result,
    imageBounds);
oldmap.setMap(map);
}