RelGL — JavaScript-библиотека, использующая WebGL для рендеринга интерактивных карт.
npm install rel-gl
Инициализация карты:
<div id="map" style="width: 800px; height: 600px;"></div>
<script>
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
});
</script>
Пример инициализации в React (с хуками):
import relgl from 'rel-gl';
import { useEffect } from 'react';
import 'rel-gl/dist/rel-gl.css';
export function Map() {
useEffect(() => {
relgl.accessToken = 'your-token';
relgl.baseApiUrl = 'https://api.blink-maps.com';
const map = new relgl.Map({
container: 'map',
zoom: 8,
center: [37.6165, 55.7505],
style: 'rel://api/styles/meringue_light_style.json',
hash: true,
});
return () => {
if (map) map.remove();
};
});
return <div id="map" style={{ width: '800px', height: '600px' }} />;
}