templates/Map/page.html.twig line 1

Open in your IDE?
  1. {% extends 'grid.html.twig' %}
  3. {% block mainContainer %}
  4.    {# {{ form(form) }}#}
  5.     <div id="map_form"></div>
  6.     <p>
  7.         <button type="button" id="map_refresh" disabled>Обновить карту</button>
  8.         <button type="button" id="map_reset" disabled>Сбросить фильтры</button>
  9.         <span id="map_status" role="status" aria-live="polite">Загрузка карты…</span>
  10.     </p>
  11.     <img src="{{ asset('/static/preloader.gif') }}" id="preloader" style="display: none;" />
  12.     <div id="map"
  13.          data-city-uri-idenity="{{ cityUriIdentity }}"
  14.          data-city-latitude="{{ cityLatitude }}"
  15.          data-city-longitude="{{ cityLongitude }}"
  16.          data-map-context="{{ mapContext }}"
  17.          style="width:100%; height:500px;"></div>
  18. {% endblock %}
  20. {% block javascripts %}
  21.     <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  22.     <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  23.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  24.     <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
  25.     <script type="text/javascript">
  26.         ;var RoutingDecorator = {
  27.             generate: function (name, params) {
  28.                 const orig_name = name;
  30.                 try {
  31.                     Routing.getRoute(name)
  32.                 } catch(error) {
  33.                     name = name + '.' + '{{ app.request.locale }}';
  35.                     try {
  36.                         Routing.getRoute(name)
  37.                     } catch(error) {
  38.                         name = orig_name;
  39.                     }
  40.                 }
  42.                 return Routing.generate(name, params);
  43.             }
  44.         };
  46.         ;(function () {
  47.             document.addEventListener('DOMContentLoaded', _ => {
  48.                 var avatarPath = '{{ asset('', 'profile_media_avatar') }}';
  49.                 var photoPath = '{{ asset('', 'profile_media') }}';
  50.                 var thumbPath = '{{ asset('', 'saloon_media_thumb') }}';
  51.                 var mapContainer = document.querySelector('#map');
  52.                 var preloader = document.querySelector('#preloader');
  53.                 var refreshButton = document.querySelector('#map_refresh');
  54.                 var resetButton = document.querySelector('#map_reset');
  55.                 var mapStatus = document.querySelector('#map_status');
  56.                 var loading = false;
  57.                 var mapContext = mapContainer.getAttribute('data-map-context');
  58.                 var cityUriIdentity = mapContainer.getAttribute('data-city-uri-idenity');
  59.                 var cityLatitude = mapContainer.getAttribute('data-city-latitude');
  60.                 var cityLongitude = mapContainer.getAttribute('data-city-longitude');
  61.                 var formName = 'filter_map_form';
  62.                 var multipleCities = {{ multipleCities }};
  63.                 var routesUrl = '/js/fos_js_routes{{ multipleCities ? '_city_prefixed' }}.json';
  65.                 if (typeof ymaps === 'undefined') {
  66.                     mapStatus.textContent = 'Не удалось загрузить Яндекс.Карты. Перезагрузите страницу.';
  67.                     return;
  68.                 }
  69.                 var mapLoadTimeout = setTimeout(() => {
  70.                     mapStatus.textContent = 'Не удалось загрузить Яндекс.Карты. Перезагрузите страницу.';
  71.                 }, 15000);
  72.                 loadRoutes();
  74.                 var myMap, clusterer;
  75.                 ymaps.ready(function () {
  76.                     clearTimeout(mapLoadTimeout);
  77.                     myMap = new ymaps.Map('map', {
  78.                             center: [cityLatitude, cityLongitude],
  79.                             zoom: 9,
  80.                             behaviors: ['default', 'scrollZoom']
  81.                         }, {
  82.                             searchControlProvider: 'yandex#search'
  83.                         });
  85.                     clusterer = new ymaps.Clusterer({
  86.                             preset: 'islands#invertedVioletClusterIcons',//Через кластеризатор можно указать только стили кластеров,стили для меток нужно назначать каждой метке отдельно.
  87.                             groupByCoordinates: false,//Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
  89.                             //Опции кластеров указываем в кластеризаторе с префиксом "cluster".
  90.                             clusterDisableClickZoom: true,
  91.                             clusterHideIconOnBalloonOpen: false,
  92.                             geoObjectHideIconOnBalloonOpen: false
  93.                     });
  95.                     // Можно менять опции кластеризатора после создания.
  96.                     clusterer.options.set({
  97.                         gridSize: 80,
  98.                         clusterDisableClickZoom: true
  99.                     });
  101.                     loadForm();
  102.                     refreshButton.addEventListener('click', function () {
  103.                         if (document.querySelector('form[name="' + formName + '"]')) {
  104.                             filterData();
  105.                         } else {
  106.                             loadForm();
  107.                         }
  108.                     });
  109.                     resetButton.addEventListener('click', function () {
  110.                         document.querySelector('form[name="' + formName + '"]').reset();
  111.                         filterData();
  112.                     });
  113.                 });
  115.                 function loadRoutes() {
  116.                     $.ajax({
  117.                         url:routesUrl,
  118.                         dataType: "json",
  119.                         async: false,
  120.                         success: function (routes) {
  121.                             Routing.setRoutingData(routes);
  122.                         },
  123.                         error: function (xhr, ajaxOptions, thrownError) {}
  124.                     });
  125.                 }
  127.                 function setFormSubmitListener() {
  128.                     document.querySelector("form[name="+formName+"]").addEventListener('submit', function(e){
  129.                         e.preventDefault();
  130.                         if(!clusterer)
  131.                             return;
  132.                         filterData();
  133.                         return false;
  134.                     });
  135.                 }
  137.                 function loadForm() {
  138.                     setLoading(true);
  139.                     fetch('{{ path('map.form', {city: cityUriIdentity}) }}', {
  140.                         mode: "cors",
  141.                         importance: "low",
  142.                         method: "POST",
  143.                         cache: 'no-store',
  144.                         headers: {
  145.                             "Content-Type": "application/x-www-form-urlencoded",
  146.                             "X-Requested-With": "XMLHttpRequest"
  147.                         },
  148.                         body: new URLSearchParams({mapContext: mapContext}).toString(),
  149.                     }).then(response => {
  150.                         if (!response.ok) {
  151.                             throw new Error('Cannot load map form');
  152.                         }
  153.                         return response.text();
  154.                     }).then(response => {
  155.                         document.querySelector('#map_form').innerHTML = response;
  156.                         setFormSubmitListener();
  157.                         setLoading(false);
  158.                         filterData();
  159.                     }).catch(() => {
  160.                         showError();
  161.                         setLoading(false);
  162.                     });
  163.                 }
  165.                 function setLoading(value) {
  166.                     loading = value;
  167.                     preloader.style.display = value ? 'block' : 'none';
  168.                     refreshButton.disabled = value;
  169.                     resetButton.disabled = value || !document.querySelector('form[name="' + formName + '"]');
  170.                     if (value) {
  171.                         mapStatus.textContent = 'Загрузка…';
  172.                     }
  173.                 }
  175.                 function showError() {
  176.                     mapStatus.textContent = 'Не удалось обновить карту. Нажмите «Обновить карту», чтобы повторить запрос.';
  177.                 }
  179.                 function filterData() {
  180.                     if (loading) {
  181.                         return;
  182.                     }
  183.                     setLoading(true);
  185.                     var data = {};
  186.                     $("form[name="+formName+"]").serializeArray().forEach((object)=>{
  188.                         //"подгоняем" данные под формат, ожидаемый формой при сабмите
  189.                         var fieldName = object.name.toString().replace(formName + '[', '').replace(']', '');
  190.                         var clearFieldName = fieldName.substr(0, fieldName.indexOf('['));
  191.                         if(~fieldName.indexOf('[]')) {
  192.                             checkArrayIsInFormObject(clearFieldName, data);
  193.                             data[clearFieldName].push(object.value);
  194.                         } else if(~fieldName.indexOf('[m')) {
  195.                             if(!object.value)
  196.                                 return;
  198.                             checkObjectIsInFormObject(clearFieldName, data);
  199.                             if(~fieldName.indexOf('[min]'))
  200.                                 data[clearFieldName]['min'] = object.value;
  201.                             if(~fieldName.indexOf('[max]'))
  202.                                 data[clearFieldName]['max'] = object.value;
  203.                         } else {
  204.                             data[fieldName] = object.value;
  205.                         }
  206.                     });
  208.                     $.ajax({
  209.                         url:'{{ path('map.filter', {city:cityUriIdentity}) }}',
  210.                         type: "POST",
  211.                         dataType: "json",
  212.                         cache: false,
  213.                         data: {
  214.                             "form": JSON.stringify(data),
  215.                             "mapContext": mapContext,
  216.                             "scale": myMap.getZoom(),
  217.                         },
  218.                         async: true,
  219.                     }).then(getDetailsData).then(points => {
  220.                         updateMap(points);
  221.                         mapStatus.textContent = 'Анкеты: ' + points.profiles.length + '. Салоны: ' + points.saloons.length + '.';
  222.                     }).catch(showError).always(() => setLoading(false));
  223.                 }
  225.                 function checkArrayIsInFormObject(name, formObject) {
  226.                     if(false == formObject.hasOwnProperty(name))
  227.                         formObject[name] = [];
  228.                 }
  230.                 function checkObjectIsInFormObject(name, formObject) {
  231.                     if(false == formObject.hasOwnProperty(name))
  232.                         formObject[name] = {};
  233.                 }
  235.                 function getDetailsData(data) {
  236.                     const profilesRawData = data.profiles || [];
  237.                     const saloonsRawData = data.saloons || [];
  239.                     const profilesAllId = profilesRawData.map(_data => _data[0]).flat();
  240.                     const saloonsAllId = saloonsRawData.map(_data => _data[0]).flat();
  242.                     const profileArray = Array.isArray(profilesAllId) ? profilesAllId : [];
  243.                     const saloonIdArray = Array.isArray(saloonsAllId) ? saloonsAllId : [];
  245.                     const requestBody = {};
  246.                     requestBody.profiles = profileArray;
  247.                     requestBody.saloons = saloonIdArray;
  249.                     return fetch('{{ path('map.detail', {city:cityUriIdentity}) }}', {
  250.                         method: "POST",
  251.                         cache: 'no-store',
  252.                         headers: {
  253.                             'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  254.                             'X-Requested-With': 'XMLHttpRequest',
  255.                         },
  256.                         body: new URLSearchParams(requestBody).toString()
  257.                     })
  258.                     .then(response => {
  259.                         if (!response.ok) {
  260.                             throw new Error('Cannot load map details');
  261.                         }
  262.                         return response.json();
  263.                     });
  264.                 }
  266.                 function updateMap(points) {
  267.                     clusterer.removeAll();
  269.                     if (!points || (points.profiles.length == 0 && points.saloons.length == 0)) {
  270.                         myMap.setCenter([cityLatitude, cityLongitude], 9);
  271.                         return;
  272.                     }
  274.                     const mergedPoints = [...points.profiles, ...points.saloons];
  276.                     var getImgUrl = function(path, imgType) {
  277.                         if(path[0] == '/')
  278.                             return path;
  280.                             console.log(imgType)
  281.                             console.log(photoPath)
  282.                             console.log(thumbPath)
  284.                         var assetPackagePath = '';
  285.                         if(imgType == 'avatar')
  286.                             assetPackagePath = avatarPath;
  287.                         else if(imgType == 'photo')
  288.                             assetPackagePath = photoPath; // /media/profiles/vp/rd/vprdP4ShlKUpkOB.jpg
  289.                         else if(imgType == 'thumb')
  290.                             assetPackagePath = thumbPath; // /media/saloons/thumb///.jpg
  292.                         return `${assetPackagePath}${path.slice(0, 2).toLowerCase()}/${path.slice(2, 4).toLowerCase()}/${path}.jpg`;
  293.                     };
  295.                     var getPointData = function (point) {
  296.                         const isProfile = point[0] == 1;
  297.                         const isSaloon = point[0] == 2;
  298.                         let url = '';
  299.                         const uri = point[3];
  300.                         if(isProfile) {
  301.                             url = RoutingDecorator.generate(
  302.                                 'profile_preview.page',
  303.                                 multipleCities ? {city: cityUriIdentity, profile: uri} : {profile: uri}
  304.                             );
  305.                         } else if(isSaloon) {
  306.                             url = RoutingDecorator.generate(
  307.                                 'saloon_preview.page',
  308.                                 multipleCities ? {city: cityUriIdentity, saloon: uri} : {saloon: uri}
  309.                             );
  310.                         }
  312.                         var processProfileShowsUrl = '{{ path('map.increment_profile_shows', multipleCities ? {city:cityUriIdentity} : {}) }}';
  313.                         return {
  314.                             balloonContentHeader: '',
  315.                             balloonContentBody: '<p><img src="' + getImgUrl(point[5], isProfile ? 'avatar' : 'thumb') + '" width="100" /></p>' + '<font size=3><b><a target="_blank" href="' + url + '">Профиль</a></b></font>'
  316.                                 + '<img style="display:none;" width="0" height="0" src="' + processProfileShowsUrl + '?id=' + (isProfile ? point[9] : null)+'" />', //не убирать, функционально важно
  317.                             balloonContentFooter: '<font size=1>' + point[8] + ',' + point[9] + ',' + point[10] + '</strong>',
  318.                             clusterCaption: '<strong>' + (isSaloon ? 'Салон ' : '') + point[4] + '</strong>'
  319.                         };
  320.                     };
  322.                     var getPointOptions = function (index, type) {
  323.                         return {
  324.                             preset: type == 'profile' ? 'islands#violetIcon' : 'islands#redIcon'
  325.                         };
  326.                     };
  328.                     var geoObjects = [];
  329.                     for(var i = 0, len = mergedPoints.length; i < len; i++) {
  330.                         const _point = mergedPoints[i];
  331.                         geoObjects[i] = new ymaps.Placemark([_point[1], _point[2]], getPointData(_point), getPointOptions(i, _point[0] == 1));
  332.                     }
  334.                     //В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
  335.                     clusterer.add(geoObjects);
  336.                     myMap.geoObjects.add(clusterer);
  338.                     // Спозиционируем карту так, чтобы на ней были видны все объекты.
  339.                     if (mergedPoints.length === 1) {
  340.                         myMap.setCenter([mergedPoints[0][1], mergedPoints[0][2]], 14);
  341.                     } else {
  342.                         myMap.setBounds(clusterer.getBounds(), {
  343.                             checkZoomRange: true,
  344.                             zoomMargin: 40
  345.                         }).then(() => {
  346.                             if (myMap.getZoom() > 14) {
  347.                                 myMap.setZoom(14);
  348.                             }
  349.                         });
  350.                     }
  351.                 }
  352.             });
  353.         })();
  354.     </script>
  355. {% endblock %}