Clip Map Images on Text Background

I was looking at my clipping map tiles example where I clipped some imagery behind a word created with GeoJSON paths and wondered if I could just use a normal font which would clip a photo using css background URL attribute. It would be cool to see how map tiles can be rendered as CANVAS tiles, combined into a single canvas, converted into an image, and then applied in a CSS background attribute to clip imagery behind text. Instead of converting text to GeoJSON paths, I want to make an online tool that does all the magic for me with regular text, CSS, and CANVAS.

First, let’s render Map Tiles as CANVAS tiles with Leaflet. This was pretty straightforward since Leaflet already has a L.TileLayer.Canvas() method that renders each tile as a CANVAS object instead of an image. This would be useful if you wanted to apply some image effect to the map tile, maybe render the map in black and white. What about combining all the map tiles into one giant image? This is helpful if you want to print a map based on map tiles and it is also necessary for our purpose of placing a map image behind text.

There are a few ways of accomplishing this and I used the Leaflet tileload event to grab each tile image and draw it into a single CANVAS object. Also, this is just a few lines of code, check out the Leaflet map on a CANVAS object. While the example works on load, it does not update the new image tiles on the CANVAS element when you move the map. For that, we need to set unloadInvisibleTiles to true and retrieve positioning of tiles from the Leaflet mapPane object.

In terms of using an image as a text background with font css attributes, we need to utilize the -webkit-canvas and -webkit-background-clip attributes. To put it all together, I created a form where you can enter any text, choose a font, select a font size, and move the Leaflet Map which automatically re-creates a canvas object from the map tiles and clips it into the background of a font. Here is the text with map tiles background generator.