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

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:

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

@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 вы найдёте в разделах:

Was this information helpful?