chelm/JS decoder & mapping

## JS decoder & mapping
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="polymaps.js"></script>
  <script type="text/javascript">

    function decodeLine (encoded) {
      var len = encoded.length;
      var index = 0;
      var array = [];
      var lat = 0;
      var lng = 0;

      while (index < len) {
        var b;
        var shift = 0;
        var result = 0;
        do {
          b = encoded.charCodeAt(index++) - 63;
          result |= (b & 0x1f) << shift;
          shift += 5;
        } while (b >= 0x20);

        var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
        lat += dlat;

        shift = 0;
        result = 0;
        do {
          b = encoded.charCodeAt(index++) - 63;
          result |= (b & 0x1f) << shift;
          shift += 5;
        } while (b >= 0x20);
        var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
        lng += dlng;

        array.push([lng * 1e-5, lat * 1e-5]);
    }
    return array;
  }

  features = [];

  function get(){
    var id   = $('#id').val();
    var zoom = $('#zoom').val();

    var url = 'http://geoiq.local/overlays/'+id+'.json?include_geometry=1&encode_geometry=1&hex_geometry=0';
    $.getJSON(url, function(data){
      console.log(data);
      for (var i=0; i < data.features.length; i++){
        geom = data.features[i].geometry;
        if (geom){
          geoms = geom.split(' ');
          if (geoms.length){
            for (j = 0; j < geoms.length; j++){
              d = { "geometry": { "coordinates": [[ decodeLine(geoms[j]) ]], "type": "MultiPolygon"}}
              console.log(c, d);
              features.push(d);
            }
          } else {
            c = { "geometry": { "coordinates": [[[ decodeLine(geom) ]]], "type": "MultiPolygon"}}
            features.push(c);
          }
        }
      }
      loadMap();
    });
  }


  $(function(){
    po = org.polymaps;

    map = po.map()
    .container(document.getElementById('map').appendChild(po.svg("svg")))
    .center({lat: 39.787, lon: -95.228})
    .zoom(4)
    .add(po.interact());

    map.add(po.image()
    .url(po.url("http://{S}tile.cloudmade.com"
    + "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
    + "/998/256/{Z}/{X}/{Y}.png")
    .hosts(["a.", "b.", "c.", ""])));

  });


  function loadMap(){
    console.log(features);
    map.add(po.geoJson()
      .features(features).on('load',load));
  }

  function load(e){
    console.log(e);
    for (var i = 0; i < e.features.length; i++) {
      var feature = e.features[i];
      feature.element.setAttribute("stroke", "#00F");
      feature.element.setAttribute("fill", "#F00");
    }
  }
  </script>
</head>
<body>
  ID: <input type="text" id="id" value="7"/>
  <button onclick="get()">Fetch</button>
  <br/>
  <div id="map" style="border:4px solid #DDDDDD; width:750px; height:500px;"></div>
</body>
</html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="polymaps.js"></script>
	<script type="text/javascript">

	function decodeLine (encoded) {
	var len = encoded.length;
	var index = 0;
	var array = [];
	var lat = 0;
	var lng = 0;

	while (index < len) {
	var b;
	var shift = 0;
	var result = 0;
	do {
	b = encoded.charCodeAt(index++) - 63;
	result \|= (b & 0x1f) << shift;
	shift += 5;
	} while (b >= 0x20);

	var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
	lat += dlat;

	shift = 0;
	result = 0;
	do {
	b = encoded.charCodeAt(index++) - 63;
	result \|= (b & 0x1f) << shift;
	shift += 5;
	} while (b >= 0x20);
	var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
	lng += dlng;

	array.push([lng * 1e-5, lat * 1e-5]);
	}
	return array;
	}

	features = [];

	function get(){
	var id = $('#id').val();
	var zoom = $('#zoom').val();

	var url = 'http://geoiq.local/overlays/'+id+'.json?include_geometry=1&encode_geometry=1&hex_geometry=0';
	$.getJSON(url, function(data){
	console.log(data);
	for (var i=0; i < data.features.length; i++){
	geom = data.features[i].geometry;
	if (geom){
	geoms = geom.split(' ');
	if (geoms.length){
	for (j = 0; j < geoms.length; j++){
	d = { "geometry": { "coordinates": [[ decodeLine(geoms[j]) ]], "type": "MultiPolygon"}}
	console.log(c, d);
	features.push(d);
	}
	} else {
	c = { "geometry": { "coordinates": [[[ decodeLine(geom) ]]], "type": "MultiPolygon"}}
	features.push(c);
	}
	}
	}
	loadMap();
	});
	}


	$(function(){
	po = org.polymaps;

	map = po.map()
	.container(document.getElementById('map').appendChild(po.svg("svg")))
	.center({lat: 39.787, lon: -95.228})
	.zoom(4)
	.add(po.interact());

	map.add(po.image()
	.url(po.url("http://{S}tile.cloudmade.com"
	+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
	+ "/998/256/{Z}/{X}/{Y}.png")
	.hosts(["a.", "b.", "c.", ""])));

	});


	function loadMap(){
	console.log(features);
	map.add(po.geoJson()
	.features(features).on('load',load));
	}

	function load(e){
	console.log(e);
	for (var i = 0; i < e.features.length; i++) {
	var feature = e.features[i];
	feature.element.setAttribute("stroke", "#00F");
	feature.element.setAttribute("fill", "#F00");
	}
	}
	</script>
	</head>
	<body>
	ID: <input type="text" id="id" value="7"/>
	<button onclick="get()">Fetch</button>
	<br/>
	<div id="map" style="border:4px solid #DDDDDD; width:750px; height:500px;"></div>
	</body>
	</html>