Frontend Портфолио
Examples Custom Maps
Простая карта с одной меткой
- При клике на метку появляется балун в котором содержится заголовок и текст.
new CustomMaps({
selector: 'demo-1a',
coords: [55.050432, 60.109599],
balloonContentHeader: 'Миасс',
balloonContent: 'Город в золотой долине',
});Простая карта с одной меткой
- При клике на метку появляется попап в котором имеется: заголовок, описание, телефоны, почта.
Список объектов
sss new CustomMaps({
selector: 'demo-1b',
coords: [55.050432, 60.109599],
popup: true,
popupName: 'Миасс',
popupDescription: 'Город в золотой долине',
popupPhones: {
label: 'Телефоны:',
value: ['+79511111111', '+79512222222']
},
popupEmails: {
label: 'Почтовый ящик:',
value: ['example@mail.ru', 'example@mail.ru']
}
});С несколькими метками
- Автоматический масштаб чтобы уместились все метки.
- При клике на метки появляется балун в котором содержится заголовок и текст
new CustomMaps({
selector: 'demo-2',
coordsList: [
{
coords: [55.050432, 60.109599],
balloonContentHeader: 'Миасс',
balloonContent: 'Город в золотой долине',
},
{
coords: [55.159902, 61.402554],
balloonContentHeader: 'Челябинск',
balloonContent: 'Содержимое всплывающей подсказки',
},
{
coords: [55.763189, 60.707608],
balloonContentHeader: 'Озерск',
balloonContent: 'Содержимое всплывающей подсказки',
},
{
coords: [55.707882, 60.538958],
balloonContentHeader: 'Кыштым',
balloonContent: 'Содержимое всплывающей подсказки',
},
{
coords: [55.488371, 60.203087],
balloonContentHeader: 'Карабаш',
balloonContent: 'Содержимое всплывающей подсказки',
},
{
coords: [55.173113, 59.672425],
balloonContentHeader: 'Златоуст',
balloonContent: 'Содержимое всплывающей подсказки',
},
],
});С несколькими метками
- Автоматический масштаб чтобы уместились все метки.
- При клике на метки появляется попап в котором имеется: заголовок, описание, телефоны, почта.
Список объектов
sss new CustomMaps({
selector: 'demo-3',
popup: true,
coordsList: [
{
coords: [55.050432, 60.109599],
popupName: 'Миасс',
popupDescription: 'Город в золотой долине',
popupPhones: {
label: 'Телефоны:',
value: ['+79511111111', '+79512222222']
},
popupEmails: {
label: 'Почтовый ящик:',
value: ['example@mail.ru', 'example@mail.ru']
}
},
{
coords: [55.159902, 61.402554],
popupName: 'Челябинск',
popupDescription: 'Центр области',
popupPhones: {
label: 'Телефоны:',
value: ['+79513333333']
},
popupEmails: {
label: 'Почтовый ящик:',
value: ['example@mail.ru']
}
},
{
coords: [55.763189, 60.707608],
popupName: 'Озерск',
popupDescription: 'Описание объекта',
},
{
coords: [55.707882, 60.538958],
popupName: 'Кыштым',
popupPhones: {
label: 'Телефоны:',
value: ['+79514444444']
},
},
{
coords: [55.488371, 60.203087],
popupName: 'Карабаш',
popupEmails: {
label: 'Почтовый ящик:',
value: ['example@mail.ru']
}
},
{
coords: [55.173113, 59.672425],
popupName: 'Златоуст',
popupDescription: 'Описание объекта',
},
],
});С несколькими метками
- Группировка нескольких объектов в кластеры с одинаковыми координатами.
- Автоматический масштаб чтобы уместились все метки.
- У объектов можно задать: заголовок, описание, телефоны, почта.
Список объектов
sss new CustomMaps({
selector: 'demo-4',
clusters: true,
coordsList: [
{
coords: ["55.171316", "61.377622"],
popupName: 'ул. Героя России Кислова С.а., д. 3, кв. 550',
popupDescription: 'Коммерческое помещение',
popupPhones: {
label: 'Телефоны:',
value: ['+79511111111', '+79512222222']
},
popupEmails: {
label: 'Почтовый ящик:',
value: ['example@mail.ru', 'example@mail.ru']
}
},
{
coords: ["55.171316", "61.377622"],
popupName: 'ул. Героя России Кислова С.а., д. 3, кв. 548',
popupDescription: 'Коммерческое помещение',
},
{
coords: ["55.171316", "61.377622"],
popupName: 'ул. Героя России Кислова С.а., д. 3, кв. 509',
popupDescription: 'Коммерческое помещение',
},
{
coords: ["55.126256", "61.25616"],
popupName: 'Название объекта',
popupPhones: {
label: 'Телефоны:',
value: ['+79511111111', '+79512222222']
},
popupEmails: {
label: 'Почтовый ящик:',
value: ['example@mail.ru', 'example@mail.ru']
}
},
{
coords: ["55.124542", "61.248421"],
popupName: '1 комната, 32 м², 7/7-8 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 3/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 4/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 5/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 6/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 7/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 8/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 9/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 10/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '1 комната, 35.4 м², 2/11 эт',
},
{
coords: ["55.125820", "61.253805"],
popupName: '2 комната, 35.4 м², 11/11 эт',
},
],
});