Generating a GeoJSON grid to be used with Leaflet

Question

I'm trying to wrap my head around the best approach for generating a map of a non-real world. I have a client that would like to create essentially a set of thousands of blocks that can be interacted with in the same way you can interact witha Leaflet map (http://leafletjs.com).

I understand how to use Leaflet and I think the best approach is to create a GeoJSON file of the blocks to be mapped out on a blank tileset, but I'm having trouble figuring out the best way to generate the GeoJSON file.

Here's a rough image of what I want to be able to display. The blocks would be zoomable and eventually form a much larger image as you zoom out. The blocks might be in the shape of a cat, but you could zoom in and hover over/click each block individually:

I've done this in the past for using a GeoJSON file to draw out states/countries, but I've always pulled those files from other sources. Any suggestions on how to go about generating these blocks / the GeoJSON file that builds the blocks?

Answer 1

To make a grid you can use a GeoJSON MultiPolygon http://wiki.geojson.org/GeoJSON_draft_version_6#MultiPolygon

For a non-real map (just image) I used the following code to generate the grid for Leaflet:

var countX = 10; //cells by x
var countY = 10; //cells by y
var cellWidth = mapWidth / countX;
var cellHeight = mapHeight / countY;

var coordinates = [],
    c = {x: 0, y: mapHeight}, //cursor
    //top-left/top-right/bottom-right/bottom-left
    tLx, tLy,   tRx, tRy,
    bRx, bRy,   bLx, bLy;

// build coordinates array, from top-left to bottom-right
// count by row
for(var iY = 0; iY < countY; iY++){
  // count by cell in row
  for(var iX = 0; iX < countX; iX++){
    tLx = bLx = c.x;
    tLy = tRy = c.y;
    tRx = bRx =c.x + cellWidth;
    bRy = bLy = c.y - cellHeight;
    var cell = [
      // top-left/top-right/bottom-right/bottom-left/top-left
      [tLx, tLy], [tRx, tRy], [bRx, bRy], [bLx, bLy], [tLx, tLy]
    ];
    coordinates.push(cell);
    // refresh cusror for cell
    c.x = c.x + cellWidth;
  }
  // refresh cursor for row
  c.x = 0;
  c.y = c.y - cellHeight;
}

var grid = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type:  'MultiPolygon',
        coordinates: [coordinates]
      }
    }
  ]
};
// add grid to map
L.geoJson(grid).addTo(map);

To bind events to each cell there is a great example in the documentation http://leafletjs.com/reference.html#geojson