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

MMR GL JS — JavaScript библиотека, которая использует WebGL для рендеринга интерактивных карт.

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

Подключение на html страницу

Необходимо добавить <script> и <link> в тэге <head>

<head>
  ...
  <script src="https://geo.rustore.ru/sdk/js/<version>/mmr-gl.js"></script>
  <link href="https://geo.rustore.ru/sdk/js/<version>/mmr-gl.css" rel="stylesheet">
  ...
</head>

Рекомендуется использовать самую свежую версию SDK. Для получения последней версии SDK можно указать 0 или 0.0 вместо точной версии, таким образом будет загружена последняя актуальная версия с номером 0.x.x либо 0.0.x соответственно.

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

<div id="map" style="width: 800px; height: 600px;"></div>
<script>
  mmrgl.accessToken = 'Token';
  var map = new mmrgl.Map({
    container: 'map',
    zoom: 8,
    center: [37.6165, 55.7505],
    style: 'mmr://api/styles/main_style.json',
    hash: true
  });
</script>

Создание токена

Для установки @geors/maps-sdk-js создайте токен на github:

Перейдите в настройки пользователя.
Найдите кнопку Developer settings в самом низу слева.
Создайте Personal access token с доступом для чтения пакетов (read:packages).
Создайте в корне проекта файл .npmrc.
Добавите в созданный файл две строчки.

@geors:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=ACCESS_TOKEN

Замените ACCESS_TOKEN на ваш созданный.

Установка пакета

Перейдите в корень проекта к package.json и с помощью npm или yarn установите пакет

yarn add @geors/maps-sdk-js

или

npm install @geors/maps-sdk-js

Для инициализации карты добавьте следующий код (пример на Реакте):

import mmrgl from '@geors/maps-sdk-js';
import { useEffect } from 'react'
 
import '@geors/maps-sdk-js/dist/mmr-gl.css';
 
export function Map() {
  useEffect( () => {
    mmrgl.accessToken = 'accessToken';
 
    const map = new mmrgl.Map({
      container: 'map',
      zoom: 8,
      center: [37.6165, 55.7505],
      style: 'mmr://api/styles/main_style.json',
      hash: true,
    })
 
    return () => {
      if (map) map.remove();
    }
  }
 
  return <div id="map" style={{ width: '800px', height: '600px'}} />
}

Детальная информация

Более подробную информацию по использованию MMR GL JS SDK вы найдёте в разделах:

1. Карта

2. Свойства и опции

3. Метки и элементы управления

4. География и геометрия

5. Handlers (обработчики)

6. Sources (источники)

7. Events (события)

8. Использование в React приложениях

Описание дополнительных объектов карты

Обновлено 24 января 2023 г.