]
};
/**
* Assign a unique id to each store. You'll use this `id`
* later to associate each point on the map with a listing
* in the sidebar.
*/
stores.features.forEach((store, i) => {
store.properties.id = i;
});
map.on('load', () => {
map.addSource('places', {
'type': 'geojson',
'data': stores
});
addMarkers();
});
function addMarkers() {
for (const marker of stores.features) {
const el = document.createElement('div');
el.id = `marker-${marker.properties.id}`;
el.className = 'marker';
// Добавляем условие проверки postalCode
if (marker.properties.postalCode === 'Park') {
el.classList.add('Park-marker'); // Добавляем класс к маркеру
} else if (marker.properties.postalCode === 'Shop') {
el.classList.add('Shop-marker'); // Добавляем класс к маркеру
} else if (marker.properties.postalCode === 'BusStop') {
el.classList.add('BusStop-marker'); // Добавляем класс к маркеру
} else if (marker.properties.postalCode === 'School') {
el.classList.add('School-marker'); // Добавляем класс к маркеру
} else if (marker.properties.postalCode === 'KinderGarten') {
el.classList.add('KinderGarten-marker'); // Добавляем класс к маркеру
} else if (marker.properties.postalCode === 'Sea') {
el.classList.add('Sea-marker'); // Добавляем класс к маркеру
} else {
}
new mapboxgl.Marker(el, { offset: [0, -23] })
.setLngLat(marker.geometry.coordinates)
.addTo(map);
el.addEventListener('click', (e) => {
flyToStore(marker);
createPopUp(marker);
const activeItem = document.getElementsByClassName('active');
e.stopPropagation();
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
const listing = document.getElementById(
`listing-${marker.properties.id}`
);
listing.classList.add('active');
});
}
}
// Создайте переменную для хранения текущих видимых кодов postalCode
let visiblePostalCodes = ['NO'];
// Добавьте слушатели событий клика на кнопки фильтрации
// Функция для переключения видимости маркеров с заданным postalCode
function togglePostalCode(postalCode) {
if (visiblePostalCodes.includes(postalCode)) {
// Если postalCode уже видим, удаляем его из списка видимых
visiblePostalCodes = visiblePostalCodes.filter(code => code !== postalCode);
} else {
// Иначе, добавляем его в список видимых
visiblePostalCodes.push(postalCode);
}
// Вызываем функцию для обновления маркеров на карте
updateMarkers();
}
// Функция для обновления маркеров на карте в соответствии с текущими фильтрами
function updateMarkers() {
// Удаляем все маркеры с карты
const markers = document.getElementsByClassName('marker');
while (markers.length > 0) {
markers[0].remove();
}
// Добавляем маркеры в соответствии с текущими фильтрами
for (const marker of stores.features) {
const el = document.createElement('div');
el.id = `marker-${marker.properties.id}`;
el.className = 'marker';
// Всегда показывать маркеры с postalCode "NO"
if (marker.properties.postalCode === 'NO') {
visiblePostalCodes.push('NO');
}
if (visiblePostalCodes.includes(marker.properties.postalCode)) {
// Если postalCode маркера находится в списке видимых, добавляем его классы
if (marker.properties.postalCode === 'Park') {
el.classList.add('Park-marker');
} else if (marker.properties.postalCode === 'Shop') {
el.classList.add('Shop-marker');
} else if (marker.properties.postalCode === 'BusStop') {
el.classList.add('BusStop-marker');
} else if (marker.properties.postalCode === 'School') {
el.classList.add('School-marker');
} else if (marker.properties.postalCode === 'KinderGarten') {
el.classList.add('KinderGarten-marker');
} else if (marker.properties.postalCode === 'Sea') {
el.classList.add('Sea-marker');
}
// Остальной код добавления маркеров остается без изменений
new mapboxgl.Marker(el, { offset: [0, -23] })
.setLngLat(marker.geometry.coordinates)
.addTo(map);
el.addEventListener('click', (e) => {
flyToStore(marker);
createPopUp(marker);
const activeItem = document.getElementsByClassName('active');
e.stopPropagation();
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
const listing = document.getElementById(
`listing-${marker.properties.id}`
);
listing.classList.add('active');
});
}
}
// Добавить/удалить класс у кнопок в зависимости от выбранных фильтров
const showParkButton = document.getElementById('showParkButton');
const showShopButton = document.getElementById('showShopButton');
const showBusStopButton = document.getElementById('showBusStopButton');
const showSchoolButton = document.getElementById('showSchoolButton');
const showKinderGartenButton = document.getElementById('showKinderGartenButton');
const showSeaButton = document.getElementById('showSeaButton');
}
// ...
function flyToStore(currentFeature) {
map.flyTo({
center: currentFeature.geometry.coordinates
});
}
// Создайте переменную для хранения текущего активного попапа
let activePopup = null;
map.on('click', (e) => {
const popups = document.getElementsByClassName('mapboxgl-popup');
if (popups.length > 0) {
// Проверяем, есть ли открытые попапы
for (const popup of popups) {
const isClickInsidePopup = popup.contains(e.originalEvent.target);
if (!isClickInsidePopup) {
// Закрываем попап, если клик был снаружи попапа
popup.remove();
}
}
}
});
// Добавляем слушатель события click к элементу document
document.addEventListener('click', (e) => {
const popups = document.getElementsByClassName('mapboxgl-popup');
if (popups.length > 0) {
// Проверяем, есть ли открытые попапы
for (const popup of popups) {
const isClickInsidePopup = popup.contains(e.target);
if (!isClickInsidePopup) {
// Закрываем попап, если клик был снаружи попапа
popup.remove();
}
}
}
});
function createPopUp(currentFeature) {
const popUps = document.getElementsByClassName('mapboxgl-popup');
for (const popup of popUps) {
popup.remove(); // Закрыть все открытые попапы
}
// Проверьте значение postalCode
if (currentFeature.properties.postalCode === 'NO') {
// Если postalCode равен 'NO', используйте другой HTML для попапа
const popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat(currentFeature.geometry.coordinates)
.setHTML(
`
${currentFeature.properties.address}${currentFeature.properties.city}
`
)
.addTo(map);
} else {
// Иначе используйте первоначальный HTML для попапа
const popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat(currentFeature.geometry.coordinates)
.setHTML(
`
`
)
.addTo(map);
}
}
map.addControl(new mapboxgl.NavigationControl());
map.scrollZoom.disable();
תפריט
