Implementation possibilities

Cases:

• Rendering map tiles for use in Leaflet. i.e. given x, y, zoom
• Rendering static map images of arbitrary size for embedding/external uses; e.g. Walking Papers
• Rasterizer for UTFGrid generator
• Potential shared rendering code between client and server (can be run on either in different cases)

Best scenario we make it modular so that it asks for all the geodata within a particular bounding-box and it doesn't care whether that comes from Postgis, mongo, or even just all the points from a shapefile. In other words, it shouldn't fail if we give objects outside the bounding box but we might not want to spend much time optimizing the data that is passed in.

It just needs a hook to be able to ask your application code what geometries you want to render. The naive implementation (our demo) just returns everything in that hook. In a real situation, you'd have it all in a spatial DB anyway; this hook is where you'd do your query.

Arguments/Object methods:

• Configuration:
  • Function that returns the features/geometries for a given bounding box
  • Function that returns the style(s) for a given geometry---we need this for both aesthetics and UTFGrid rasterizer
  • Transform function/setting
• Render function: (x, y, zoom, width in px, height in px) OR (bounding box, width in px, height in px) that returns the image/png

Things to ignore for now:

• RTL/BIDI text rendering
• Projection (but it probably won't be hard to integrate proj4.js in the future)
• Rendering only the shapes in view (in many cases, there'll be a database involved; let's leave it to the caller to query appropriately)
• Fonts (although we do need to address them at some point—what does node-canvas already give us?)

Interface example

app.get('/tiles/:zoom/:col/:row', function tile(req, res) {

  var mapTile = new MapTile({
    x: req.params.col,
    y: req.params.row,
    scale: Math.pow(2, req.params.zoom);
    size : [256, 256], //width and height in pixels
    features: function(x, y, scale) {
      return layers;
    },
    style: function(feature, x, y, scale) { // x & y may be unnecessary args, but scale is useful
      return {
        fillStyle : "#ff000",
        strokeStyle : "#00ff00",
        lineWidth : 5.0 / scale
      };
  });

  mapTile.render(function(err, canvas) {
    var stream = canvas.createPNGStream();
    stream.pipe(res);
  };
});