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.                             updateMap(return_data);
  168.                             preloader.style.display = 'none';
  169.                         },
  170.                         error: function (xhr, ajaxOptions, thrownError) {}
  171.                     });
  172.                 }
  174.                 function checkArrayIsInFormObject(name, formObject) {
  175.                     if(false == formObject.hasOwnProperty(name))
  176.                         formObject[name] = [];
  177.                 }
  179.                 function checkObjectIsInFormObject(name, formObject) {
  180.                     if(false == formObject.hasOwnProperty(name))
  181.                         formObject[name] = {};
  182.                 }
  184.                 function updateMap(points) {
  185.                     clusterer.removeAll();
  187.                     if(!points || !points.length)
  188.                         return;
  190.                     var getImgUrl = function(path, imgType) {
  191.                         if(path[0] == '/')
  192.                             return path;
  194.                         var assetPackagePath = '';
  195.                         if(imgType == 'avatar')
  196.                             assetPackagePath = avatarPath;
  197.                         else if(imgType == 'photo')
  198.                             assetPackagePath = photoPath;
  199.                         if(imgType == 'thumb')
  200.                             assetPackagePath = thumbPath;
  202.                         return assetPackagePath + path;
  203.                     };
  205.                     var getPointData = function (index) {
  206.                         const data = points[index];
  208.                         const isProfile = data[0] == 1;
  209.                         const isSaloon = data[0] == 2;
  210.                         let url = '';
  211.                         const uri = data[3];
  212.                         if(isProfile) {
  213.                             url = RoutingDecorator.generate(
  214.                                 'profile_preview.page',
  215.                                 multipleCities ? {city: cityUriIdentity, profile: uri} : {profile: uri}
  216.                             );
  217.                         } else if(isSaloon) {
  218.                             url = RoutingDecorator.generate(
  219.                                 'saloon_preview.page',
  220.                                 multipleCities ? {city: cityUriIdentity, saloon: uri} : {saloon: uri}
  221.                             );
  222.                         }
  224.                         var processProfileShowsUrl = '{{ path('map.increment_profile_shows', multipleCities ? {city:cityUriIdentity} : {}) }}';
  225.                         return {
  226.                             balloonContentHeader: '',
  227.                             balloonContentBody: '<p><img src="' + getImgUrl(data[5], isProfile ? 'avatar' : 'thumb') + '" width="100" /></p>' + '<font size=3><b><a target="_blank" href="' + url + '">Профиль</a></b></font>'
  228.                                 + '<img style="display:none;" width="0" height="0" src="' + processProfileShowsUrl + '?id=' + (isProfile ? data[9] : null)+'" />', //не убирать, функционально важно
  229.                             balloonContentFooter: '<font size=1>' + data[8] + ',' + data[9] + ',' + data[10] + '</strong>',
  230.                             clusterCaption: '<strong>' + (isSaloon ? 'Салон ' : '') + data[4] + '</strong>'
  231.                         };
  232.                     };
  234.                     var getPointOptions = function (index, type) {
  235.                         return {
  236.                             preset: type == 'profile' ? 'islands#violetIcon' : 'islands#redIcon'
  237.                         };
  238.                     };
  240.                     var geoObjects = [];
  241.                     for(var i = 0, len = points.length; i < len; i++)
  242.                         geoObjects[i] = new ymaps.Placemark([points[i][1], points[i][2]], getPointData(i), getPointOptions(i, points[i][0] == 1));
  244.                     //В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
  245.                     clusterer.add(geoObjects);
  246.                     myMap.geoObjects.add(clusterer);
  248.                     // Спозиционируем карту так, чтобы на ней были видны все объекты.
  249.                     myMap.setBounds(clusterer.getBounds(), {
  250.                         checkZoomRange: true
  251.                     });
  252.                 }
  253.             });
  254.         })();
  255.     </script>
  256. {% endblock %}