Control.Attribution: атрибуция

Control.Attribution в Leaflet отвечает за отображение строки атрибуции карты и источников данных, используемых в слоях. Атрибуция является обязательным элементом большинства картографических проектов, поскольку фиксирует авторство тайлов, геоданных и картографических сервисов, а также выполняет требования лицензирования.

Контрол атрибуции выполняет несколько функций:

  • отображение текстовых ссылок на поставщиков картографических данных;
  • автоматическое агрегирование атрибуций от слоёв карты;
  • поддержка динамического обновления при добавлении и удалении слоёв;
  • соблюдение требований лицензий (OpenStreetMap, коммерческие провайдеры, кастомные источники).

Контрол размещается на карте как UI-элемент и обычно располагается в нижнем правом углу.

Базовая инициализация

При создании карты атрибуция обычно добавляется автоматически, если используются стандартные слои:

const map = L.map('map', {
    attributionControl: true
});

Либо контрол может быть создан явно:

const attribution = L.control.attribution().addTo(map);

При этом Leaflet автоматически добавляет базовый префикс:

Leaflet | © ...

Параметры Control.Attribution

Контрол поддерживает настройки при создании:

L.control.attribution({
    position: 'bottomright',
    prefix: 'Custom prefix'
});

position

Определяет положение элемента на карте:

  • topleft
  • topright
  • bottomleft
  • bottomright

По умолчанию используется bottomright.

prefix

Строка, отображаемая перед всеми атрибуциями. Может быть:

  • текстовой строкой;
  • отключена полностью (false);
  • кастомной HTML-строкой.

Примеры:

L.control.attribution({
    prefix: false
});

Отключение префикса убирает стандартную подпись Leaflet.

L.control.attribution({
    prefix: 'Map system'
});

Автоматическое добавление атрибуции слоями

Большинство слоёв Leaflet автоматически регистрируют атрибуцию через параметр attribution.

TileLayer и атрибуция

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

Эта строка автоматически передаётся в Control.Attribution.

При подключении нескольких слоёв их атрибуции объединяются:

L.tileLayer(url1, {
    attribution: 'Provider A'
});

L.tileLayer(url2, {
    attribution: 'Provider B'
});

В контроле будет отображено:

Provider A | Provider B

Методы управления атрибуцией

addAttribution

Добавляет строку атрибуции вручную:

map.attributionControl.addAttribution('Custom data source');

Используется для динамических данных, не привязанных к слоям.

removeAttribution

Удаляет ранее добавленную строку:

map.attributionControl.removeAttribution('Custom data source');

Важно: строка должна совпадать полностью.

setPrefix

Изменяет префикс после инициализации:

map.attributionControl.setPrefix('New prefix text');

Отключение:

map.attributionControl.setPrefix(false);

HTML в атрибуции

Leaflet допускает использование HTML в строках атрибуции:

L.tileLayer(url, {
    attribution: '<a href="https://openstreetmap.org">OSM</a> contributors'
});

Это позволяет добавлять кликабельные ссылки и структурированные подписи.

Работа с несколькими источниками данных

При сложных картах атрибуция формируется из множества источников:

  • базовый слой (тайлы);
  • векторные данные;
  • внешние GeoJSON источники;
  • плагины и оверлеи.

Пример:

const roads = L.geoJSON(data, {
    attribution: 'Road data © Government'
}).addTo(map);

const buildings = L.geoJSON(buildingsData, {
    attribution: 'Buildings dataset © City GIS'
}).addTo(map);

В результате Control.Attribution автоматически объединяет все источники.

Поведение при удалении слоёв

Leaflet отслеживает привязанные атрибуции и корректно обновляет контрол:

map.removeLayer(roads);

После удаления слоя соответствующая строка исчезает из атрибуции, если она больше не используется другими слоями.

Кастомный Control.Attribution

Можно полностью переопределить поведение контроллера:

const CustomAttribution = L.Control.Attribution.extend({
    addAttribution: function (text) {
        console.log('Добавлена атрибуция:', text);
        return L.Control.Attribution.prototype.addAttribution.call(this, text);
    }
});

const attribution = new CustomAttribution().addTo(map);

Такой подход используется для логирования или синхронизации с внешними UI-компонентами.

CSS-структура элемента

Контрол атрибуции имеет стандартную структуру DOM:

<div class="leaflet-control-attribution leaflet-control">
    <a href="...">Leaflet</a> | © OpenStreetMap contributors
</div>

Можно стилизовать через CSS:

.leaflet-control-attribution {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 6px;
}

Позиционирование и z-index

Control.Attribution входит в группу control-container и подчиняется общей системе слоёв UI:

  • располагается поверх тайлов;
  • не перекрывает интерактивные элементы карты;
  • имеет фиксированный z-index внутри контейнера контролов.

Особенности при работе с кастомными тайловыми провайдерами

Некоторые провайдеры требуют строгого соблюдения атрибуции. В таких случаях строка должна включать:

  • бренд провайдера;
  • ссылку на лицензию;
  • обязательные упоминания данных.

Пример:

L.tileLayer(url, {
    attribution: 'Map data © Provider Name, Terms apply'
});

Интеграция с динамическими данными

При использовании данных, загружаемых асинхронно:

fetch('/geo.json')
    .then(r => r.json())
    .then(data => {
        L.geoJSON(data, {
            attribution: 'Dynamic dataset © API service'
        }).addTo(map);
    });

Атрибуция добавляется только после загрузки слоя и автоматически включается в контрол.

Особенности объединения строк

Leaflet использует внутренний механизм Set для хранения атрибуций, что обеспечивает:

  • отсутствие дублирования;
  • автоматическое обновление;
  • порядок отображения без повторов.

При повторной добавлении одной и той же строки она не дублируется.

Отключение Control.Attribution

Полное отключение контроллера:

const map = L.map('map', {
    attributionControl: false
});

Используется при создании кастомного интерфейса или при интеграции с внешними системами отображения лицензий.

Взаимодействие с другими контролами

Control.Attribution не конфликтует с:

  • Zoom control;
  • Layers control;
  • Scale control.

Все контролы размещаются независимо и управляются контейнером .leaflet-control-container.

Типичные сценарии использования

  • карты с несколькими тайловыми провайдерами;
  • GIS-приложения с множеством источников данных;
  • интерактивные дашборды;
  • офлайн-карты с кастомными подписями источников;
  • корпоративные картографические системы с юридическими требованиями к отображению источников данных.
Оглавление