Os butiás saltaram um a um dos bolsos do gaudério! Ao abrir a porta, avistou a praia de Mostardas e o Rio Grande a afastar-se. Desta vez, o piá fora longe demais!
Algumas semanas depois, mesmo sob os protestos do prefeito e das ligações constantes ao Palácio do Piratini e ao Palácio da Alvorada, o Alegrete continuava à deriva. Embretado entre a França e a Inglaterra, todos acharam que nunca mais veriam o céu celeste sobre o campo.
Mas, como o leitor já deve ter percebido, essa história não está limitada pela realidade física. Nos dias que se seguiram, o Alegrete despertou-se nos lugares menos esperados.
O código dessa brincadeira é simples, como se pode ver abaixo. Entretanto, as coordenadas ocupam muito espaço. Então, se alguém quiser replicar o experimento com seu próprio município, basta pedi-las!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
div { float: left }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var coordenadas=[...];
function getCoords() {
var coords=new Array();
var bounds = new google.maps.LatLngBounds();
for(var i=0; i<coordenadas.length; i+=2) {
var c=new google.maps.LatLng(-coordenadas[i+1],-coordenadas[i]);
coords.push(c);
bounds.extend(c);
}
coords.bounds=bounds;
coords.center=bounds.getCenter();
return coords;
}
var lat=-29.7640;
var lng=-55.8861;
function init() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 6,
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var alegrete = new google.maps.Polygon({paths: getCoords(),
strokeColor: '#000000', strokeWeight: 1, strokeOpacity: 1,
fillColor: '#00AA00', fillOpacity: 0.4, clickable: false });
alegrete.setMap(map);
google.maps.event.addListener(map, 'center_changed', function() {
var point=map.getCenter();
alegrete.setMap(null);
var path=alegrete.getPath();
path.forEach(function(p,i) {
path.setAt(i, new google.maps.LatLng(p.lat()-(lat-point.lat()),
p.lng()-(lng-point.lng())));
});
lat=point.lat();
lng=point.lng();
alegrete.setPath(path);
alegrete.setMap(map);
});
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:400px; height:400px"></div>
</body>
</html>
