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.     <img src="{{ asset('/static/preloader.gif') }}" id="preloader" style="display: none;" />
  7.     <div id="map"
  8.          data-city-uri-idenity="{{ cityUriIdentity }}"
  9.          data-city-latitude="{{ cityLatitude }}"
  10.          data-city-longitude="{{ cityLongitude }}"
  11.          style="width:100%; height:500px;"></div>
  12. {% endblock %}
  14. {% block javascripts %}
  15.     <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  16.     <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  17.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  18.     <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
  19.     <script type="text/javascript">
  20.         ;var RoutingDecorator = {
  21.             generate: function (name, params) {
  22.                 const orig_name = name;
  24.                 try {
  25.                     Routing.getRoute(name)
  26.                 } catch(error) {
  27.                     name = name + '.' + '{{ app.request.locale }}';
  29.                     try {
  30.                         Routing.getRoute(name)
  31.                     } catch(error) {
  32.                         name = orig_name;
  33.                     }
  34.                 }
  36.                 return Routing.generate(name, params);
  37.             }
  38.         };
  40.         ;(function () {
  41.             document.addEventListener('DOMContentLoaded', _ => {
  42.                 var avatarPath = '{{ asset('', 'profile_media_avatar') }}';
  43.                 var photoPath = '{{ asset('', 'profile_media') }}';
  44.                 var thumbPath = '{{ asset('', 'saloon_media_thumb') }}';
  45.                 var mapContainer = document.querySelector('#map');
  46.                 var preloader = document.querySelector('#preloader');
  47.                 var cityUriIdentity = mapContainer.getAttribute('data-city-uri-idenity');
  48.                 var cityLatitude = mapContainer.getAttribute('data-city-latitude');
  49.                 var cityLongitude = mapContainer.getAttribute('data-city-longitude');
  50.                 var formName = 'filter_map_form';
  51.                 var multipleCities = {{ multipleCities }};
  52.                 var routesUrl = '/js/fos_js_routes{{ multipleCities ? '_city_prefixed' }}.json';
  54.                 loadRoutes();
  56.                 var myMap, clusterer;
  57.                 ymaps.ready(function () {
  58.                     myMap = new ymaps.Map('map', {
  59.                             center: [cityLatitude, cityLongitude],
  60.                             zoom: 9,
  61.                             behaviors: ['default', 'scrollZoom']
  62.                         }, {
  63.                             searchControlProvider: 'yandex#search'
  64.                         });
  66.                     clusterer = new ymaps.Clusterer({
  67.                             preset: 'islands#invertedVioletClusterIcons',//Через кластеризатор можно указать только стили кластеров,стили для меток нужно назначать каждой метке отдельно.
  68.                             groupByCoordinates: false,//Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
  70.                             //Опции кластеров указываем в кластеризаторе с префиксом "cluster".
  71.                             clusterDisableClickZoom: true,
  72.                             clusterHideIconOnBalloonOpen: false,
  73.                             geoObjectHideIconOnBalloonOpen: false
  74.                     });
  76.                     // Можно менять опции кластеризатора после создания.
  77.                     clusterer.options.set({
  78.                         gridSize: 80,
  79.                         clusterDisableClickZoom: true
  80.                     });
  82.                     loadForm();
  83.                 });
  85.                 function loadRoutes() {
  86.                     $.ajax({
  87.                         url:routesUrl,
  88.                         dataType: "json",
  89.                         async: false,
  90.                         success: function (routes) {
  91.                             Routing.setRoutingData(routes);
  92.                         },
  93.                         error: function (xhr, ajaxOptions, thrownError) {}
  94.                     });
  95.                 }
  97.                 function setFormSubmitListener() {
  98.                     document.querySelector("form[name="+formName+"]").addEventListener('submit', function(e){
  99.                         e.preventDefault();
  100.                         if(!clusterer)
  101.                             return;
  102.                         filterData();
  103.                         return false;
  104.                     });
  105.                 }
  107.                 function loadForm() {
  108.                     fetch('{{ path('map.form', {city: cityUriIdentity}) }}', {
  109.                         mode: "cors",
  110.                         importance: "low",
  111.                         method: "POST",
  112.                         headers: {
  113.                             "Content-Type": "application/x-www-form-urlencoded",
  114.                             "X-Requested-With": "XMLHttpRequest"
  115.                         },
  116.                     }).then(response => {
  117.                         if (response.status < 300) {
  118.                             return response.text();
  119.                         } else {
  120.                             console.warn("🤔");
  121.                             return null;
  122.                         }
  123.                     }).then(response => {
  124.                         document.querySelector('#map_form').innerHTML = response;
  125.                         filterData();
  127.                         setFormSubmitListener();
  128.                     });
  129.                 }
  131.                 function filterData() {
  132.                     preloader.style.display = 'block';
  134.                     var data = {};
  135.                     $("form[name="+formName+"]").serializeArray().forEach((object)=>{
  137.                         //"подгоняем" данные под формат, ожидаемый формой при сабмите
  138.                         var fieldName = object.name.toString().replace(formName + '[', '').replace(']', '');
  139.                         var clearFieldName = fieldName.substr(0, fieldName.indexOf('['));
  140.                         if(~fieldName.indexOf('[]')) {
  141.                             checkArrayIsInFormObject(clearFieldName, data);
  142.                             data[clearFieldName].push(object.value);
  143.                         } else if(~fieldName.indexOf('[m')) {
  144.                             if(!object.value)
  145.                                 return;
  147.                             checkObjectIsInFormObject(clearFieldName, data);
  148.                             if(~fieldName.indexOf('[min]'))
  149.                                 data[clearFieldName]['min'] = object.value;
  150.                             if(~fieldName.indexOf('[max]'))
  151.                                 data[clearFieldName]['max'] = object.value;
  152.                         } else {
  153.                             data[fieldName] = object.value;
  154.                         }
  155.                     });
  157.                     $.ajax({
  158.                         url:'{{ path('map.filter', {city:cityUriIdentity}) }}',
  159.                         type: "POST",
  160.                         dataType: "json",
  161.                         data: {
  162.                             "form": JSON.stringify(data),
  163.                         },
  164.                         async: true,
  165.                         success: function (return_data) {
  166.                             // console.log(return_data);
  167.                             getDetailsData({
  168.                                 data: return_data,
  169.                                 callback: (points) => updateMap(points)
  170.                             })
  171.                             preloader.style.display = 'none';
  172.                         },
  173.                         error: function (xhr, ajaxOptions, thrownError) {}
  174.                     });
  175.                 }
  177.                 function checkArrayIsInFormObject(name, formObject) {
  178.                     if(false == formObject.hasOwnProperty(name))
  179.                         formObject[name] = [];
  180.                 }
  182.                 function checkObjectIsInFormObject(name, formObject) {
  183.                     if(false == formObject.hasOwnProperty(name))
  184.                         formObject[name] = {};
  185.                 }
  187.                 function getDetailsData({data, callback}) {
  188.                     const profilesRawData = data.profiles || [];
  189.                     const saloonsRawData = data.saloons || [];
  191.                     const profilesAllId = profilesRawData.map(_data => _data[0]).flat();
  192.                     const saloonsAllId = saloonsRawData.map(_data => _data[0]).flat();
  194.                     const profileArray = Array.isArray(profilesAllId) ? profilesAllId : [];
  195.                     const saloonIdArray = Array.isArray(saloonsAllId) ? saloonsAllId : [];
  197.                     const requestBody = {};
  198.                     requestBody.profiles = profileArray;
  199.                     requestBody.saloons = saloonIdArray;
  201.                     fetch('{{ path('map.detail', {city:cityUriIdentity}) }}', {
  202.                         method: "POST",
  203.                         headers: {
  204.                             'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  205.                             'X-Requested-With': 'XMLHttpRequest',
  206.                         },
  207.                         body: new URLSearchParams(requestBody).toString()
  208.                     })
  209.                     .then(response => response.json())
  210.                     .then(data => {
  211.                         const { profiles, saloons } = data;
  213.                         callback({ profiles, saloons });
  214.                     })
  215.                     .catch(error => console.error(error));
  218.                     {# $.ajax({
  219.                         url:'{{ path('map.detail', {city:cityUriIdentity}) }}',
  220.                         type: "POST",
  221.                         dataType: "json",
  222.                         data: {
  223.                             "profiles": profileArray.toString(),
  224.                             "saloons": saloonIdArray.toString(),
  225.                         },
  226.                         async: true,
  227.                         success: function (return_data) {
  228.                             console.log(return_data);
  230.                         },
  231.                         error: function (xhr, ajaxOptions, thrownError) {}
  232.                     }); #}
  233.                 }
  235.                 function updateMap(points) {
  236.                     clusterer.removeAll();
  238.                     if (!points || (points.profiles.length == 0 && points.saloons.length == 0)) return
  240.                     const mergedPoints = [...points.profiles, ...points.saloons];
  242.                     var getImgUrl = function(path, imgType) {
  243.                         if(path[0] == '/')
  244.                             return path;
  246.                             console.log(imgType)
  247.                             console.log(photoPath)
  248.                             console.log(thumbPath)
  250.                         var assetPackagePath = '';
  251.                         if(imgType == 'avatar')
  252.                             assetPackagePath = avatarPath;
  253.                         else if(imgType == 'photo')
  254.                             assetPackagePath = photoPath; // /media/profiles/vp/rd/vprdP4ShlKUpkOB.jpg
  255.                         else if(imgType == 'thumb')
  256.                             assetPackagePath = thumbPath; // /media/saloons/thumb///.jpg
  258.                         return `${assetPackagePath}${path.slice(0, 2).toLowerCase()}/${path.slice(2, 4).toLowerCase()}/${path}.jpg`;
  259.                     };
  261.                     var getPointData = function (point) {
  262.                         const isProfile = point[0] == 1;
  263.                         const isSaloon = point[0] == 2;
  264.                         let url = '';
  265.                         const uri = point[3];
  266.                         if(isProfile) {
  267.                             url = RoutingDecorator.generate(
  268.                                 'profile_preview.page',
  269.                                 multipleCities ? {city: cityUriIdentity, profile: uri} : {profile: uri}
  270.                             );
  271.                         } else if(isSaloon) {
  272.                             url = RoutingDecorator.generate(
  273.                                 'saloon_preview.page',
  274.                                 multipleCities ? {city: cityUriIdentity, saloon: uri} : {saloon: uri}
  275.                             );
  276.                         }
  278.                         var processProfileShowsUrl = '{{ path('map.increment_profile_shows', multipleCities ? {city:cityUriIdentity} : {}) }}';
  279.                         return {
  280.                             balloonContentHeader: '',
  281.                             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>'
  282.                                 + '<img style="display:none;" width="0" height="0" src="' + processProfileShowsUrl + '?id=' + (isProfile ? point[9] : null)+'" />', //не убирать, функционально важно
  283.                             balloonContentFooter: '<font size=1>' + point[8] + ',' + point[9] + ',' + point[10] + '</strong>',
  284.                             clusterCaption: '<strong>' + (isSaloon ? 'Салон ' : '') + point[4] + '</strong>'
  285.                         };
  286.                     };
  288.                     var getPointOptions = function (index, type) {
  289.                         return {
  290.                             preset: type == 'profile' ? 'islands#violetIcon' : 'islands#redIcon'
  291.                         };
  292.                     };
  294.                     var geoObjects = [];
  295.                     for(var i = 0, len = mergedPoints.length; i < len; i++) {
  296.                         const _point = mergedPoints[i];
  297.                         geoObjects[i] = new ymaps.Placemark([_point[1], _point[2]], getPointData(_point), getPointOptions(i, _point[0] == 1));
  298.                     }
  300.                     //В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
  301.                     clusterer.add(geoObjects);
  302.                     myMap.geoObjects.add(clusterer);
  304.                     // Спозиционируем карту так, чтобы на ней были видны все объекты.
  305.                     myMap.setBounds(clusterer.getBounds(), {
  306.                         checkZoomRange: true
  307.                     });
  308.                 }
  309.             });
  310.         })();
  311.     </script>
  312. {% endblock %}