rel-gl

Форк MapLibre GL JS с протоколом rel:// и брендингом blinkmaps.

Установка

npm install rel-gl

Быстрый старт

<link href="node_modules/rel-gl/dist/rel-gl.css" rel="stylesheet">
<script src="node_modules/rel-gl/dist/rel-gl.js"></script>

<div id="map" style="width: 100%; height: 100vh;"></div>

<script>
  relgl.accessToken = 'your-token';
  relgl.baseApiUrl = 'https://api.blink-maps.com';

  const map = new relgl.Map({
    container: 'map',
    style: 'rel://api/styles/meringue_light_style.json',
    center: [37.6173, 55.7558],
    zoom: 10,
    attributionControl: false
  });

  map.addControl(new relgl.NavigationControl(), 'top-right');

  map.on('load', () => {
    console.log('Map loaded');
  });
</script>

ES модули

import relgl from 'rel-gl';
import 'rel-gl/dist/rel-gl.css';

relgl.accessToken = 'your-token';
relgl.baseApiUrl = 'https://api.blink-maps.com';

const map = new relgl.Map({
  container: 'map',
  style: 'rel://api/styles/meringue_light_style.json',
  center: [37.6173, 55.7558],
  zoom: 10
});

map.addControl(new relgl.NavigationControl());

Конфигурация

// Свойства (рекомендуемый способ)
relgl.accessToken = 'your-token';
relgl.baseApiUrl = 'https://api.blink-maps.com';

// Геттеры/сеттеры (тоже работают)
relgl.setAccessToken(token);
relgl.setBaseApiUrl(url);
relgl.getAccessToken();
relgl.getBaseApiUrl();

accessToken передается как query-параметр api_key во всех запросах через rel://.

baseApiUrl по умолчанию пустой — его нужно установить перед загрузкой стиля.

Протокол rel://

rel:// резолвится в baseApiUrl:

rel://path/to/resource  ->  {baseApiUrl}/path/to/resource

Тайловые запросы (arrayBuffer, кроме шрифтов) автоматически идут через поддомен tiles..

Кастомный протокол-хэндлер

Можно переопределить встроенный хэндлер:

relgl.addProtocol('rel', async (params, abortController) => {
  const response = await fetch(myResolve(params.url), {
    signal: abortController.signal
  });
  const data = params.type === 'json'
    ? await response.json()
    : await response.arrayBuffer();
  return { data };
});

Маркеры и попапы

const marker = new relgl.Marker({ color: '#e94560' })
  .setLngLat([37.6173, 55.7558])
  .setPopup(new relgl.Popup().setText('Moscow'))
  .addTo(map);

Навигация

map.flyTo({ center: [30.3158, 59.9398], zoom: 14, duration: 2000 });
map.easeTo({ bearing: 45, duration: 800 });
map.fitBounds([[29.5, 59.7], [31.2, 60.2]], { padding: 60 });

API

Такой же как у MapLibre GL JS — только relgl вместо maplibregl.

Сборка из исходников

npm install
npm run build-prod
npm run build-css

Результат в dist/.

Лицензия

BSD-3-Clause