1.32. Как настроить внешний вид Веб ГИС¶

Примечание

Эта функциональность доступна только для пользователей плана Premium с правами администратора.

Веб ГИС поддерживает настройку своего внешнего вида. Внешний вид включает: логотипы, цвета шапки, фона, кнопок и других элементов.

1.32.1. Загрузка логотипа¶

Вы можете поставить свой логотип вместо логотипа NextGIS в верхнем левом углу. Изменить/убрать логотип NextGIS на самой Веб карте - нельзя.

Чтобы загрузить логотип, в панели управления (см. Рис. 5.5., п.1) необходимо выбрать пункт Логотип и в открывшемся окне загрузить файл в формате PNG, высотой до 45 px, ширина до 200 px. После этого требуется нажать на кнопку «Сохранить».

1.32.2. Изменение стиля элементов интерфейса¶

Войдите в свою Веб ГИС с правами администратора, откройте раздел Панель управления и выберите пункт Пользовательские стили CSS.
В открывшейся вкладке можно задать собственные стили CSS. Они будут использованы для оформления всех страниц вашей Веб ГИС.

Изменить цвет шапки¶

.header{background-color: #F44336; color: #fff;}

Скрыть пункт Войти¶

Пункт будет скрыт с Веб-карт и со всех остальных страниц.

.header-nav {
        display: none;
}

Скрыть кнопки Поделиться, Печать с Веб-карт¶

.navigation-menu__item[data-item-value=sharePanel],
.navigation-menu__item[data-item-value=printMapPanel]{
        display: none;
}

Скрыть кнопки Увеличения и Уменьшения зума, кнопки Домой¶

.control-pane.control-pane--top.control-pane--left {
        display: none;
}

Скрыть заголовок окна идентификации объекта на веб-карте¶

div.ngwPopup__content div div.dijitAlignTop,
div.ngwPopup__features span.ngwWebmapToolIdentify-controller {
    display: none;
}

Скрыть иконки у слоёв на веб-карте¶

.dijitIcon.dijitTreeIcon.dijitLeaf {
    display: none;
}
.dijitIcon.dijitTreeIcon.dijitFolderOpened  {
    display: none;
}

.dijitIcon.dijitTreeIcon.dijitFolderClosed {
    display: none;
}

Сделать фон веб карты другим цветом¶

.ol-viewport {
        background-color: #000;
}

Расширенный пример настройки внешнего вида Веб ГИС¶

Этот пример показывает, как настроить большинство изменяемых элементов внешнего вида вашей Веб ГИС. Вы можете использовать фрагменты приведенных ниже стилей в своей Веб ГИС как есть или с нужными вам изменениями. Увидеть эти стили в действии можно тут.

/* Base background */

body{
  background-color: #fff;
  background-image:url("https://nextgis.ru/img/hypnotize_transparent.png");
}

/* Header text and background color */

.header{
  background-color: #F44336;
  color: #fff;
}

/* Separator color between logo and title */

.header__title-logo{
  border-right: 1px solid rgba(255,255,255,.48) !important;
}

/* User info color in header */

.user-avatar__label{
  background-color: #fff !important;
  color: #F44336 !important;
}

.user-avatar .user-avatar__icon{
  color: rgba(255,255,255,.82) !important;
}

/* Primary button */

.dijitButton--primary{
  background-color: #fff !important;
  color:#f44336 !important;
  font-weight: bold !important;
  border: 2px solid #f44336 !important;
}

.dijitButton--primary:hover{
  background-color: #f44336 !important;
  color: #fff !important;
}

/* Default button */

.dijitButton--default{
  background-color: #fff !important;
  color:#999 !important;
  font-weight: bold !important;
  border: 2px solid #999 !important;
}

.dijitButton--default:hover{
  background-color: #999 !important;
  color: #fff !important;
}

/* Tabs color */

.dijitTabContainerTop-tabs .dijitTabChecked{
  border-top-color: #f44336 !important;
}

/* Left navigation panel on the map */

.navigation-menu{
  background-color: #fff !important;
  border-right: 1px solid rgba(0,0,0,.12) !important;
  color: #000 !important;
}