Web mapping and SVG effects

Recently, SVG has been increasingly used in the front-end, here and there, well-known developers write good articles on their blogs. In general, SVG seems to be finally starting to occupy well-deserved positions in the technology stack of a modern web developer. So today I propose to talk about how you can use SVG in web mapping. We’ll look at how you can use the capabilities of SVG and the properties migrated from it to CSS to achieve various visual effects. We will use Leaflet and sometimes D3 , but nothing prevents us from using other libraries. Filters, patterns and other effects are waiting for you under the cut.

Excuses

The article will mention all kinds of effects and techniques available to us in SVG, I will not dwell on their implementation in detail, assuming that you are already familiar with them or want to learn after reading this article. For these purposes, I recommend you the following selection of articles: A Compendium of SVG Information . The code for all examples is available on GitHub and through bl.ocks.org , and is even accompanied by a few comments. But if there are any questions, ask, I will try to answer them. So, let's begin.

Vector layers

We can work directly with SVG-objects of the map vector layer and markers (if they are specified by the vector) and use the effects available to us in SVG, any, directly.

Filters - the possibilities of SVG filters are truly grandiose, although it’s quite difficult to find practical application for them on maps, but such an effect as blurring can be very useful. To deal with filters, I advise you to look here: Smarter SVG filters .

Patterns , they can be added to any polygons (by the way, you can also use a pattern for a mask). And yes, I am aware that TileMillit can, but there the patterns are set by a picture, with all that it implies. In our case, we can set them programmatically, and again, all this can be animated. You can try different options in this demo: web maps and animated SVG patterns . In the above demo, pattern animation is implemented using JavaScript (D3).

Raster layers

Today, some effects from SVG migrated to CSS, so we can use them for raster layers, but here we need to carefully look at the degree of browser support.

CSS filters . You can use the functions, but for now it’s better to limit yourself to links to SVG filters, the degree of browser support: CSS Filter Effects . As an example, such an elementary thing as a grayscale filter will allow you to get rid of an extra raster layer or redraw using canvas (the Grayscale plugin from Zverik ), which is not bad in itself. It’s also a simple opportunity to tweak the map style, without having to deal with cartoCSS and especially Mapnik .

Clipping andmaskingthey allow us to combine several raster layers of the map in the necessary way, which can be very convenient, given the fact that we can easily control the borders of the crop and even animate it, as well as control transparency. Here, some may argue that all this pampering and no one needs, because no one does. In general, ordinary translucent polygons on top of tiles are enough to indicate a certain area. Here I do not agree with you. Firstly, by imposing translucent polygons, we break the color scheme (coding) of the map and “obscure” the geo-information contained on our raster layer, as a result the map becomes less readable, but if we restrict ourselves to marking the border, it can be quite difficult to distinguish some objects against the background of others, especially if there are several categories.
But in any case, we must proceed from a specific task, but for now we will just keep in mind that this is possible. True, there is a fly in the ointment, not everything works as it should and not everywhere. Firefox is the best place, webkit-based browsers are worse: there are more bugs and more modest possibilities (masks work only with full-fledged .svg files). IE, well, there’s nothing to even say, or rather, nothing.
I’ll use the solar terminator as an example ; here clipping is used to achieve the corresponding visual effect. Currently, in webkit-based browsers, the picture does not change when updating clip-path data. And when updating the cropped image, it is first shown completely and only then as it should. In firefox, the flight is normal. Here is a demo with the ability to set polygons yourself:Dynamic tiles clipping .



Here, in order to get the data, clipPathwe use the reprojection function, thus linking Leaflet and D3:

//Convert Leaflet geometries to D3 geometries
function projectPoint(x, y) {
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));
	this.stream.point(point.x, point.y);
};
//Initialize SVG layer in Leaflet (works for leaflet-0.7.3)
map._initPathRoot()
var transform = d3.geo.transform({point: projectPoint}),
	path = d3.geo.path().projection(transform);

In this case, this was not necessary, because you could get the data directly, using layer._pathfor each of the vector layers. But on the other hand, the approach used demonstrates how to connect geodata in Leaflet and D3.
Masks can be used in a similar way, however, at the moment, SVG masks work only in firefox. In webkit-based browsers, you need to use a black and white image as a mask. Demo for firefox: Dynamic tiles masking .

Lighting effects . In SVG, it is possible to use various lighting effects, using them, we can create overlay with hillshading based on altitude data, I did not do this, but maybe someone will be interested ...

Markers

And again SVG. First, we can animate the markers themselves: Simple animated marker . Secondly, you can create an animation of marker movement on the map using movement along the element path, for example, my article on this topic: Animation of the SVG path element , since then a lot of other articles have appeared on the network. Leaflet also has a separate plugin for this business: Animated Marker .

Future is coming

I hope that after reading this article you will more actively use SVG and other features of modern browsers in your projects. And just the other day, the guys from MapBox rolled out a new tool for rendering vector images - MapBox GL , so everything goes to the point that soon it will be possible to make full-fledged animation.



And in the next version of Leaflet (0.8), the integration of custom layers should be improved (remember D3), in general, if things go on like that, then soon cartographic cartoons can be done =)

That's all, thanks for your attention and Good luck everyone.