Thursday, August 25, 2011

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);
}
Posted by Mano Marks at 5:03 PM 2 comments
Labels: , , ,

Wednesday, August 24, 2011

HTML5 Input Range for a slider

I was at Google's Geospatial Awareness Day today, and Sean Maday did a demo of the new HTML5 input type of range, and I had a palm on forehead moment. Regular readers of the blog know I'm slightly obsessed with sliders, so I came home tonight and did a quick sample using a demo I did in Mexico City at the Esto es Google event. The example uses a FusionTablesLayer to show polygons from Natural Earth Data showing the boundaries of the Mexican states, and colors them using the populations, as found on Wikipedia.

Here's the sample, and here's the code for this sample.

function initialize() {
 
    var center = new google.maps.LatLng(23.99170847335287, -102.6702973539042);
 
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: center,
      zoom: 5,
      mapTypeId: 'roadmap'
    });
 
    layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'Shape',
        from: '1231298'
      }
    });
    layer.setMap(map);
  }
    function showValue(newValue)
{
  document.getElementById("range").innerHTML=newValue;
   layer.setOptions({query:{
      select: 'Shape',
      from: '1231298',
      where:"'2010'>" + newValue
    }}
      );
}
  </script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="height:75%">
  </div> 
  <input type="range" min="600000" max="15000000" value="600000" step="100000" onchange="showValue(this.value)" />
<span id="range">600000</span>


Posted by Mano Marks at 8:40 PM 0 comments
Labels: , ,

Friday, August 12, 2011

Using gx:altitudeOffset to raise polygons during a KML Tour

During the keynote Tuesday at Esto es Google, I showed a demo in Google Earth demo. In the demo, Polygons showing the boundaries of the states of Mexico were raised to relative heights based on their population. The KML is uploaded here if you want to take a look. Basically, I got the boundaries from Natural Earth Data, and then wrote a quick Python script (it's not worth posting here) that helped me create a KML which updated, over 10.5 seconds, the altitudes of the polygons based on the population. I got the populations from Wikipedia. is a Google extension to KML that allows you to say "Hey, change the altitude of this whole polygon by X meters" without having to update each coordinate in the element. By specifying that the takes place over a period of time, you get a nice raising effect. And since they are extruded to the ground, you get a 3D bar chart effect. I also move the camera around so you can see different perspectives and polygons that might otherwise be hidden. I have 3% battery life, so I won't post a screenshot, but you can see if you open up the KML file and play the tour.
Posted by Mano Marks at 12:12 PM 0 comments
Labels: ,
Subscribe to: Posts (Atom)