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>
No comments:
Post a Comment