Пользовательский виджет "Картосхема"

Пользовательский виджет "Картосхема"

  1. В редакторе SVG файлов нарисуйте векторное изображение картосхемы.

  2. Откройте получившийся файл через редактор кода.

  3. Получившийся код скопируйте и вставить в форму кода на портале https://highcharts.github.io/map-from-svg/.

  4. Нажать кнопку Load и посмотреть, что получилось справа.

  5. Скопировать код в блокнот, добавив каждому полигону следующие параметры:

    1. hc-code (код для карты) – это использовать в данных;

    2. short-name (короткое имя);

    3. full-name (длинное имя).

  6. Сохраните получившийся код в формате "*.js".

  7. Назовите файл, например russia_wiki.js.

  8. Добавьте получившийся файл в папку на сервер по адресу /docker-volume/dashboard-viewer/customjs.

  9. Откройте приложение Dashboard Designer.

  10. На вкладке Пользовательские виджеты, нажмите кнопку“Создать новый”.

  11. В открывшемся окне введите название для виджета.

  12. В поле Код виджета (JavaScript) вставьте код из файла widgets_kod.js.

  13. Нажмите кнопку “Сохранить”.

  14. Добавьте виджет в рабочую область.

  15. На вкладке Привязка данных, привяжите данные для виджета.

Важно!

Для корректного отображения информации, в данных должен существовать атрибут с гео кодом. Данный гео код должен соответствовать полю “hc-code” из файла russia_wiki.js.

 

Важно!

Не забудьте указать название добавленного файла в пользовательских свойствах виджета.

Параметр:

"useMap": "*",