Я использую mapbox gl js
Я создал слой с именем borderLayer
и показал на нем маркеры.
функция для извлечения данных и отображениямаркеры
prepareGeoJsonData(data) {
let features = [];
let counter = 0;
for (let val of data) {
features.push({
type: "Feature",
geometry: val.address.geometry.border,
center: val.address.geometry.center,
properties: {
center: val.address.geometry.center.coordinates,
number: val.address.number,
compNumber: val.address.compNumber,
street: val.address.street,
type: val.type,
status: val.status,
zipCode: val.address.zipCode,
city: val.address.city,
bathrooms: this.getProperties('basic.bathrooms', val),
bedrooms: this.getProperties('basic.rooms', val),
fiscalArea: this.getProperties('basic.parcelFiscalArea', val),
livingArea: this.getProperties('basic.livingArea', val),
price: this.formatter.format(this.getProperties('pricing.price', val)),
},
id: counter,
});
const cords = features[counter].properties.center
if (!cords) {
continue;
}
const el = document.createElement('div');
el.className = 'mapsoldInfoWindow';
const status = document.createElement('div');
status.className = 'status';
status.textContent = val.status
const price = document.createElement('div');
price.className = 'price';
const pricingPrice = this.transformPrice(this.getProperties('pricing.price', val));
price.textContent = pricingPrice + ' €'
const icon = document.createElement('span');
icon.className = 'fa fa-caret-down';
el.appendChild(status);
el.appendChild(price);
el.appendChild(icon);
el.style.width = 90 + 'px';
el.style.height = 90 + 'px';
let popup = new mapboxgl.Popup();
popup.setHTML(this.getPOIPopupContentOnLandUnit(features[counter].properties)['outerHTML']);
// add marker to map
let marker = new mapboxgl.Marker(el)
.setLngLat(cords)
.setPopup(popup)
.addTo(this._mapRef);
this.markers.push(marker);
counter++;
};
this.housesComponent.dynamicPhotos(features);
return {
type: "FeatureCollection",
features: features
};
}
Я хочу показать всплывающее окно со следующим потоком:
- карта загружена
- маркер на карте
- нажмите на маркер (popup1)
- нажмите на всплывающее окно (popup2)
всплывающая функция на маркере
getPopupContentOnAsset(feature: any): string {
let prop: any = feature;
let address1 = `${prop.number ? prop.number : ''} ${prop.compNumber ? prop.compNumber : ''} ${prop.street ? prop.street: ''}`;
let address2 = `${prop.city ? prop.city : ''} (${prop.zipCode ? prop.zipCode : ''})`;
let property = `${prop.bedrooms ? prop.bedrooms + ' bed' : ''} ${prop.bathrooms ? prop.bathrooms + ' bath' : ''}`
let price = `${prop.price ? prop.price.toLocaleString() : ''}`
let popupWrapper = jQuery(`<div class="popup-wrapper"></div>`)[0];
let link = jQuery(`<div class="popup-title poi-name">Open Street View</div>`).click(() => {
let lat = prop.center[1];
let lng = prop.center[0];
this.openStreetView(lat, lng);
})[0];
jQuery(popupWrapper).append(link);
let content = '';
content = ` <div class="mapInfoWindow">
<img id="pop" src="../../../assets/img/mapPopupImg.jpg">
<div class="infoWindowFooter">
<div class="address">${address1}</div>
<div class="address">${address2}</div>
<div class="flex-box contentWrap">
<div class="flex-item text-muted">${property}</div>
<div class="flex-item heigh-light-text">${price}</div>
</div>
</div>
</div>`;
jQuery(popupWrapper).append(content);
return popupWrapper;
}
Функция щелчкачто я добавил к link
не работает, это просто простое всплывающее окно прямо сейчас.
Как я могу сделать всплывающее окно кликабельным?