Yandex.Maps displaying a list of map objects
Order site
By contacting me you will receive a reliable and knowledgeable contractor who will quickly and efficiently implement any task for you and your business.
All English-language materials have been translated fully automatically using the Google service
Often a client wants to display a map and a clickable list of objects, by clicking on which the map should smoothly change centering. Often a client wants to display a map and a clickable list of objects, by clicking on which the map should smoothly change centering. I am describing my experience in creating clickable cards with the opening of the baloon.
Let's assume that you have a javascript array of map elements that you want to display in this format:
var groups = [
{
name: "Name 1",
style: "islands # blueIcon", // Blue placemark
items: [
{
id: 1,
center: [50.426472, 30.563022],
name: "Address 1"
}
]}, {
name: "Name 2",
style: "islands # redIcon", // Red label
items: [
{
id: 2,
center: [50.45351, 30.516489],
name: "Address 2"
}
]}, {
name: "Name 3",
style: "islands # greenIcon", // green label
items: [
{
id: 3,
center: [50.454433, 30.529874],
name: "Address 3"
}
]},
];
You should also have a prepared div in which we will place our map. For example
<div id = 'cMap'> </div> And the script code itself with comments:
ymaps.ready (init);
function init () {
// Create an instance of the map.
var myMap = new ymaps.Map ('cMap', {
center: [82.993774, 55.031061], // Centering the map. Since we have labels with their own centering, we do not need to specify
zoom: 14, // Zoom range
controls: [] // Remove control buttons
}, {
searchControlProvider: 'yandex # search'
});
var placemarks = []; // Set an additional array where we will add the created labels
for (var i = 0, l = groups.length; i
You can determine the coordinates here
An easy way to call the map with adding a custom label
ymaps.ready (init);
function init () {
var myMap = new ymaps.Map ('cMap', {
center: [55.10717956959603,83.05149399999993],
zoom: 15
}, {
searchControlProvider: 'yandex # search'
}),
// Create a layout for the content.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass (
'<div style = "color: #FFFFFF; font-weight: bold;"> $ [properties.iconContent] </div>'
),
myPlacemark = new ymaps.Placemark (myMap.getCenter (), {
hintContent: 'Heading 1',
balloonContent: 'Heading 2'
}, {
// Options.
// You must specify this type of layout.
iconLayout: 'default # image',
// Custom image of the label icon.
iconImageHref: 'img / icon.svg',
// The size of the label.
iconImageSize: [40, 40],
// Offset of the upper left corner of the icon relative
// its "legs" (anchor points).
iconImageOffset: [-5, -38]
}),
myPlacemarkWithContent = new ymaps.Placemark ([55.661574, 37.573856], {
hintContent: 'Custom content tag icon',
balloonContent: 'This one is New Year's',
iconContent: '12'
}, {
// Options.
// You must specify this type of layout.
iconLayout: 'default # imageWithContent',
// Custom image of the label icon.
iconImageHref: 'images / ball.png',
// The size of the label.
iconImageSize: [48, 48],
// Offset of the upper left corner of the icon relative
// its "legs" (anchor points).
iconImageOffset: [-24, -24],
// Offset of the content layer relative to the image layer.
iconContentOffset: [15, 15],
// Content layout.
iconContentLayout: MyIconContentLayout
});
myMap.geoObjects
.add (myPlacemark)
.add (myPlacemarkWithContent);
}
Comments