Вывод точек на карте Яндекс. Интеграция с Яндекс Карты

Введение

Карта с точками выводится как специальный режим компонента таблицы (viewMode=yamap).

Внимание! Бесплатная версия Яндекс Карт имеет ограничения. Про тарифы и ограничения бесплатной версии - https://yandex.ru/dev/maps/commercial/

Демостенд отображения точек на карте Яндекс. 

Множество интерактивных примеров от Яндекса, которые позволят лучше понять настройки отображения карт - https://yandex.ru/dev/maps/jsbox/2.1/icon_customImage

Вывод маркеров на Яндекс Карте

Для настройки карты необходимо сделать следующее: 

0 Получаем ключ API Яндекс Карт - https://yandex.ru/dev/maps/jsapi/doc/2.1/quick-start/index.html#get-api-key. В будущем управлять своими ключами API Яндекса можно здесь - https://developer.tech.yandex.ru/services

1. Создаем таблицу без столбцов (столбцы можно будет добавить только в случае необходимости фильтров).

2. Прописываем GetItems 

В SELECT 1 указываем точки

В SELECT 3 указываем viewType=yamap и yamapOptions

Пример: 

CREATE PROCEDURE [dbo].[crud_yamap_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	declare @points table (id int, lat float, lng float, hint nvarchar(max), draggable bit, 
                        body nvarchar(max), header nvarchar(max), footer nvarchar(max), preset nvarchar(128), 
    					icon nvarchar(max), iconCaption nvarchar(max), iconColor nvarchar(64), iconCaptionMaxWidth int, 
                        formCode nvarchar(64), formItemID int, formBig int,  formTitle nvarchar(256), formBtnText nvarchar(64))
    
	insert into @points
	select 1 id, 55.66 lat, 37.64 lng, 'hint1' hint1, 1 draggable, 
    	'body1' body, 'header1' header, 'footer1' footer, '' preset, 
        '' icon, '' iconCaption, '' iconColor, 200 iconCaptionMaxWidth , 
        '' formCode, '0' formItemID, 0  formBig, '' formTitle, '' formBtnText
	union 
    select 1 id, 55.46 lat, 37.84 lng, 'hint2' hint1, 1 draggable, 
    	'body2' body, 'header2' header, 'footer2' footer, '' preset, 
        '' icon, '' iconCaption, '' iconColor, 200 iconCaptionMaxWidth , 
        '' formCode, '0' formItemID, 0  formBig, '' formTitle, '' formBtnText
	
    -- SELECT 1
	select * 
	from @points
	-- SELECT 2
	select 1
	-- SELECT 3
    select 1 HideTitleCount, 'yamap' viewtype, 
    	'{
        	"height": "600px", 
            "key": "----------Наш ключ API----------------------------",
            "searchProvider": "yandex#search",
            "searchText": "",
            "showUserLocation": false,            
             "mapParams": {
                "center": [53.76, 37.64],
                "zoom": 9
            },
            "clustererParams": { 
            	"preset": "islands#invertedGreenClusterIcons" 
            },
            "afterMoveMarkerRefreshContainer": "body"
        }' yamapOptions 
END

SELECT 1 имеет следующие параметры: 

• id - идентификатор (нужен для сохранения позиции при перемещении)
• lat lng - координаты маркера
• hint - подсказка при наведении
• draggable - если 1, то точку можно перемещать
• body, header, footer - вывод некой разметки во всплывающем окошке при клике на маркер. 
• preset - настройка отображения вида значка, например twirl#redStretchyIcon. Все примеры - https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/option.presetStorage.html
• icon, iconCaption, iconColor, iconCaptionMaxWidth - вывод у иконки текста, подсказки, изменение цвета иконки и ограничение длины подсказки (обрезка длинных названий).
• formCode, formItemID, formBig, formTitle, formBtnText - если указан formCode, то при клике на маркер будет выводиться модальная форма с itemID = formItemID. Если formBig=1, то окно будет большое. Кнопка сохранения имеет текст formBtnText, заголовок модального окна будет formTitle. 

SELECT 3 - Настройки yamapOptions

• key - ключ АПИ Яндекс Карт. Получать здесь - https://yandex.ru/dev/maps/jsapi/doc/2.1/quick-start/index.html#get-api-key
• height - высота контейнера с картой. По умолчанию 400px.
• searchProvider - если активирован поиск в mapParams.controls (по умолчанию активирован), то данный параметр влияет на какие объекты будут искаться через поиск.   
• searchText - если задан текст, то при загрузке карты сработает автоматический поиск и отображение найденных объектов. 
• showUserLocation - если true, то на карте будет отражен значок местонахождения текущего пользователя (при условии, что он разрешил геолокацию в браузере). 
• mapParams - настройки компонента Яндекс Карты (все свойства описаны здесь - https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/Map.html) 
  • center - установка центра карты
  • zoom - какой будет масштаб карты по умолчанию при загрузке
  • controls - массив выводимых элементов управления на карте (по умолчанию выводятся все элементы. Если необходимо все скрыть - то передаем [])
• clustererParams  - настройки кластера маркеров (объединение нескольких маркеров в одну точку). Подробнее - https://yandex.ru/dev/maps/jsbox/2.1/clusterer_create
• afterMoveMarkerRefreshContainer - когда передвинули точку, есть потребность обновить часть экрана. В этом параметре указывается селектор для обновления области экрана. Пример: 'body'.

Как сохранить значение координат при передвижении маркера по карте 

У точек необходимо установить draggable = 1. 

Также необходимо реализовать updateItemField у таблицы. 

CREATE PROCEDURE [dbo].[crud_yamap_updateField]
	@itemID int,
	@field nvarchar(64),
	@value nvarchar(max),
	@username nvarchar(64)
AS
BEGIN
print @itemID
print @value
print @field


if(@field = 'marker') begin
	update t1 
    set lat = dbo.str_splitPart(@value, '||', 1),  lng = dbo.str_splitPart(@value, '||', 2) 
    where id = @itemID	
end else begin 
	select 'Невалидный код свойства' Msg, 0 Result
	return 
end  
select '' Msg, 1 Result	

END

Что передается на вход: 

• в field приходит значение marker,
• value содержит координаты в виде lat||lng,
• itemID равно полю id из GetItems SELECT 1.

Дополнительные материалы

1. Интеграция с Яндекс XML API
2. Интеграция API Яндекс.Вебмастер
3. Интеграция с Тургенев API для проверки качества контента
4. Интеграция с Google Drive API
5. Базовая интеграция с Jitsi Meet
6. Интеграция с Vox Implant