Animation of filtering markers in Yandex Maps API

The latest version of the Yandex Maps API is all good. But there is no limit to perfection. I wanted to filter objects on the map via fade.
Let's see if this is possible.


The task is to filter one or more objects on the map, hiding the rest with the effect. For example, with increasing transparency.
We start to dig.
Access to DOM elements of markers, like other geo objects, is absent in the API. That, in general, is correct. Depending on the browser and the way geo objects are displayed, this can be either a few nested DOM elements or a picture drawn on the canvas.
Digging deeper. What we have is, where can we get a DOM element to later assign it a css class with transition and opacity?
Here it is - the pane property in options for a geoobject.
Each geoobject has a layer (pane) to which it is displayed.
Let's see what layers there are:

'ground': pane.MovablePane (zIndex: 100) - the lowest bottom to accommodate the map substrate;
'areas': pane.MovablePane (zIndex: 200) —Pain of polygon objects, such as polygons;
'shadows': pane.MovablePane (zIndex: 300) - payne shadows of map objects that are higher;
'places': pane.MovablePane (zIndex: 400) - payne point objects, such as labels;
'events': pane.EventsPane (zIndex: 500) - the payne, intended for listening to map events;
'overlaps': pane.MovablePane (zIndex: 600) - Payne for objects that do not require, the use of active areas to implement their interactivity;
'balloon': pane.MovablePane (zIndex: 700) - balun pein;
'outerBalloon': pane.MovablePane (zIndex: 800) - external paleun balun;
'controls': pane.StaticPane (zIndex: 900) - map controls;
'copyrights': pane.StaticPane (zIndex: 1000) - Pein copyrights;
'hint': pane.StaticPane (zIndex: 1100) - Payne hint;
'outerHint': pane.StaticPane (zIndex: 1200) - external paint hint.

Now we are interested in the places layer
There is also a layer of shadows and areas. So, if we have objects with shadows or polygons, we will have to work with them.
But now we are interested in the principle itself.
Each layer has a property getElement (), which gives us access to the DOM element.
Let's add another layer to the map.

var selectedPane = new ymaps.pane.MovablePane(myMap, { zIndex: 420}), myMap.panes.append('selected', selectedPane); 

Now, add the styles

 .hiding ymaps { transition: opacity 1s; } .hidden ymaps { opacity: 0; } 

Now we can set our main layer, to which labels are displayed, css-class

 var placesPane = myMap.panes.get('places').getElement(); $(placesPane).addClass('hiding'); 

Fine! Now, if we set the css-class hiding and hidden to our main layer, we get the damping effect in 1 second!
It remains to make sure that the selected (filtered) markers do not disappear together in the rest.
And for this we have a new layer selectedPane !
Moving our tags to selectedPane

 myPlaceMark.options.set('pane', 'selected'); 

And set the layer with the other labels css-class hidden.

 var placesPane = myMap.panes.get('places').getElement(); $(placesPane).addClass('hidden'); 

Oh yeah! Everything fades nicely.

In a fidle, tags are filtered by clicking on a tag and are returned back in a second.
The same can be done with collections, filters, etc.
You can add other effects.
For example, you can specify transform elements (translate (@x, @y)) with random coordinates outside the viewport — then the labels will “scatter” when filtered. The scope for fantasy is huge here.

Hope this was helpful.