Here at Sparkgeo, while we often prefer to provide answers over visualizations, we still make a lot of web maps. And when we do, we take pride in producing high-quality cartographic products. Cartography is a vast subject, encompassing everything from overall page design to the smallest detail in typography.
The representation of geographic features with symbols is a key component of cartography. We devote considerable time and attention to designing our symbols– including symbol choice, color, shape, size, displacement, and opacity, among other characteristics. We also decide how these attributes are set: in advance on the client’s server, or at runtime in the user’s browser. Both options can be time-consuming to create, especially if we want to apply different symbologies in different situations.
Wouldn’t it be nice if we could easily switch some aspects of symbology between user situations or, even better, apply visual processing to change the symbology across an entire map without much code at all? Well, these options exist in the form of CSS and SVG Filters, which is what we’re going to talk about today.
Filters
A web map exists within your browser as an HTML element, often found somewhere within a <div> element. The element’s contents are essentially rendered as an image, usually with no manipulation between the original source and the final output. The rendering happens quickly. Even while rapidly interacting with the map, we cannot display more than one set of pixels at once in each element.
CSS Filters
You can style HTML elements in various ways, but the best practice is to define styling through CSS, which provides many styling properties. Most notably, the filter property allows us to use predefined effects in the form of functions. This property enables us to insert instructions for manipulating pixels before rendering the final visual output.
For example, with the blur function, we can apply a blur effect to the contents of an element. We load the original content, then apply the function, and finally, render the output:
Fascinatingly, we can apply this CSS filtering technique to an element containing a fully interactive web map!
While CSS filters are interesting on their own, there are only a small number of available filter functions. On the other hand, there are infinite ways to manipulate a pixel before rendering by using custom SVG filter algorithms.
SVG Filters
Disclaimer: the remainder of this blog post deals with SVG filters, which are currently not supported by all common browsers, notably Safari.
SVG Filters are XML documents that define a custom filter using a chain of filter primitive elements. These elements perform basic graphical operations such as color replacement, image blending, and lighting operations. We can chain these operations together using named input (`in`) and output (`result`) attributes. Finally, we can reference the SVG filter in CSS through a url pointer (`filter: url(#filterChain);`).
In this example, we apply a Gaussian blur and then blend the blurred output with the original image:
I want to single out a particularly interesting filter primitive for the geospatially inclined, feConvolveMatrix. You may be familiar with convolution matrices in Convolutional Neural Networks, traditional Focal Statistics, or any other application implementing imagery enhancements like smoothing, sharpening, and edge detection (like ArcGIS’ Convolution function). All of these applications use the concept of applying convolutional matrices to pixels; for each pixel in the input image, perform some operation involving a moving kernel matrix.
There are many well-known kernels, and you can find various examples implemented in the app below. You can visit the map here.
As you may have noticed, throughout this blog post, we implemented SVG filters in both Leaflet and Mapbox web maps. One of the benefits of using SVG filters is its complete independence from your chosen mapping frameworks and even the content itself. You could apply any SVG filter to a piece of text, an image, or any other HTML element; you are limited only by your imagination!
CSS and SVG filters present an interesting opportunity to upgrade the look and feel of interactive web maps. We’re excited to see what new filters and map styles you invent. Get in touch with us if you want help implementing your own filters, and make sure you tag us on Twitter with your creations!
Mappy SVG Filter Inspirations: