Поисковый виджет

Данный виджет позволяет добавить на Ваш сайт поиск различных объектов по адресу, координатам, названию и другим параметрам. Вы даже можете добавить свои собственные объекты для выдачи в строке поиска. Также этот виджет легко скомбинировать с нашей картой. Вы можете ознакомиться с исходным кодом на нашей странице GitHub.

Подготовка страницы

Для подключения виджета необходимо выполнить несколько шагов:

1. Получить ключ доступа к сервисам Visicom Tiles и Visicom Data API.

2. В раздел head страницы подключить СSS файл со стилями виджета

<link rel="stylesheet" href="https://api.visicom.ua/apps/visicom-autocomplete/visicom-autocomplete.min.css">

3. Включить загрузку самого «движка», желательно перед закрывающимся тегом body.

<script src="https://api.visicom.ua/apps/visicom-autocomplete/visicom-autocomplete.min.js"></script>

4. Определить div в котором будет отображаться карта. Наличие элемента с тегом <a> обязательно. Этот элемент исчезнет при инициализации.

<div id="visicom-autocomplete">
    <a href="https://api.visicom.ua/" target="_blank">© Visicom</a>
</div>

Инициализация виджета

Для инициализации виджета необходимо вставить следующий код между тегами script:


let ac = new visicomAutoComplete({        
    apiKey : 'YOUR_AUTHORITY_KEY',
});   

Не забудьте заменить YOUR_AUTHORITY_KEY на ключ, полученный при регистрации. Кроме указанного параметра apiKey есть и другие полезные опции.

На данный момент поддерживаются опции:

  • apiKey — Ваш ключ доступа к Visicom Data API (обязателен, если не указаны ссылки для проксирования)
  • selector — селектор элемента, в котором создается виджет (опционально, default = '#visicom-autocomplete')
  • width — ширина виджета (опционально, default = '400px')
  • height — высота виджета (опционально, default = '35px')
  • placeholder — текст, показываемый при пустом поле ввода (опционально, default = 'Search...')
  • minCahrs — минимальное кол-во символов, при котором начнется поиск (опционально, default = 3). Чем меньше число, тем больше будет использоваться запросов
  • delay — задержка между вводом символов, при которой начнется поиск, мс (опционально, default = '150'). Чем меньше число, тем больше будет использоваться запросов
  • suggestsLimit — максимально отображаемое кол-во предложений (опционально, default = '5')
  • maxCharsInSuggest — максимальное кол-во символов, выводимых в предложениях (опционально, default = '55')
  • lang — язык поиска (опционально, default = 'local', можно также указать один из: 'uk', 'en', 'ru')
  • searchTextPrefix — этот текст при поиске будет вставлен перед текстом из поля ввода. Так Вы можете указать свой город, чтобы поиск велся по нему (опционально, default = '')
  • onSuggestSelected — функция, которая будет вызвана при выборе предложения (опционально, default = () => console.log)
  • map — созданный объект map (при использовании библиотеки Leaflet) (опционально). При выборе предложения, карта покажет это место. Если не указана, то выполнится только функция onSuggestSelected
  • marker — Ваш собственный маркер для отображения на карте (опционально)
  • proxyApiGeocodeUrl — адрес для проксирования запроса типа geocode (опционально). При этом Вам не надо указывать Ваш ключ для доступа к Visicom Data API. На Ваш сервер будет отправлен GET запрос со следующими параметрами: text (текст, который ищется), lang, key (API key), limit (suggestsLimit)
  • proxyApiFeatureUrl — адрес для проксирования запроса типа feature (опционально). При этом Вам не надо указывать Ваш ключ для доступа к Visicom Data API. На Ваш сервер будет отправлен GET запрос со следующими параметрами: feature_id (id объекта feature, который запрашивается), lang, key (API key)
  • customFeatures — массив Ваших объектов (опционально). Объекты из этого списка будут иметь высший приоритет при отображении в предложениях. Каждый объект в массиве должен содержать 3 поля: html (текст, отображаемый в предложении), keywords (текст, в котором содержатся ключевые слова для поиска), coords (массив из двух координат Вашего объекта)

При использовании прокси сервера обязательно возвращать точно такой же JSON объект, который получил Ваш сервер от Visicom Data API.

При инициализации виджета в Javascript будет возвращен объект, который имеет следующие методы:

  • clear — очищает поле ввода и все предложения

Весь пример вместе с картой


<!DOCTYPE html>
<html lang="uk">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <link rel="stylesheet" href="https://api.visicom.ua/apps/visicom-autocomplete/visicom-autocomplete.min.css">
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
  </head>
  <body>
    
    <div id="visicom-autocomplete">
      <a href="https://api.visicom.ua/" target="_blank">© Visicom</a>
    </div>
    <div id="map" style="width: 800px; height: 400px;"></div>

  </body>
  <script type="text/javascript" src="https://api.visicom.ua/apps/visicom-autocomplete/visicom-autocomplete.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
  <script>

    document.addEventListener('DOMContentLoaded', function(){
        let map = new L.Map('map', {
            center: new L.LatLng(50.455002, 30.511284), 
            zoom: 9,                                
            layers : [
                new L.TileLayer(
                    // paste below your private API key in key parameter
                    'https://tms{s}.visicom.ua/2.0.0/planet3/base_ru/{z}/{x}/{y}.png?key=YOUR_AUTHORITY_KEY',
                    {
                    maxZoom : 19,
                    tms : true,
                    attribution : 'Данные карт © 2018 ЧАО «Визиком»',
                    subdomains : '123'
                    }        
                )
            ]
        }); 

        let ac = new visicomAutoComplete({        
            selector : '#visicom-autocomplete',      // search div selector
            apiKey : 'YOUR_AUTHORITY_KEY',                 // paste here your private API key
            placeholder : 'Search your places...',   // placeholder for search input
            minChars : 3,                            // min chars to start searching
            delay : 150,                             // delay between key pressed for search to start
            width : '400px',                         // width of search input
            height : '35px',                         // height of search input
            map: map,                                // map object to zoom on it
            suggestsLimit : 5,                       // limit of suggests to display
            maxCharsInSuggest: 55,                   // max chars to display in suggest
            lang : 'local',                             // language for searching
            onSuggestSelected : suggest => console.log('Suggest selected: ' + (suggest.html)), 
            customFeatures: [{                       // custom feature objects
                    html: 'наша фирма',
                    keywords: 'киев вербицкого наша фирма',
                    coords:[50, 30],
                },
                {
                    html: 'тестовый вариант',
                    keywords: 'чернигов шевченко 23',
                    coords:[50.46537, 30.48019],
                }],
        });
    });
  </script>
</html>

Результат