YMAPs JS API v3 очередность слоев на карте
В третьей версии АПИ при стандартном добавлении маркеров с балунами, открывающимися по клику, не могу установить очередность слоев. Нужно поднять слой popup над слоем маркеров.
Пробовала заменить стандартный new YMapDefaultFeaturesLayer({}) на добавление слоя через YMapLayer согласно документации, но получаю ошибку
this.map.addChild( new YMapLayer({ source: 'featureSource', type: 'features', zIndex: 2010, }) );
Код самого вызова карты
export async function mainMap({mapClass}) {
const mapContainer = document.querySelector(mapClass);
if(!mapContainer) return;
await ymaps3.ready;
const {YMapComplexEntity, YMap, YMapDefaultSchemeLayer, YMapLayer, YMapDefaultFeaturesLayer, YMapMarker} = ymaps3;
const ZOOM_RANGE = {min: 2, max: 20};
const getCoordsMinMax = (arr, position) => arr
.map((item) => Number(item[position]))
.sort((a, b) => a - b);
class NewMap {
constructor(mapContainer) {
this.mapItems = document.querySelectorAll('[data-coords]');
this.bounds = [];
this.center = [];
this.map = null;
this.container = mapContainer;
this.init();
}
init() {
this.bounds = this.getBounds();
this.center = this.getCenter();
this.map = new YMapsHandler(this.bounds, this.center, this.mapItems, this.container);
}
getBounds() {
const square = [...this.mapItems]
.map((item) => item.dataset.coords.split(','));
const langs = getCoordsMinMax(square, 0);
const lats = getCoordsMinMax(square, 1);
return [[langs[1], lats[1]], [langs[langs.length - 1], lats[lats.length - 1]]];
}
getCenter() {
return JSON.parse(JSON.stringify(this.bounds)).reduce((curr, acc) => {
if (!curr) {
curr = acc;
} else {
curr[0] = Number(((curr[0] + acc[0]) / 2).toFixed(6));
curr[1] = Number(((curr[1] + acc[1]) / 2).toFixed(6));
}
return curr;
});
}
}
class YMapsHandler {
constructor(mapBounds, center, markers, container) {
this.mapBounds = mapBounds;
this.map = null;
this.center = center;
this.container = container;
this.markers = markers;
this.YMapMarker = null;
this.activePoint = null;
this.changeCenterHandler = this.changeCenterHandler.bind(this);
this.activatePopup = this.activatePopup.bind(this);
this.init();
}
init() {
this.container = this.container;
if (!this.container) throw new Error('Укажите валидный контейнер для карты')
this.createMap();
}
changeCenterHandler(center) {
this.map.update({location: {
center: center,
duration: 4000,
}});
}
activatePopup({coords, popup}) {
console.log(popup)
this.changeCenterHandler(coords);
this.activatePopup = popup
}
async createMap() {
this.YMapMarker = YMapMarker;
this.map = await new YMap (
this.container,
{location: {
bounds: this.mapBounds,
},
zoomRange: ZOOM_RANGE
},
[
new YMapDefaultSchemeLayer({}),
new YMapDefaultFeaturesLayer({}),
]
);
await this.setMarkers()
}
async setMarkers() {
this.markers.forEach((marker) => {
const coords = marker.dataset.coords
.split(',')
.map((item) => Number(item));
this.map.addChild(new CustomMarkerWithPopup(
{
coordinates: coords,
popupContent: marker.innerHTML,
type: marker.dataset.type,
id: marker.dataset.id,
callback: this.activatePopup,
}))
});
}
destroyMap() {
this.map.destroy();
this.map = null;
}
};
class CustomMarkerWithPopup extends YMapComplexEntity {
constructor(props) {
super(props);
this._popupOpen = false;
this.activePopup = null;
}
_onAttach() {
this._createPopup();
this._createMarker();
this._correctPopup();
}
_onDetach() {
this._marker = null;
}
_onUpdate(props) {
if (props.coordinates) {
this._marker.update({
coordinates: props.coordinates,
popup: this._marker,
})
}
}
_createPopup() {
const popupElement = document.createElement('div');
popupElement.className = 'map-popup';
const textElement = document.createElement('div');
textElement.className = 'popup__text';
textElement.innerHTML = this._props.popupContent;
const closeButton = document.createElement('button');
closeButton.classList = 'popup__close btn';
closeButton.onclick = () => {
this._popupOpen = false;
this._correctPopup();
}
popupElement.append(textElement, closeButton);
this._popup = popupElement;
}
_createMarker() {
const container = document.createElement('div');
const marker = document.createElement('img');
marker.className = 'map-marker';
marker.src = `../img/pin-${this._props.type}.png`;
marker.dataset.id = this._props.id;
marker.onclick = () => {
this._popupOpen = true;
this._correctPopup();
this.activePopup = marker;
this._props.callback({coords: this._props.coordinates, popup: marker});
}
container.append(marker, this._popup);
this._marker = new YMapMarker({
coordinates: this._props.coordinates},
container);
this.addChild(this._marker);
}
_correctPopup() {
if (this._popupOpen) {
this._popup.style.display = 'flex';
} else {
this._popup.style.display = 'none';
}
}
}
new NewMap(mapContainer);
};
подскажите, как поменять очередность слоев при таком выборе