summer4096 · August 29, 2015 14:10
diff --git a/fancyCanvas.js b/fancyCanvas.js
 L.tileLayer.fancyCanvas = function(url){
  var layer = L.tileLayer.canvas();
  layer.setUrl(url);

  var dataSource = function(x, y, z, done){
    var url = layer.getTileUrl({x: x, y: y, z: z});
    d3.json(url, done);
  };

  layer.data = function(fn){
    dataSource = fn;
    return layer;
  };

  var dataTransformer = function(d){return d};
  layer.transform = function(transformer){
    dataTransformer = transformer;
    return layer;
  };

  var renderer = function(context, d){
    console.error('No renderer specified, defaulting to black on black');
    context.fill();
    context.stroke();
  };

  layer.renderer = function(fn){
    renderer = fn;
    return layer;
  };

  layer.drawTile = function(canvas, tilePoint, zoom) {
    var context = canvas.getContext('2d');

    dataSource(tilePoint.x, tilePoint.y, zoom, function(err, data){
      data = dataTransformer(data);

      var tileOffset = {
        x: parseInt(d3.select(canvas).style('left').slice(0, -2)),
        y: parseInt(d3.select(canvas).style('top').slice(0, -2))
      };

      var projection = d3.geo.transform({
        point: function(y, x) {
          var point = map.latLngToLayerPoint(new L.LatLng(x, y));
          this.stream.point(point.x-tileOffset.x, point.y-tileOffset.y);
        }
      });

      var path = d3.geo.path()
        .projection(projection)
        .context(context);

      data.features.forEach(function(feature){
        context.beginPath();
        path(feature);
        context.closePath();
        renderer(context, feature, data);
      });
    });
  };

  return layer;
 };
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Canvas Layer!</title>
  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
  <link rel="stylesheet" type="text/css" href="main.css">
 </head>
 <body>

 <div id="map"></div>

 <script src="https://cdn.rawgit.com/jondavidjohn/hidpi-canvas-polyfill/master/dist/hidpi-canvas.js"></script>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <script src="http://d3js.org/d3.v3.js"></script>

 <script src="fancyCanvas.js"></script>
 <script src="layer.js"></script>
 </body>
 </html>
diff --git a/layer.js b/layer.js
 var map = L.map('map', {
  center: [39.9097,-97.7343],
  zoom: 4,
  minZoom: 3,
  maxZoom: 7
 });

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

 L.tileLayer.fancyCanvas('http://{s}.polymaps.appspot.com/state/{z}/{x}/{y}.json')
  .renderer(function(context, d){
    var hue = d.properties.name.split('').map(function(letter){
      return letter.charCodeAt(0);
    }).reduce(function(a, b){
      return a+b;
    })%360;

    var color = d3.hsl(hue, 0.8, 0.8).rgb();
    context.fillStyle = 'rgba('+color.r+','+color.g+','+color.b+',1)';
    context.lineWidth = 1;
    context.strokeStyle = '#000';
    context.fill();
    context.stroke();
  }).addTo(map);
diff --git a/main.css b/main.css
 html, body {
  height: 100%;
  padding: 0;
  margin: 0;
 }

 #map {
  width: 100%;
  height: 100%;
 }
	L.tileLayer.fancyCanvas = function(url){
	var layer = L.tileLayer.canvas();
	layer.setUrl(url);

	var dataSource = function(x, y, z, done){
	var url = layer.getTileUrl({x: x, y: y, z: z});
	d3.json(url, done);
	};

	layer.data = function(fn){
	dataSource = fn;
	return layer;
	};

	var dataTransformer = function(d){return d};
	layer.transform = function(transformer){
	dataTransformer = transformer;
	return layer;
	};

	var renderer = function(context, d){
	console.error('No renderer specified, defaulting to black on black');
	context.fill();
	context.stroke();
	};

	layer.renderer = function(fn){
	renderer = fn;
	return layer;
	};

	layer.drawTile = function(canvas, tilePoint, zoom) {
	var context = canvas.getContext('2d');

	dataSource(tilePoint.x, tilePoint.y, zoom, function(err, data){
	data = dataTransformer(data);

	var tileOffset = {
	x: parseInt(d3.select(canvas).style('left').slice(0, -2)),
	y: parseInt(d3.select(canvas).style('top').slice(0, -2))
	};

	var projection = d3.geo.transform({
	point: function(y, x) {
	var point = map.latLngToLayerPoint(new L.LatLng(x, y));
	this.stream.point(point.x-tileOffset.x, point.y-tileOffset.y);
	}
	});

	var path = d3.geo.path()
	.projection(projection)
	.context(context);

	data.features.forEach(function(feature){
	context.beginPath();
	path(feature);
	context.closePath();
	renderer(context, feature, data);
	});
	});
	};

	return layer;
	};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Canvas Layer!</title>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
	<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>

	<div id="map"></div>

	<script src="https://cdn.rawgit.com/jondavidjohn/hidpi-canvas-polyfill/master/dist/hidpi-canvas.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="http://d3js.org/d3.v3.js"></script>

	<script src="fancyCanvas.js"></script>
	<script src="layer.js"></script>
	</body>
	</html>
	var map = L.map('map', {
	center: [39.9097,-97.7343],
	zoom: 4,
	minZoom: 3,
	maxZoom: 7
	});

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

	L.tileLayer.fancyCanvas('http://{s}.polymaps.appspot.com/state/{z}/{x}/{y}.json')
	.renderer(function(context, d){
	var hue = d.properties.name.split('').map(function(letter){
	return letter.charCodeAt(0);
	}).reduce(function(a, b){
	return a+b;
	})%360;

	var color = d3.hsl(hue, 0.8, 0.8).rgb();
	context.fillStyle = 'rgba('+color.r+','+color.g+','+color.b+',1)';
	context.lineWidth = 1;
	context.strokeStyle = '#000';
	context.fill();
	context.stroke();
	}).addTo(map);
	html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	#map {
	width: 100%;
	height: 100%;
	}