Fusion Tables layer URL request limit (2048 chars)

Question

I'm using Google Maps to highlight a bunch of countries using Fusion Tables to grab the geometry. You can see an example of this here:

http://jsfiddle.net/4mtyu/689/

var layer = new google.maps.FusionTablesLayer({
  query: {
    select: locationColumn,
    from: tableId,
    where: "ISO_2DIGIT IN ('AF','AL','DZ','AD','AO','AG','AR','AM','AU','AT','AZ','BS','BH','BD','BB','BY','BE','BZ','BJ','BT','BO','BA','BW','BR','BN','BG','BF','BI','KH','CM','CA','CV','CF','TD','CL','CN','CO','KM','CG','CD','CR','HR','CU','CY','CZ','DK','DJ','DM','DO','EC','EG','SV','GQ','ER','EE','ET','FJ','FI','FR','GA','GM','GE','DE','GH','GR','GD','GT','GN','GW','GY','HT','HN','HU','IS','IN','ID','CI','IR','IQ','IE','IL')"
  },
  options : {suppressInfoWindows:true},
  styles: [{
    polygonOptions: {
      fillColor: "#000000",
      strokeWeight: "0",
      fillOpacity: 0.4
    }
  }]
});

The problems begin when I try to grab too many items from the table. Google uses a URL with all of the query values to grab the data required and with URL encoding it can grow to be quite large in length.

You can see an example of the URL here if you open up the console and check the URLs being thrown in the errors:

http://jsfiddle.net/4mtyu/690/

The URL it generates in that particular example is 3749 characters, way over the 2048 character limit.

Does anybody have any ideas on a way I could prevent the URL from getting this large but at the same time still be able to select 150+ items?

Answer 1

The easiest solution is to move things client-side: http://jsfiddle.net/4mtyu/725/

---

Part 1 :: Initialize the map and fusion tables

You can do this how ever you prefer, just make sure the fusion tables have all countries selected. Example:

function initialize() {
    //settings
    var myOptions = {
      zoom: 2,
      center: new google.maps.LatLng(10, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //get map div
    map = new google.maps.Map(document.getElementById('map_div'),
        myOptions);

    // Initialize padded JSON request
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');

    //select all the countries!! 
    var query = 'SELECT name, kml_4326 FROM ' +
        '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
    var encodedQuery = encodeURIComponent(query);

    //generate URL 
    url.push(encodedQuery);
    url.push('&callback=drawMap');//Callback
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');//select all countries
    script.src = url.join('');

    //Add Script to document
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);
  }

Part 2 :: Sort countries and render

• (a) Once you have the full list of countries, you have to sort them. A simple indexOf check should do the trick.

• (b) After sorting we need turn our countries into LatLon Coordinates, this is done in the constructNewCoordinates function (see below)

• (c) Then all that's left is to generate the polygon and add it to our map!

Example:

var countries = [...];

//This is the callback from the above function
function drawMap(data) {
    //Get the countries 
    var rows = data['rows'];


    for (var i in rows) {
      // (a) //
      //If the country matches our filled countries array
      if (countries.indexOf(rows[i][0]) !== -1)

        var newCoordinates = [];

        // (b) //
        // Generate geometries and
        // Check for multi geometry countries 
        var geometries = rows[i][1]['geometries'];
        if (geometries) {
          for (var j in geometries) {
            //Calls our render function, returns Polygon Coordinates (see last step);
            newCoordinates.push(constructNewCoordinates(geometries[j]));
          }
        } else {
          //Calls our render function, returns Polygon Coordinates (see last step);
          newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
        }

        // (c) //
        //Generate Polygon
        var country = new google.maps.Polygon({
          paths: newCoordinates,
          strokeWeight: 0,
          fillColor: '#000000',
          fillOpacity: 0.3
        });


       //add polygon to map
        country.setMap(map);
      }
    }
  }
}

Part 3 :: Generating the coordinates

// (b) //
function constructNewCoordinates(polygon) {
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for (var i in coordinates) {
      newCoordinates.push(
          new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
    }
    return newCoordinates;
  }