Leaflet Canvas

by Justin Maat

HTML

<script src="http://www.sumbera.com/gist/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css">
<body>
    <div id="map"></div>
</body>

CSS

#map-region {
    height: 400px;
    width: 600px;
}
#map {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #333;
}

JavaScript

var points = data; // data loaded from data.js
var leafletMap = L.map('map').setView([50.00, 14.44], 9);
L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png")
  .addTo(leafletMap);

var debugLayer = L.gridLayer();

debugLayer.createTile = function(coords){
        // create a <canvas> element for drawing
        var tile = L.DomUtil.create('canvas', 'leaflet-tile');

        // setup tile width and height according to the options
        var size = this.getTileSize();
        tile.width = size.x;
        tile.height = size.y;

        // get a canvas context and draw something on it using coords.x, coords.y and coords.z
        var context = tile.getContext('2d');

		context.beginPath();
		context.rect(0, 0, 256, 256);
		context.lineWidth = 2;
		context.strokeStyle = 'white';
		context.stroke();

		context.font="20px Arial";
		context.fillStyle = 'white';
		context.fillText(coords.x + " / " + coords.y + " / " + coords.z, 80, 140);
  // return the tile so it can be rendered on screen
  return tile;
}

debugLayer.addTo(leafletMap);