Answer the question
In order to leave comments, you need to log in
How to link elements in the list with their respective marks on yandex maps?
Good day.
Help plz with advice or a solution directly)
In JS, it’s completely green, I can’t solve the task described below.
There is this page .
On the left is a list of clinics. On the right - these same clinics on the map.
I'm trying to do this:
Click on a clinic in the list on the left - and on the map the corresponding clinic changes the color of its icon (the path to the image file changes).
In the list of clinics, each of the clinics has data-attributes where the coordinates of the clinic are written. js picks them up and creates geo objects.
I'll post the js here.
(function ($) {
$(document).ready(function() {
var elementMap = document.getElementById('map-results');
if (elementMap) {
ymaps.ready(init);
}
function init() {
var myMap = new ymaps.Map(elementMap, {
center: [59.937204, 30.313636],
zoom: 13
});
var myCollection = new ymaps.GeoObjectCollection(null, {
iconLayout: 'default#image',
iconImageHref: 'svg/map_icon.svg',
iconImageSize: [30, 30],
iconImageOffset: [0, 0]
});
$('.search__result .clinic-item__address').each(function() {
var lat = $(this).attr('data-lat'),
long = $(this).attr('data-long'),
clinic = $(this).parents('.clinic-item');
var geoObject = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [lat, long]
}
});
geoObject.events.add('click', function (e) {
myCollection.each(function (geoObject) {
geoObject.options.set({
iconImageHref: 'svg/map_icon.svg'
});
});
e.get('target').options.set({
iconImageHref: 'svg/map_active.svg'
});
$('.clinic-item--active').removeClass('clinic-item--active');
clinic.addClass('clinic-item--active');
$('.search__result').animate({ scrollTop: $('.clinic-item--active').position().top}, 500);
});
myCollection.add(geoObject);
});
myMap.geoObjects.add(myCollection);
myMap.setBounds(myCollection.getBounds(), {
checkZoomRange : true,
duration : 500,
zoomMargin : 10
});
$('.search').on('click', '.clinic-item', function () {
var item = $(this);
if ( !item.hasClass('clinic-item--active') ) {
var lat = item.find('.clinic-item__address').attr('data-lat'),
long = item.find('.clinic-item__address').attr('data-long');
$('.clinic-item--active').removeClass('clinic-item--active');
item.addClass('clinic-item--active');
}
});
};
var elementMapClinic = document.getElementById('map');
if (elementMapClinic) {
ymaps.ready(initMap);
}
function initMap(){
var lat = $('.clinic .clinic-item__address').attr('data-lat'),
long = $('.clinic .clinic-item__address').attr('data-long'),
myMap = new ymaps.Map(elementMapClinic, {
center: [lat, long],
zoom: 15
});
myPlacemark = new ymaps.Placemark([lat, long], {}, {
iconLayout: 'default#image',
iconImageHref: 'svg/map_active.svg',
iconImageSize: [40, 40],
iconImageOffset: [0, 0]
});
myMap.geoObjects.add(myPlacemark);
};
})
} ( jQuery ));
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question