Skip to content

D
default2
Commit a8f2ba85 authored by Yuri Bondarenko's avatar Yuri Bondarenko
Browse files
Options

up map

parent 1d171336
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 820 additions and 697 deletions
src/assets/css/app.css
View file @ a8f2ba85
......@@ -7,6 +7,7 @@
@import url("../../components/ms-about/ms-about.css");
@import url("../../components/ms-mini-gallery/ms-mini-gallery.css");
@import url("../../components/ms-info-carousel/ms-info-carousel.css");
@import url("../../components/ms-map/ms-map.css");
/* Custom media query */
@custom-media --s (width <= 640px);
......
src/assets/js/app.js
View file @ a8f2ba85
import msMiniGallery from "../../components/ms-mini-gallery/ms-mini-gallery";
import msInfoCarousel from "../../components/ms-info-carousel/ms-info-carousel";
import msMap from "../../components/ms-map/ms-map";
import "../../components/ms-map/ms-map";
document.addEventListener("DOMContentLoaded", async () => {
/**
......@@ -43,8 +43,8 @@ document.addEventListener("DOMContentLoaded", async () => {
/**
* карта
*/
new msMap({
/* new msMap({
mapId: "5cc82180e6b9d406cb074a77",
templateFolder: "acapella-2019"
});
}); */
});
src/components/ms-map/ms-map.css 0 → 100644
View file @ a8f2ba85
.ms-map {
position: relative;
padding: 0 65px 120px;
margin-bottom: 80px;
@media (--m) {
padding: 0 40px 90px;
margin-bottom: 70px;
}
@media (--s) {
padding: 0 15px 60px;
margin-bottom: 60px;
}
&::before {
content: "";
display: block;
position: absolute;
top: -300px;
bottom: 0;
left: 0;
width: 520px;
background-image: url("@@path/img/ms-map/map-pattern.svg");
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
z-index: 0;
@media (--m) {
background-size: 80% auto;
}
}
&::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
background-color: #f4f5f6;
background-image: url("@@path/img/ms-map/map-city.svg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
z-index: 0;
}
& h2 {
font-size: 40px;
font-weight: normal;
margin-top: 0;
margin-bottom: 20px;
font-family: "Circe", sans-serif;
color: #111;
padding: 0 60px 0 60px;
@media (--m) {
margin-top: 0;
}
@media (--s) {
font-size: 28px;
}
}
}
.ms-map__inner {
position: relative;
}
.ms-map__container {
width: 100%;
height: 650px;
border-radius: 6px;
overflow: hidden;
position: relative;
z-index: 1;
@media (--m) {
width: 100%;
margin: 0;
height: 720 / 768 * 100vw;
overflow: hidden;
}
@media (--s) {
height: 85vh;
width: 100%;
margin: 0;
border-radius: 0;
}
}
.ms-map__event {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 470px;
height: auto;
color: black;
font-family: "Muller", sans-serif;
text-align: justify;
display: none;
background: white;
box-shadow: 0 30px 40px rgba(0, 0, 0, 0.1);
z-index: 3;
@media (--m) {
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
width: auto;
}
@media (--s) {
display: none;
padding: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
transform: none;
z-index: 999999;
height: 100%;
}
}
.ms-map__event-inner {
padding: 30px;
text-align: center;
max-width: 450px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
@media (--m) {
align-items: center;
justify-content: flex-start;
text-align: left;
}
@media (--s) {
overflow-y: auto;
display: block;
padding: 15px 20px;
}
}
.ms-map__event-img {
width: 100%;
min-height: 220px;
background-size: cover;
background-position: center;
margin-bottom: 20px;
@media (--m) {
min-height: 200px;
min-width: 200px;
margin-bottom: 30px;
}
@media (--s) {
min-height: 200px;
min-width: 200px;
margin-right: 0;
margin-bottom: 20px;
}
}
.ms-map__event-title {
font-size: 21px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
margin-top: 15px;
text-align: left;
@media (--m) {
padding-right: 30px;
}
@media (--s) {
font-size: 20px;
line-height: 1.2;
}
}
.ms-map__event-address {
font-size: 13px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 20px;
text-align: left;
font-weight: 400;
@media (--m) {
justify-content: flex-start;
}
@media (--s) {
font-size: 14px;
}
&::before {
content: "";
display: block;
width: 12px;
min-width: 12px;
height: 15px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' viewBox='0 0 12 15' fill='none'%3E%3Cpath d='M5.50405 14.975C4.90405 14.175 4.40405 13.375 3.80405 12.675C3.00405 11.475 2.10405 10.275 1.30405 9.075C0.704052 8.275 0.204052 7.375 0.104052 6.375C-0.0959482 5.475 0.00405183 4.475 0.304052 3.575C0.704052 2.475 1.50405 1.575 2.50405 0.875C3.10405 0.475 3.80405 0.175 4.50405 0.075C5.80405 -0.125 7.00405 0.075 8.20405 0.675C9.70405 1.475 10.6041 2.775 11.0041 4.475C11.4041 6.175 10.9041 7.775 9.90405 9.175C9.20405 10.175 8.40405 11.175 7.70405 12.175C7.00405 12.975 6.40405 13.875 5.70405 14.775C5.70405 14.875 5.60405 14.875 5.50405 14.975ZM5.60405 2.975C4.10405 2.875 3.00405 4.175 3.00405 5.475C3.00405 6.975 4.30405 8.075 5.50405 8.075C6.90405 8.075 8.10405 6.975 8.10405 5.475C8.10405 4.075 7.00405 2.875 5.60405 2.975Z' fill='%23F34640'/%3E%3C/svg%3E");
margin-right: 10px;
}
}
.ms-map__event-address--empty {
margin-top: 30px;
}
.ms-map__event-dscr {
margin-bottom: 15px;
font-size: 14px;
line-height: 21 / 14;
text-align: left;
font-weight: 400;
@media (--s) {
font-size: 16px;
line-height: 1.3;
}
}
.ms-map__event-more {
color: #a0c548;
font-size: 16px;
font-weight: 700;
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
@media (--m) {
justify-content: flex-start;
}
&::after {
content: "";
display: block;
width: 8px;
height: 13px;
border-radius: 50%;
margin-left: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1 12L6.5 6.2L1 1' stroke='%2396C858' stroke-width='1.3437' stroke-miterlimit='10'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
}
}
.fancybox-close-small {
display: none;
}
.ms-map__close {
position: absolute;
top: 22px;
right: 22px;
width: 25px;
height: 25px;
background: none;
border: none;
border-radius: 50%;
background-color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M10.0035 8.5008L16.6885 1.81576C17.1038 1.40078 17.1038 0.727457 16.6885 0.312477C16.2732 -0.102857 15.6005 -0.102857 15.1852 0.312477L8.50018 6.99751L1.81478 0.312477C1.39945 -0.102857 0.726835 -0.102857 0.311501 0.312477C-0.103834 0.727457 -0.103834 1.40078 0.311501 1.81576L6.99689 8.5008L0.311501 15.1858C-0.103834 15.6008 -0.103834 16.2741 0.311501 16.6891C0.519168 16.8964 0.791332 17.0003 1.06314 17.0003C1.33495 17.0003 1.60712 16.8964 1.81478 16.6888L8.50018 10.0037L15.1852 16.6888C15.3929 16.8964 15.665 17.0003 15.9369 17.0003C16.2087 17.0003 16.4808 16.8964 16.6885 16.6888C17.1038 16.2738 17.1038 15.6005 16.6885 15.1855L10.0035 8.5008Z' fill='%23A0C548'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='17' height='17' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: center;
appearance: none;
cursor: pointer;
display: none;
z-index: 9;
@media (--m) {
top: 15px;
right: 15px;
}
@media (--s) {
top: 20px;
right: 20px;
}
}
.ms-map__pattern {
position: absolute;
}
.ms-map__pattern--1 {
left: 0;
top: -20%;
width: 12%;
@media (--m) {
width: 20%;
top: -15%;
}
@media (--s) {
width: 30%;
top: -15%;
}
}
.ms-map__pattern--2 {
left: 0;
bottom: -10%;
width: 7%;
@media (--m) {
bottom: -5%;
width: 14%;
}
@media (--s) {
display: none;
}
}
.ms-map__pattern--3 {
right: 15%;
bottom: -7%;
width: 7%;
@media (--m) {
right: 15%;
bottom: -7%;
width: 12%;
}
@media (--s) {
display: none;
}
}
.fancybox-slide.fancybox-slide--html {
@media (--m) {
transform: translateX(0) !important;
}
}
src/components/ms-map/ms-map.js
View file @ a8f2ba85
This diff is collapsed.
src/components/ms-map/ms-map.less deleted 100644 → 0
View file @ 1d171336
.ms-map {
position: relative;
padding: 0 65px 120px;
margin-bottom: 80px;
@media @m {
padding: 0 40px 90px;
margin-bottom: 70px;
}
@media @s {
padding: 0 15px 60px;
margin-bottom: 60px;
}
&::before {
content: "";
display: block;
position: absolute;
top: -300px;
bottom: 0;
left: 0;
width: 520px;
background-image: url('@@path/img/ms-map/map-pattern.svg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
z-index: 0;
@media @m {
background-size: 80% auto;
}
}
&::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
background-color: #F4F5F6;
background-image: url('@@path/img/ms-map/map-city.svg');
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
z-index: 0;
}
h2 {
font-size: 40px;
font-weight: normal;
margin-top: 0;
margin-bottom: 20px;
font-family: @f-circe;
color: #111;
padding: 0 60px 0 60px;
@media @xl {
padding: 0 4.16666vw 0 5.55555vw;
}
@media @m {
margin-top: 0;
}
@media @s {
font-size: 28px;
}
}
&__inner {
position: relative;
}
&__container {
width: 100%;
height: 650px;
border-radius: 6px;
overflow: hidden;
position: relative;
z-index: 1;
@media @m {
width: 100%;
margin: 0;
height: 720 / 768 * 100vw;
overflow: hidden;
}
@media @s {
height: 85vh;
width: 100%;
margin: 0;
border-radius: 0;
}
}
&__event {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 470px;
height: auto;
color: black;
font-family: 'Muller';
text-align: justify;
display: none;
background: white;
box-shadow: 0 30px 40px rgba(0, 0, 0, 0.1);
z-index: 3;
@media @m {
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
width: auto;
}
@media @s {
display: none;
padding: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
transform: none;
z-index: 999999;
height: 100%;
}
&-inner {
padding: 30px;
text-align: center;
max-width: 450px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
@media @m {
align-items: center;
justify-content: flex-start;
text-align: left;
}
@media @s {
overflow-y: auto;
display: block;
padding: 15px 20px;
}
}
&-img {
width: 100%;
min-height: 220px;
background-size: cover;
background-position: center;
margin-bottom: 20px;
@media @m {
min-height: 200px;
min-width: 200px;
//margin-right: 20px;
margin-bottom: 30px;
}
@media @s {
min-height: 200px;
min-width: 200px;
margin-right: 0;
margin-bottom: 20px;
}
}
&-title {
font-size: 21px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
margin-top: 15px;
text-align: left;
@media @m {
padding-right: 30px;
}
@media @s {
font-size: 20px;
line-height: 1.2;
}
}
&-address {
font-size: 13px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 20px;
text-align: left;
font-weight: 400;
@media @m {
justify-content: flex-start;
}
@media @s {
font-size: 14px;
}
&::before {
content: '';
display: block;
width: 12px;
min-width: 12px;
height: 15px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' viewBox='0 0 12 15' fill='none'%3E%3Cpath d='M5.50405 14.975C4.90405 14.175 4.40405 13.375 3.80405 12.675C3.00405 11.475 2.10405 10.275 1.30405 9.075C0.704052 8.275 0.204052 7.375 0.104052 6.375C-0.0959482 5.475 0.00405183 4.475 0.304052 3.575C0.704052 2.475 1.50405 1.575 2.50405 0.875C3.10405 0.475 3.80405 0.175 4.50405 0.075C5.80405 -0.125 7.00405 0.075 8.20405 0.675C9.70405 1.475 10.6041 2.775 11.0041 4.475C11.4041 6.175 10.9041 7.775 9.90405 9.175C9.20405 10.175 8.40405 11.175 7.70405 12.175C7.00405 12.975 6.40405 13.875 5.70405 14.775C5.70405 14.875 5.60405 14.875 5.50405 14.975ZM5.60405 2.975C4.10405 2.875 3.00405 4.175 3.00405 5.475C3.00405 6.975 4.30405 8.075 5.50405 8.075C6.90405 8.075 8.10405 6.975 8.10405 5.475C8.10405 4.075 7.00405 2.875 5.60405 2.975Z' fill='%23F34640'/%3E%3C/svg%3E");
margin-right: 10px;
}
&--empty {
margin-top: 30px;
}
}
&-dscr {
margin-bottom: 15px;
font-size: 14px;
line-height: 21 / 14;
text-align: left;
font-weight: 400;
@media @s {
font-size: 16px;
line-height: 1.3;
}
}
&-more {
color: #A0C548;
font-size: 16px;
font-weight: 700;
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
@media @m {
justify-content: flex-start;
}
&::after {
content: "";
display: block;
width: 8px;
height: 13px;
border-radius: 50%;
margin-left: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1 12L6.5 6.2L1 1' stroke='%2396C858' stroke-width='1.3437' stroke-miterlimit='10'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
}
}
.fancybox-close-small {
display: none;
}
}
&__close {
position: absolute;
top: 22px;
right: 22px;
width: 25px;
height: 25px;
background: none;
border: none;
border-radius: 50%;
background-color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M10.0035 8.5008L16.6885 1.81576C17.1038 1.40078 17.1038 0.727457 16.6885 0.312477C16.2732 -0.102857 15.6005 -0.102857 15.1852 0.312477L8.50018 6.99751L1.81478 0.312477C1.39945 -0.102857 0.726835 -0.102857 0.311501 0.312477C-0.103834 0.727457 -0.103834 1.40078 0.311501 1.81576L6.99689 8.5008L0.311501 15.1858C-0.103834 15.6008 -0.103834 16.2741 0.311501 16.6891C0.519168 16.8964 0.791332 17.0003 1.06314 17.0003C1.33495 17.0003 1.60712 16.8964 1.81478 16.6888L8.50018 10.0037L15.1852 16.6888C15.3929 16.8964 15.665 17.0003 15.9369 17.0003C16.2087 17.0003 16.4808 16.8964 16.6885 16.6888C17.1038 16.2738 17.1038 15.6005 16.6885 15.1855L10.0035 8.5008Z' fill='%23A0C548'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='17' height='17' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: center;
appearance: none;
cursor: pointer;
display: none;
z-index: 9;
@media @m {
top: 15px;
right: 15px;
}
@media @s {
top: 20px;
right: 20px;
}
}
&__pattern {
position: absolute;
&--1 {
left: 0;
top: -20%;
width: 12%;
@media @m {
width: 20%;
top: -15%;
}
@media @s {
width: 30%;
top: -15%;
}
}
&--2 {
left: 0;
bottom: -10%;
width: 7%;
@media @m {
bottom: -5%;
width: 14%;
}
@media @s {
display: none;
}
}
&--3 {
right: 15%;
bottom: -7%;
width: 7%;
@media @m {
right: 15%;
bottom: -7%;
width: 12%;
}
@media @s {
display: none;
}
}
}
}
.fancybox-slide.fancybox-slide--html {
@media @m {
transform: translateX(0)!important
}
}
\ No newline at end of file
src/components/ms-map/ms-map.old.js 0 → 100644
View file @ a8f2ba85
import "lightgallery.js";
/**
*
*/
export default class msMap {
/**
* конструктор
* @param {*} options параметры
*/
constructor(
options = {
mapId: "5cc82180e6b9d406cb074a77",
templateFolder: "acapella-2019"
}
) {
this.mapId = options.mapId; //id карты с moscowseasons
this.templateFolder = options.templateFolder; //папка шаблона для пина
this.showPointInfo = true; //открываем ли пин по клику
this.clusterer = null;
this.objectManager = null;
this.map = null;
this.dataPoints = {
items: []
};
this.coords = [];
this.isEventVisible = false;
this.popup = false;
this.setBasePath();
(async () => {
await this.loadData();
await this.initMap();
})();
}
/**
* задаем пути к пинам
*/
setBasePath() {
this.basePathPin = "/templates/" + this.templateFolder + "/assets/img/ms-map/icon-pin.svg";
this.basePathPinActive = "/templates/" + this.templateFolder + "/assets/img/ms-map/icon-pin-active.svg";
if (location.hostname == "localhost") {
this.basePathPin = "/assets/img/ms-map/icon-pin.svg";
this.basePathPinActive = "/assets/img/ms-map/icon-pin-active.svg";
}
if (location.hostname == "new-year.bnweb.studio") {
this.basePathPin = "/acapella-2019/assets/img/ms-map/icon-pin.svg";
this.basePathPinActive = "/acapella-2019/assets/img/ms-map/icon-pin-active.svg";
}
if (location.hostname == "www.mos.ru" || location.host == "newmos.mos.ru") {
this.basePathPin = "https://moscowseasons.com/templates/" + this.templateFolder + "/assets/img/ms-map/icon-pin.svg";
this.basePathPinActive = "https://moscowseasons.com/templates/" + this.templateFolder + "/assets/img/ms-map/icon-pin-active.svg";
}
}
/**
* загружаем данные
*/
async loadData() {
fetch("https://moscowseasons.com/graphql", {
method: "POST",
body: JSON.stringify({
operationName: "map",
variables: {
id: this.mapId
},
query: `query map ($id: ID) {
map(id: $id) {
slug
layers {
header
points {
address {
lat
lon
address
__typename
}
title
shortDesc
event {
slug
}
__typename
}
__typename
}
__typename
}
__typename
}`
})
})
.then(response => response.json())
.then(data => {
console.log("Fetch map data: ", data);
let id = 1;
data.data.map.layers.forEach(layer => {
let points = [];
let id2 = 1;
layer.points.forEach(point => {
if (!point) return;
points.push({
id: id2,
title: point.title ? point.title : "",
group_id: id,
lat: point.address.lon,
lon: point.address.lat,
address: point.address.address,
shortDesc: point.shortDesc ? point.shortDesc : null,
slug: point.event ? point.event.slug : null,
image: point.image ? point.image.resized.url : null
});
this.coords.push(point.address.lat + "_" + point.address.lon);
id2++;
});
this.dataPoints.items.push({
id: id,
title: layer.header,
entity_type: "groups",
points: points
});
id++;
});
});
}
/**
* готовим яндекс карту
*/
async initMap() {
/* global ymaps */
ymaps.ready(async () => {
this.map = new ymaps.Map("ms-map__container", {
center: [55.757, 37.62233],
zoom: 11
});
this.map.margin.addArea({
left: 0,
top: 0
});
this.objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: true,
// ObjectManager принимает те же опции, что и кластеризатор.
gridSize: 64,
// Макет метки кластера pieChart.
clusterIconLayout: "default#pieChart"
});
this.clusterer = new ymaps.Clusterer({
preset: "islands#invertedRedClusterIcons",
groupByCoordinates: false,
zoomMargin: 30,
clusterDisableClickZoom: false
});
let clusterObjects = [];
let coordsTemp = this.coords.slice();
this.dataPoints.items.forEach(layer => {
// Группы точек
clusterObjects[layer.id] = [];
layer.points.forEach(point => {
//console.log(point);
let lon = Number(point.lon);
let lat = Number(point.lat);
coordsTemp = coordsTemp.filter(item => item === point.lon + "_" + point.lat);
let repeat = coordsTemp.length;
//console.log(repeat);
if (!repeat) return;
let marker = new ymaps.Placemark(
[lat, lon],
{
hintContent: point.address,
//openEmptyBalloon: false,
slug: point.slug,
title: point.title,
image: point.image,
address: point.address,
desc: point.shortDesc
},
{
iconLayout: "default#image",
iconImageHref: this.basePathPin,
iconImageSize: [30, 30],
iconImageOffset: [-15, -15],
id: point.id,
balloonPanelMaxMapArea: 0,
openEmptyBalloon: false
}
);
/* marker.events.add("click", async () => {
for (var keyLayer in clusterObjects) {
clusterObjects[keyLayer].forEach(point => {
point.options.set({
iconImageHref: this.basePathPin,
iconImageSize: [30, 30],
iconImageOffset: [-15, -15]
});
});
}
marker.options.set({
iconImageHref: this.basePathPinActive,
iconLayout: "default#image",
iconImageSize: [37, 50],
iconImageOffset: [-18, -25]
});
this.map.margin.addArea({
right: 0,
bottom: 0
});
if (!this.showPointInfo) return false;
document.querySelector(".ms-map__event-inner").innerHTML = "";
const wrapElement = document.createElement("div");
wrapElement.classList.add("ms-map__event-wrap");
const addressElement = document.createElement("div");
addressElement.classList.add("ms-map__event-address", "ms-map__event-address--empty");
addressElement.innerHTML = marker.properties.get("address");
const descriptionElement = document.createElement("div");
descriptionElement.classList.add("ms-map__event-dscr");
descriptionElement.innerHTML = marker.properties.get("title");
if (marker.properties.get("slug") == null) {
const imgData = await fetch("https://moscowseasons.com/graphql", {
method: "POST",
body: JSON.stringify({
operationName: "event",
variables: {
slug: marker.properties.get("slug"),
locale: "RU"
},
query: `query event($slug: String) {
event(slug: $slug) {
...EventFragment
__typename
}
}
fragment EventFragment on Event {
...ShortEventFragment
__typename
}
fragment ShortEventFragment on Event {
id
locale
slug
title
description
address {
address
__typename
}
images {
id
url
resized(width: 500, height: 500) {
url
__typename
}
__typename
}
__typename
}`
})
});
const img = await imgData.json();
console.log(img);
}
wrapElement.appendChild(addressElement);
wrapElement.appendChild(descriptionElement);
document.querySelector(".ms-map__event-inner").appendChild(wrapElement);
document.querySelector(".ms-map__close").style.display = "block";
if (window.matchMedia("(max-width: 640px)").matches) {
// mobile
if (this.isEventVisible) {
if (this.popup) {
this.popup.destroy(true);
this.popup = null;
this.isEventVisible = false;
}
} else {
// global lightGallery
this.popup = lightGallery(document.getElementById("map-event"));
this.isEventVisible = true;
}
} else {
// desktop
if (this.isEventVisible) {
document.querySelector(".ms-map__event").style.display = "none";
} else {
document.querySelector(".ms-map__event").style.display = "block";
}
}
});*/
clusterObjects[layer.id].push(marker);
this.clusterer.add(marker);
});
/* this.map.geoObjects.add(this.clusterer);
this.objectManager.add(clusterObjects); */
});
// удаляем лишние контролы
this.map.controls.remove("searchControl");
this.map.controls.remove("geolocationControl");
this.map.controls.remove("typeSelector");
this.map.controls.remove("trafficControl");
if ("ontouchstart" in document.documentElement) {
this.map.behaviors.disable("drag");
}
this.map.controls.remove("fullscreenControl");
// выключаем зум по скролу
this.map.behaviors.disable(["scrollZoom"]);
// автомасштаб
/* this.map
.setBounds(this.clusterer.getBounds(), {
checkZoomRange: true,
zoomMargin: [20, 20, 20, 20]
})
.then(function() {
//if( map.getZoom() > 15) map.setZoom(15);
}); */
});
}
}
webpack.dev.js
View file @ a8f2ba85
......@@ -35,5 +35,8 @@ module.exports = {
}
}
]
},
externals: {
ymaps: "ymaps"
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment