Skip to content

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

map

parent 8ddad0f7
Show whitespace changes
Inline Side-by-side
Showing with 111 additions and 445 deletions
src/components/head/head.html
View file @ f50b9dfa
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<meta name="description" content="@@description" /> <meta name="description" content="@@description" />
@@if (env == 'DEV') { @@if (env == 'DEV') {
<link href="@@path/css/vendor.css" rel="stylesheet" /> <!-- link href="@@path/css/vendor.css" rel="stylesheet" / -->
<link href="@@path/css/app.css" rel="stylesheet" /> <link href="@@path/css/app.css" rel="stylesheet" />
} @@if (env == 'MOS') { } @@if (env == 'MOS') {
<!-- Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
......
src/components/ms-map/ms-map.js
View file @ f50b9dfa
import "lightgallery.js";
/** /**
* *
*/ */
...@@ -27,6 +28,9 @@ export default class msMap { ...@@ -27,6 +28,9 @@ export default class msMap {
this.coords = []; this.coords = [];
this.isEventVisible = false;
this.popup = false;
this.setBasePath(); this.setBasePath();
(async () => { (async () => {
...@@ -64,13 +68,12 @@ export default class msMap { ...@@ -64,13 +68,12 @@ export default class msMap {
async loadData() { async loadData() {
fetch("https://moscowseasons.com/graphql", { fetch("https://moscowseasons.com/graphql", {
method: "POST", method: "POST",
body: { body: JSON.stringify({
data: `{ operationName: "map",
"operationName":"map", variables: {
"variables":{ id: this.mapId
"id":"${this.mapId}"
}, },
"query":"query map ($id: ID) { query: `query map ($id: ID) {
map(id: $id) { map(id: $id) {
slug slug
layers { layers {
...@@ -94,9 +97,8 @@ export default class msMap { ...@@ -94,9 +97,8 @@ export default class msMap {
__typename __typename
} }
__typename __typename
}"
}` }`
} })
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
...@@ -153,7 +155,7 @@ export default class msMap { ...@@ -153,7 +155,7 @@ export default class msMap {
*/ */
async initMap() { async initMap() {
/* global ymaps */ /* global ymaps */
ymaps.ready(function() { ymaps.ready(async () => {
this.map = new ymaps.Map("ms-map__container", { this.map = new ymaps.Map("ms-map__container", {
center: [55.757, 37.62233], center: [55.757, 37.62233],
zoom: 11 zoom: 11
...@@ -184,11 +186,11 @@ export default class msMap { ...@@ -184,11 +186,11 @@ export default class msMap {
let coordsTemp = this.coords.slice(); let coordsTemp = this.coords.slice();
this.dataPoints.items.forEach(function(layer) { this.dataPoints.items.forEach(layer => {
// Группы точек // Группы точек
this.clusterObjects[layer.title] = []; this.clusterObjects[layer.title] = [];
layer.points.forEach(function(point) { layer.points.forEach(point => {
//console.log(point); //console.log(point);
let lon = Number(point.lon); let lon = Number(point.lon);
...@@ -224,7 +226,7 @@ export default class msMap { ...@@ -224,7 +226,7 @@ export default class msMap {
} }
); );
marker.events.add("click", () => { marker.events.add("click", async () => {
for (var keyLayer in clusterObjects) { for (var keyLayer in clusterObjects) {
clusterObjects[keyLayer].forEach(function(point) { clusterObjects[keyLayer].forEach(function(point) {
point.options.set({ point.options.set({
...@@ -249,7 +251,6 @@ export default class msMap { ...@@ -249,7 +251,6 @@ export default class msMap {
if (!this.showPointInfo) return false; if (!this.showPointInfo) return false;
if (marker.properties.get("slug") == null) {
document.querySelector(".ms-map__event-inner").innerHTML = ""; document.querySelector(".ms-map__event-inner").innerHTML = "";
const wrapElement = document.createElement("div"); const wrapElement = document.createElement("div");
...@@ -263,449 +264,114 @@ export default class msMap { ...@@ -263,449 +264,114 @@ export default class msMap {
descriptionElement.classList.add("ms-map__event-dscr"); descriptionElement.classList.add("ms-map__event-dscr");
descriptionElement.innerHTML = marker.properties.get("title"); descriptionElement.innerHTML = marker.properties.get("title");
wrapElement.appendChild(addressElement); if (marker.properties.get("slug") == null) {
wrapElement.appendChild(descriptionElement); const imgData = await fetch("https://moscowseasons.com/graphql", {
method: "POST",
document.querySelector(".ms-map__event-inner").appendChild(wrapElement); body: JSON.stringify({
document.querySelector(".ms-map__close").style.display = "block";
if (!$(".ms-map__event").is(":visible") && $(window).width() > 641) {
$(".ms-map__event").show();
} else if (!$(".ms-map__event").is(":visible") && $(window).width() < 640) {
$.fancybox.open([
{
src: "#map-event",
slideShow: false,
closeBtn: false,
scrolling: false,
buttons: [],
touch: {
vertical: false
},
baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' + '<div class="fancybox-inner">' + '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' + '<div class="fancybox-toolbar">{{buttons}}</div>' + '<div class="fancybox-navigation">{{arrows}}</div>' + '<div class="fancybox-stage"></div>' + '<div class="fancybox-caption"></div>' + "</div>" + "</div>"
}
]);
}
} else {
if (!$(".ms-map__event").is(":visible") && $(window).width() > 641) {
$(".ms-map__event").fadeIn();
} else if (!$(".ms-map__event").is(":visible") && $(window).width() <= 641) {
$.fancybox.open([
{
src: "#map-event",
slideShow: false,
closeBtn: false,
scrolling: false,
buttons: [],
touch: {
vertical: false
},
baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' + '<div class="fancybox-inner">' + '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' + '<div class="fancybox-toolbar">{{buttons}}</div>' + '<div class="fancybox-navigation">{{arrows}}</div>' + '<div class="fancybox-stage"></div>' + '<div class="fancybox-caption"></div>' + "</div>" + "</div>"
}
]);
}
$.ajax({
type: "POST",
url: "https://moscowseasons.com/graphql",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
operationName: "event", operationName: "event",
variables: { variables: {
slug: marker.properties.get("slug"), slug: marker.properties.get("slug"),
locale: "RU" locale: "RU"
}, },
query: "query event($slug: String) { event(slug: $slug) { \n ...EventFragment __typename \n} \n} \n fragment EventFragment on Event { \n ...ShortEventFragment __typename \n } \n fragment ShortEventFragment on Event { \n id \n locale \n slug \n title description address {\n address\n __typename\n }\n \n images { \n id \n url \n resized(width: 500, height: 500) {\n url \n __typename \n } \n __typename \n } \n __typename \n } \n" query: `query event($slug: String) {
}), event(slug: $slug) {
success: function(data) { ...EventFragment
$(".ms-map__event-inner").html(""); __typename
var event = data.data.event;
var link = "/" + event.locale.toLowerCase() + "/event/" + event.slug;
var target = "_blank";
if (window.location.host == "www.mos.ru" || window.location.host == "newmos.mos.ru") {
target = "_blank";
link = "https://moscowseasons.com/" + event.locale.toLowerCase() + "/event/" + event.slug;
}
var image_src = "";
if (event.images.length != 0) {
image_src = event.images[0].resized.url;
}
var wrap = $("<div/>", { class: "ms-map__event-wrap" });
var img = $("<div/>", { class: "ms-map__event-img", style: "background-image: url(" + image_src + ")" });
var title = $("<div/>", { class: "ms-map__event-title", text: event.title });
var address = $("<div/>", { class: "ms-map__event-address", text: event.address.address });
var description = $("<div/>", { class: "ms-map__event-dscr", html: marker.properties.get("desc") });
var more = $("<a/>", { class: "ms-map__event-more", text: "Подробнее", href: link, target: target });
wrap.append(description, address, more);
$(".ms-map__event-inner").append(title, img, wrap);
$(".ms-map__close").fadeIn();
}
});
}
});
clusterObjects[layer.title].push(marker);
clusterer.add(marker);
});
map.geoObjects.add(clusterer);
objectManager.add(clusterObjects);
});
// удаляем лишние контролы
map.controls.remove("searchControl");
map.controls.remove("geolocationControl");
map.controls.remove("typeSelector");
map.controls.remove("trafficControl");
var supportsTouch = "ontouchstart" in document.documentElement;
if (supportsTouch) {
map.behaviors.disable("drag");
}
map.controls.remove("fullscreenControl");
if ($(document).width() >= 1200) {
map.controls.remove("zoomControl");
var zoomControl = new ymaps.control.ZoomControl({
options: {
position: {
top: 108,
right: 10,
bottom: "auto",
left: "auto"
}
}
});
map.controls.add(zoomControl);
}
// выключаем зум по скролу
map.behaviors.disable(["scrollZoom"]);
// автомасштаб
map.setBounds(
// map.geoObjects.getBounds(),
clusterer.getBounds(),
{
checkZoomRange: true,
zoomMargin: [20, 20, 20, 20]
} }
).then(function() {
//if( map.getZoom() > 15) map.setZoom(15);
});
});
} }
} fragment EventFragment on Event {
...ShortEventFragment
(function($, window, document, undefined) { __typename
var MSMap = (function() {
var initMap = function() {
$.ajax({
type: "POST",
url: "https://moscowseasons.com/graphql",
data: '{"operationName":"map","variables":{"id":"' + map_id + '"},"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 }"}',
success: function(data) {
//console.log(data_points.items);
/* Yandex maps */
ymaps.ready(function() {
map = new ymaps.Map("ms-map__container", {
center: [55.757, 37.62233],
zoom: 11
});
map.margin.addArea({
left: 0,
top: 0
// width: zoom_offset,
// height: '100%'
});
objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: true,
// ObjectManager принимает те же опции, что и кластеризатор.
gridSize: 64,
// Макет метки кластера pieChart.
clusterIconLayout: "default#pieChart"
});
clusterer = new ymaps.Clusterer({
preset: "islands#invertedRedClusterIcons",
groupByCoordinates: false,
//gridSize: 120,
zoomMargin: 30,
clusterDisableClickZoom: false
});
var clusterObjects = [];
var coords_temp = coords.slice();
data_points.items.forEach(function(layer) {
// Группы точек
clusterObjects[layer.title] = [];
layer.points.forEach(function(point) {
//console.log(point);
var lon = Number(point.lon);
var lat = Number(point.lat);
//var repeat = coords_temp.filter(item => item === point.lon + '_' + point.lat).length;
var repeat = coords_temp.filter(function(item) {
if (item === point.lon + "_" + point.lat) {
return item;
} }
}).length; fragment ShortEventFragment on Event {
id
//console.log(repeat); locale
slug
if (repeat === 0) { title
return; description
} else if (repeat > 1) { address {
$.each(coords_temp, function(index, coord) { address
if (coord == point.lon + "_" + point.lat) { __typename
coords_temp.splice(index, 1);
} }
}); images {
id
url
resized(width: 500, height: 500) {
url
__typename
} }
__typename
var 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: base_path_pin,
iconImageSize: [30, 30],
iconImageOffset: [-15, -15],
id: point.id,
balloonPanelMaxMapArea: 0,
openEmptyBalloon: false
} }
); __typename
}`
marker.events.add("click", function(e) { })
for (var keyLayer in clusterObjects) {
clusterObjects[keyLayer].forEach(function(point) {
point.options.set({
iconImageHref: base_path_pin,
iconImageSize: [30, 30],
iconImageOffset: [-15, -15]
});
}); });
const img = await imgData.json();
console.log(img);
} }
marker.options.set({ wrapElement.appendChild(addressElement);
iconImageHref: base_path_pin_active, wrapElement.appendChild(descriptionElement);
iconLayout: "default#image",
iconImageSize: [37, 50],
iconImageOffset: [-18, -25]
});
map.margin.addArea({ document.querySelector(".ms-map__event-inner").appendChild(wrapElement);
right: 0,
bottom: 0
//width: 500,
//height: '100%'
});
if (!point_info) return false; document.querySelector(".ms-map__close").style.display = "block";
if (marker.properties.get("slug") == null) { if (window.matchMedia("(max-width: 640px)").matches) {
$(".ms-map__event-inner").html(""); /* mobile */
var wrap = $("<div/>", { class: "ms-map__event-wrap" }); if (this.isEventVisible) {
var address = $("<div/>", { class: "ms-map__event-address ms-map__event-address--empty", text: marker.properties.get("address") }); if (this.popup) {
var description = $("<div/>", { class: "ms-map__event-dscr", html: marker.properties.get("title") }); this.popup.destroy(true);
this.popup = null;
wrap.append(address, description); this.isEventVisible = false;
$(".ms-map__event-inner").append(wrap);
$(".ms-map__close").fadeIn();
if (!$(".ms-map__event").is(":visible") && $(window).width() > 641) {
$(".ms-map__event").show();
} else if (!$(".ms-map__event").is(":visible") && $(window).width() < 640) {
$.fancybox.open([
{
src: "#map-event",
slideShow: false,
closeBtn: false,
scrolling: false,
buttons: [],
touch: {
vertical: false
},
baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' + '<div class="fancybox-inner">' + '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' + '<div class="fancybox-toolbar">{{buttons}}</div>' + '<div class="fancybox-navigation">{{arrows}}</div>' + '<div class="fancybox-stage"></div>' + '<div class="fancybox-caption"></div>' + "</div>" + "</div>"
}
]);
} }
} else { } else {
if (!$(".ms-map__event").is(":visible") && $(window).width() > 641) { /* global lightGallery */
$(".ms-map__event").fadeIn(); this.popup = lightGallery(document.getElementById("map-event"));
} else if (!$(".ms-map__event").is(":visible") && $(window).width() <= 641) { this.isEventVisible = true;
$.fancybox.open([
{
src: "#map-event",
slideShow: false,
closeBtn: false,
scrolling: false,
buttons: [],
touch: {
vertical: false
},
baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' + '<div class="fancybox-inner">' + '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' + '<div class="fancybox-toolbar">{{buttons}}</div>' + '<div class="fancybox-navigation">{{arrows}}</div>' + '<div class="fancybox-stage"></div>' + '<div class="fancybox-caption"></div>' + "</div>" + "</div>"
}
]);
}
$.ajax({
type: "POST",
url: "https://moscowseasons.com/graphql",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
operationName: "event",
variables: {
slug: marker.properties.get("slug"),
locale: "RU"
},
query: "query event($slug: String) { event(slug: $slug) { \n ...EventFragment __typename \n} \n} \n fragment EventFragment on Event { \n ...ShortEventFragment __typename \n } \n fragment ShortEventFragment on Event { \n id \n locale \n slug \n title description address {\n address\n __typename\n }\n \n images { \n id \n url \n resized(width: 500, height: 500) {\n url \n __typename \n } \n __typename \n } \n __typename \n } \n"
}),
success: function(data) {
$(".ms-map__event-inner").html("");
var event = data.data.event;
var link = "/" + event.locale.toLowerCase() + "/event/" + event.slug;
var target = "_blank";
if (window.location.host == "www.mos.ru" || window.location.host == "newmos.mos.ru") {
target = "_blank";
link = "https://moscowseasons.com/" + event.locale.toLowerCase() + "/event/" + event.slug;
}
var image_src = "";
if (event.images.length != 0) {
image_src = event.images[0].resized.url;
} }
} else {
var wrap = $("<div/>", { class: "ms-map__event-wrap" }); /* desktop */
var img = $("<div/>", { class: "ms-map__event-img", style: "background-image: url(" + image_src + ")" }); if (this.isEventVisible) {
var title = $("<div/>", { class: "ms-map__event-title", text: event.title }); document.querySelector(".ms-map__event").style.display = "none";
var address = $("<div/>", { class: "ms-map__event-address", text: event.address.address }); } else {
var description = $("<div/>", { class: "ms-map__event-dscr", html: marker.properties.get("desc") }); document.querySelector(".ms-map__event").style.display = "block";
var more = $("<a/>", { class: "ms-map__event-more", text: "Подробнее", href: link, target: target });
wrap.append(description, address, more);
$(".ms-map__event-inner").append(title, img, wrap);
$(".ms-map__close").fadeIn();
} }
});
} }
}); });
clusterObjects[layer.title].push(marker); this.clusterObjects[layer.title].push(marker);
clusterer.add(marker); this.clusterer.add(marker);
}); });
map.geoObjects.add(clusterer); this.map.geoObjects.add(this.clusterer);
objectManager.add(clusterObjects); this.objectManager.add(this.clusterObjects);
}); });
// удаляем лишние контролы // удаляем лишние контролы
map.controls.remove("searchControl"); this.map.controls.remove("searchControl");
map.controls.remove("geolocationControl"); this.map.controls.remove("geolocationControl");
map.controls.remove("typeSelector"); this.map.controls.remove("typeSelector");
map.controls.remove("trafficControl"); this.map.controls.remove("trafficControl");
var supportsTouch = "ontouchstart" in document.documentElement;
if (supportsTouch) {
map.behaviors.disable("drag");
}
map.controls.remove("fullscreenControl"); if ("ontouchstart" in document.documentElement) {
this.map.behaviors.disable("drag");
if ($(document).width() >= 1200) {
map.controls.remove("zoomControl");
var zoomControl = new ymaps.control.ZoomControl({
options: {
position: {
top: 108,
right: 10,
bottom: "auto",
left: "auto"
}
} }
});
map.controls.add(zoomControl); this.map.controls.remove("fullscreenControl");
}
// выключаем зум по скролу // выключаем зум по скролу
map.behaviors.disable(["scrollZoom"]); this.map.behaviors.disable(["scrollZoom"]);
// автомасштаб // автомасштаб
map.setBounds( this.map
// map.geoObjects.getBounds(), .setBounds(this.clusterer.getBounds(), {
clusterer.getBounds(),
{
checkZoomRange: true, checkZoomRange: true,
zoomMargin: [20, 20, 20, 20] zoomMargin: [20, 20, 20, 20]
} })
).then(function() { .then(function() {
//if( map.getZoom() > 15) map.setZoom(15); //if( map.getZoom() > 15) map.setZoom(15);
}); });
}); });
} }
}); }
$(".ms-map__close").click(function() {
$(this).fadeOut();
if ($(window).width() < 640) {
$.fancybox.close();
} else {
$(".ms-map__event").fadeOut();
}
$(".ms-map__event-inner").html("");
});
};
return {
/**
* инициализация модуля
*/
init: function() {
var t = setInterval(function() {
try {
if (ymaps) {
initMap();
clearInterval(t);
}
} catch (err) {
throw "ymaps not loaded yet";
}
}, 400);
}
};
})();
// Export
window.MSMap = MSMap;
})(jQuery, this, this.document);
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