Skip to main content

Creating and editing Yandex maps.

Project description

Logo

Version MIT Downloads Python Django

DjEYM ( django-editor-ymaps )

Удобное использование картографической службы Яндекса для веб-разработки на популярном и свободном фреймворке Django.

( Convenient use of the Yandex map service for web development on the popular and free Django framework. )

Условия использования API Яндекс.Карт ( Terms of use for the API )


Attention

  • При переходе на версию 1.2, обновите миграции: python manage.py migrate djeym

  • Обратите внимание на раздел - Выводим карту на страницу сайта.
    • Добавлены минимизированные файлы (.min.).

    • Добавлена поддержка es6 для IE.

  • When upgrading to version 1.2, upgrade the migration: python manage.py migrate djeym

Features

  1. Через панель администратора, создавать новые карты с богатой возможностью настроек. ( Through the admin panel, create new maps with a wide range of options. )

  2. Редактировать карты на специальной странице редактора, с доступом только для персонала. ( Edit maps on a special page of the editor, with access only for staff. )

  3. Создавать геообъекты четырех типов - Маркеры, маршруты, территории и тепловые точки. ( Create geo-objects of four types - Markers, routes, territories and heat points. )

  4. Использовать кастомные иконки для кластеров и маркеров в формате SVG. ( Use custom icons for clusters and markers in the format SVG. )

  5. Создавать категории и подкатегории для фильтрации геообъектов на карте. ( Create categories and subcategories for filtering geo objects on the map. )

  6. Добавлять источники тайловых слоев и API-ключи к ним (если требуется). Имеется возможность добавить стандартный набор из 21 источника. ( Add tile layer sources and API keys to them (if required). It is possible to add a standard set of 21 sources. )

  7. Скрывать ненужные элементы управления на картах. ( Hide unnecessary controls on maps. )

  8. Активировать тепловой слой, изменять настройки слоя и создавать тепловые точки. ( Activate the thermal layer, change the layer settings and create heat points. )

  9. Имеется возможность создавать и управлять пресетами для автоматической вставки некоторой текстовой информации или дополнительного функционала в информационных окнах геообъектов. Для каждой карты добавляются два стандартных пресета (Text и Likes). ( It is possible to create and manage presets for automatic insertion of some textual information or additional functionality in the information windows of geoobjects. Two standard presets are added for each map (Text and Likes). )

  10. Начиная с версии 1.1, добавлен шаблонный тег для прямого геокодирования. Например - На странице профиля, геокодер получает адрес пользователя и отображает его маркером на отдельной карте. Эти карты независимы, их ненужно создавать через панель администратора. Ниже, в документации, есть пример с описанием. ( Starting with version 1.1, a template tag has been added for direct geocoding. For example - On the profile page, the geocoder receives the user’s address and displays it with a marker on a separate map. These cards are independent, it is unnecessary to hack them through the admin panel. Below, in the documentation, there is an example with a description. )

  11. Начиная с версии 1.2, имеется возможность добавить индикатор загрузки в иноформационные окна геообектов. Назначение индикатора, в основном декоративное. На GitHub-е проекта находится архив с иконками ( Spinner.zip ). При переходе на версию 1.2, обновите миграции. ( Starting from version 1.2, it is possible to add a loading indicator to the information windows of geo objects. The purpose of the indicator, mostly decorative. On the GitHub project there is an archive with icons (Spinner.zip). When upgrading to version 1.2, upgrade the migration. )

Requirements

Installation

Install libraries ( Ubuntu >= 18.04, Mint 19.x ):

sudo apt install python-dev python3-dev libjpeg8-dev python-pil libevent-dev build-essential libpq-dev libxml2-dev libxslt1-dev gettext libjpeg-dev

Install django-editor-ymaps using pip:

pip install django-editor-ymaps

Settings

Add apps to your INSTALLED_APPS setting:

INSTALLED_APPS = [
    ...
    'imagekit',
    'smart_selects',
    'ckeditor',
    'ckeditor_uploader',
    'djeym',
    ...
]

Add other settings:

# django-ckeditor
CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/'
CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_FILENAME_GENERATOR = 'djeym.utils.get_filename'
CKEDITOR_IMAGE_BACKEND = 'pillow'
CKEDITOR_ALLOW_NONIMAGE_FILES = False  # Only image files. (На Ваше усмотрение)
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',
        'height': 400,
        'width': '100%',
    },
    'djeym': {
        'toolbar': 'full',
        'height': 400,
        'width': 362,
        'colorButton_colors': 'FFFFFF,F08080,CD5C5C,FF0000,FF1493,C71585,800080,F0E68C,'
                              'BDB76B,6A5ACD,483D8B,3CB371,2E8B57,9ACD32,008000,808000,'
                              '20B2AA,008B8B,00BFFF,F4A460,CD853F,A52A2A,708090,34495e,'
                              '999966,333333,82cdff,1e98ff,177bc9,0e4779,56db40,1bad03,'
                              '97a100,595959,b3b3b3,f371d1,b51eff,793d0e,ffd21e,ff931e,'
                              'e6761b,ed4543',
        'colorButton_enableAutomatic': False,
        'colorButton_enableMore': True
    }
}

# Add your URL
LOGIN_URL = '/admin/'

# django-smart-selects
# https://github.com/digi604/django-smart-selects
JQUERY_URL = False
USE_DJANGO_JQUERY = True

# API key - Used only in the paid API version.
# You can get the key in the developer’s office - https://developer.tech.yandex.ru/
# ( API-ключ - Используется только в платной версии API.
#   Получить ключ можно в кабинете разработчика - https://developer.tech.yandex.ru/ )
DJEYM_YMAPS_API_KEY = ''

# Map download mode. Default -> 'release'
# (Режим загрузки карт.)
# DJEYM_YMAPS_DOWNLOAD_MODE = 'debug'

# Font Awesome, Material Design etc.
# Default Font Awesome Free 5.3.1 - https://fontawesome.com
# Example: ['/static/path/css/style.min.css']
# Example: ['/static/path/js/script.min.js']
# Only for admin panel and editor page. (Только для панели администратора и страницы редактора.)
# For the site connect directly in templates. (Для сайта подключите непосредственно в шаблонах.)
DJEYM_YMAPS_ICONS_FOR_CATEGORIES_CSS = []
DJEYM_YMAPS_ICONS_FOR_CATEGORIES_JS = []

Add to main URLs:

urlpatterns = [
    ...
    path('chaining/', include('smart_selects.urls')),
    path('ckeditor/', include('ckeditor_uploader.urls')),
    path('djeym/', include('djeym.urls', namespace='djeym')),
    ...
]

Add directory to your project:

media/uploads

Update Migrations:

python manage.py migrate djeym

Usage

1) Добавьте иконку кластера. ( Add Cluster Icon. )

  1. Скачайте коллекции иконок. (Download icon collections.)

  2. Ознакомьтесь с содержимым архива. ( Read the contents of the archive. )

  3. Выберите иконку кластера и добавьте по адресу - Панель администратора > ЯНДЕКС КАРТЫ > Иконки для кластеров > Добавить Иконку для кластеров. ( Select the cluster icon and add it to the address - Admin Panel > YANDEX MAPS > Icons for Clusters > Add Icon for Clusters. )

2) Добавьте коллекцию иконок. ( Add icon collection. )

  1. Скачайте коллекции иконок. (Download icon collections.)

  2. Ознакомьтесь с содержимым архива. ( Read the contents of the archive. )

  3. Прочитайте readme файл для выбранной коллекции и добавьте коллекцию через панель администратора. ( Read the readme file for the selected collection and add the collection through the admin panel. )

Import Icon Collection

Добавляя собственные иконки, проверяйте смещение по эталону. ( By adding your own icons, check the offset by standard. )

Change Icon for markers

3) Добавьте источники тайловых слоев. ( Add tile sources. )

  1. Скачайте источники тайловых слоев. (Download tile sources.)

  2. Ознакомьтесь с содержимым архива. ( Read the contents of the archive. )

  3. Прочитайте readme файл и добавьте источники через панель администратора. ( Read the readme file and add sources through the admin panel. )

4) Создайте вашу первую карту. ( Create your first map. )

  1. Перейдите по адресу - Панель администратора > ЯНДЕКС КАРТЫ > Карты > Добавить Карту. ( Navigate to the address - Admin Panel > YANDEX MAPS > Maps > Add Map. )

5) Создайте категории геообъектов нужного типа для новой карты. ( Create categories of geo-objects of the desired type for the new map. )

  1. Категории маркеров. ( Marker categories. )

  2. Подкатегории маркеров. ( Subcategories of markers. )

  3. Категории маршрутов. ( Categories of routes. )

  4. Категории территорий. ( Categories of territories. )

6) Редактировать карту. ( Edit map. )

Edit map

Обзор страницы редактора. ( Editor page overview. )

1) Меню редактора - Иконки. ( Editor Menu - Icons. )

  • Доступ только для персонала. ( Access only to staff. )

Editor Menu - Icons

2) Меню редактора - Фильтры по категориям. ( Editor Menu - Filters by category. )

Editor Menu - Filters by category

3) Меню редактора - Источники тайлов. ( Editor Menu - Tile Sources. )

Editor Menu - Tile Sources

4) Меню редактора - Общие настройки. ( Editor Menu - General settings. )

Editor Menu - General settings

5) Меню редактора - Настройки тепловой карты. (Editor Menu - Heatmap settings.)

Editor Menu - Heatmap settings

6) Меню редактора - Пресеты. ( Editor Menu - Presets. )

  • Имеется возможность создавать свои пресеты. ( You can create your own presets. )

    Панель администратора > ЯНДЕКС КАРТЫ > Карты > Карта > ПРЕСЕТЫ > Добавить еще один Пресет

    ( Admin Panel > YANDEX MAPS > Maps > Map > PRESETS > Add another preset )

Editor Menu - Presets

Добавление геообъектов на карту. ( Adding geo-objects to the map. )

1) Добавим маркер. ( Add a marker. )

  1. Левый клик на карте, откроется меню с предложением выбрать тип объекта. ( Left-clicking on the map opens a menu with a suggestion to choose the type of object. )

  2. Выбираем кнопку - Добавить новый Маркер. ( Select the button - Add a new Marker. )
    Add a marker
  3. Выберите подходящую иконку. ( Choose the appropriate icon. )
    Choose an icon
  4. Добавим информацию об объекте. ( Add information about the object. )
    Add Info
    • Каждая из кнопок открывает свое окно текстового редактора. ( Each of the buttons opens its text editor window. )
      Popup with text editor
  5. Выбираем категорию для геообъекта. ( Select a category for a geoobject. )
    • Открываем категории. ( Open categories. )
      Open categories
    • Выбираем категорию. ( Choose a category. )
      Choose a category
  6. Нажимаем кнопку “+” и получаем результат. ( Press the “+” button and get the result. )
    • pic 1
      View result 1
    • pic 2
      View result 2
  7. Геообъекты редактируются через контекстное меню - Сделайте правый клик на объекте и внесите нужные изменения. Чтобы сохранить результат, нажмите кнопку с изображением дискеты. ( Geo-objects are edited via the context menu - Right-click on the object and make the necessary changes. To save the result, click the button with the image of a floppy disk. )
    • pic
      Update info

2) Вид Кластера. ( Cluster View. )

  • Кластер ( Cluster )
    Cluster
  • Popup - Two columns
    Two columns
  • Popup - Carousel
    Carousel

3) Маршрут. ( Route. )

  • Добавить маршрут. ( Add route. )
    Add route
  • Результат. ( Result. )
    Result
  • Редактировать ( Edit )
    Edit
  • Можно настроить соответствие по цвету. ( You can adjust the color matching. )
    Color matching

4) Территория. ( Territory. )

  • Добавить территорию. ( Add territory. )
    Add territory
  • Результат. ( Result. )
    Result
  • Редактировать ( Edit )
    Edit
  • Можно настроить соответствие по цвету. ( You can adjust the color matching. )
    Color matching

5) Тепловая карта. ( Heatmap. )

  • Добавить тепловую точку. ( Add heat point. )
    Add heat point
  • Добавить информацию. ( Add information. )
    Add info

Выводим карту на страницу сайта. ( Display a map on the site page. )

Добавьте в шаблон. ( Add to template. ):

{% load i18n staticfiles djeymtags %}

<head>
    <!-- START CSS -->
    <link rel="stylesheet" type="text/css" href="{% static "djeym/plugins/fontawesome/css/all.min.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "djeym/plugins/boxiOS/boxios.min.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "djeym/css/ymfront.min.css" %}">
    <!-- END CSS -->

    <!--Support es6 for older browsers-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.3/polyfill.min.js" nomodule></script>
</head>

<body>
  <!-- START MAP -->
  <div id="djeymYMapsID" class="djeym-ymap" style="width: auto; height: 400px"></div>
  <!-- END MAP -->

    <!-- START JS -->
    <script type="text/javascript" src="{% static "djeym/js/jquery-3.3.1.min.js" %}"></script>
    <script type="text/javascript" src="{% static "djeym/plugins/boxiOS/boxios.min.js" %}"></script>
    <script type="text/javascript" src="{% static "djeym/plugins/fontawesome/js/all.min.js" %}"></script>
    {% djeym_load_ymap slug='test' panel='djeym/includes/panel.html' %}
    <!-- END JS -->
</body>
  • Карта с закрытой панелью. ( Map with a closed panel. )
    Map with a closed panel
  • Карта с открытой панелью. ( Map with open panel. )
    Map with open panel

Custom Commands

  • Для того, чтобы проверить производительность ( достаточна ли она для вашего проекта ) - С помощью команды “addmarker”, добавьте некоторое количество маркеров на карту. ( In order to check the performance (whether it is sufficient for your project) - Using the “addmarker” command, add a certain number of markers to the map. )

  1. Скачайте архив, распакуйте и добавьте файлы в свой медиа-раздел. ( Download archive, unpack and add files to your media section. )

  2. Запустите команду. ( Run the command. )

Запустите в корневой директории вашего проекта. ( Run in the root directory of your project. ):

# Название карты: Test ( Map name: Test )
#
# Рекомендуется для настроек карты. ( Recommended for map settings. )
# Масштаб ( Zoom ): 3
# Широта ( Latitude ): 0
# Долгота ( Longitude ): 0

# --count - Default = 100
python manage.py addmarker --count 1000
Command result - addmarker

Использование Геокодера. ( Using Geocoder. )

  • Начиная с версии 1.1, добавлен шаблонный тег для прямого геокодирования. Например - На странице профиля, геокодер получает адрес пользователя и отображает его маркером на отдельной карте. Эти карты независимы, их ненужно создавать через панель администратора. ( Starting with version 1.1, a template tag has been added for direct geocoding. For example - On the profile page, the geocoder receives the user’s address and displays it with a marker on a separate map. These cards are independent, it is unnecessary to hack them through the admin panel. )

Условия использования API Геокодера

Terms of use for the Geocoder API

Добавьте в шаблон. ( Add to template. ):

{% load i18n staticfiles djeymtags %}

<body>
    <!-- START MAP -->
    <div id="djeymYMapsID" class="djeym-ymap" style="width: auto; height: 400px"></div>
    <!-- END MAP -->

    <!-- START JS -->
    <!--
    // Address. (Адрес.)
    address = country + region + city + district + street + house
    // Address Example: 'Россия, Белгородская обл., Старый Оскол, мкр. Жукова, дом 29а'

    // Map Controls. (Элементы управления картой.)
    controls = 'all' // Default -> 'zoom'

    // Tile layer map. (Тайловый слой карты.)
    tile_slug = 'openstreetmap' // Default -> 'default'

    // Marker icon. (Иконка маркера.)
    marker_slug = 'home-light-blue-sherry' // Default -> 'default'

    // Load indicator icon. (Иконка индикатора загрузки.)
    load_indicator_slug = 'platinum-circle' // Default -> 'default'

    // Load indicator size (Размер индикатора нагрузки.)
    size = '96' - (64, 96, 128) // Default -> '64'

    // Скорость анимации для индикатора загрузки. ( Animation speed for loading indicator. )
    speed = '0.6' - (0.3-1.8) // Default -> '0.8'
    -->
    {% ymap_geocoder address='Россия, Белгородская обл., Старый Оскол, мкр. Жукова, дом 29а' tile_slug='openstreetmap' marker_slug='home-light-blue-sherry' load_indicator_slug='platinum-circle' size='96' speed='0.6' %}
    <!-- END JS -->
</body>
Geocoder

LICENSE

Donation

CHANGELOG

  • # 1.2.16
    • Обновлен файл README.rst. ( Updated README.rst file. )

  • # 1.2.15
  • # 1.2.14
    • Замена логотипа. ( Replacing the logo. )

  • # 1.2.13
    • Обновлены стили для панели редактора. ( Updated styles for panel editor. )

  • # 1.2.12
    • Улучшена последовательность загрузки геообъектов на карту. Релиз переведен в статус Stable. ( Improved sequence of loading geo objects onto the map. Release translated to Stable status. )

  • # 1.2.11
    • Добавлен дефолтный шрифт в инфо-окна геообъектов и окна контекстного меню. ( Added default font in geo-objects info-windows and context menu windows. )

  • # 1.2.10
    • Обновлены стили для панели, для страницы сайта. Добавлен дефолтный шрифт. ( Updated styles for the panel for the page. Added default font. )

  • # 1.2.9
    • Обновлена панель для страницы редактора. ( Updated panel page editor. )

  • # 1.2.8
    • Индикатор загрузки - В панель редактора карт, добавлено уточнение для величины скорости анимации. ( Load Indicator - In the panel of the map editor, added clarification for the value of the speed of animation. )

  • # 1.2.7
    • В настройки карт добавлен параметр - Скорость анимации для индикатора загрузки. ( Added a parameter to the map settings - Animation speed for the load indicator. )

    • Добавлен параметр “speed” для Геокодера. ( Added “speed” parameter for Geocoder. )

    • Использование Геокодера. ( Using Geocoder. )

    • Обновите миграции. ( Update the migration. )

    • python manage.py migrate djeym

  • # 1.2.6
    • Минимизированы файлы CSS и JS, загружаемые в панель администратора. ( The CSS and JS files loaded into the admin panel are minimized. )

  • # 1.2.5
    • Исправлено отсутствие полной поддержки для SQLite3.

    • За комментарии на GitHub-е, отдельное спасибо Александру Бардину.

  • # 1.2.4
    • Обновленная панель для страницы редактора карт. Изменения сделаны для раздела - Помощь.

    • ( Updated panel for the map editor page. Changes are made to the section - Help. )

    • Обратите внимание на раздел - Выводим карту на страницу сайта. Добавлены минимизированные файлы (.min.).

  • # 1.2.3
    • Сделаны исправления и улучшения для индикатора загрузки.

    • ( Made fixes and improvements for the load indicator. )

  • # 1.2.2
    • Индикатор загрузки - Исправлено некорректное определение минимальной высоты окна для геообъекта.

    • ( Load Indicator - Fixed incorrect determination of the minimum window height for a geoobject. )

  • # 1.2.1
    • Обновлен индикатор загрузки. ( Updated load indicator. )

    • Обновите миграции. ( Update the migration. )

    • python manage.py migrate djeym

  • # 1.2
    • Возможность добавить индикатор загрузки в информационные ока геообъектов. На GitHub-е проекта находится архив с иконками ( Spinner.zip ). ( Ability to add a loading indicator to the information eye of geo objects. On the GitHub project there is an archive with icons (Spinner.zip). )

    • Обновлен Геокодер и его настройки. Новые настройки имеются в описании выше. ( Updated Geocoder and its settings. New settings are available in the description above. )

    • Сделано несколько небольших исправлений. ( Made a few minor fixes. )

    • При переходе на версию 1.2, обновите миграции. ( When upgrading to version 1.2, upgrade the migration. )

    • python manage.py migrate djeym

  • # 1.1
    • Добавлен Геокодер, пример использования в описании выше. ( Added Geocoder, an example of use in the description above. )

  • # 1.0.11
    • Optimized update information for presets.

  • # 1.0.10
    • Tile Sources - Updated templatetags - random_domain ( increased subdomains scatter ).

  • # 1.0.9
    • Updated custom command - addmarker.

    • Updated admin panel section - Change icon for markers.

  • # 1.0.8
    • Admin panel, section “Change Icon for markers” - The size of the icons on the map is increased, for the convenience of correction the offset.

  • # 1.0.7
    • Optimized map panel for the site page.

  • # 1.0.6
    • Custom command “addmarker” - The value of the variable Slug is changed to “test”.

    • Panel for the site map - Added conditions for hiding buttons with empty filters.

    • Admin Panel, section “Change Icon for markers” - Changed the map to a dark theme, for contrast.

    • Updated README.rst

  • # 1.0 - 1.0.5
    • Added automatic styles correction for Firefox. - Fixed font size for headings and buttons.

    • Added automatic substitution of the version number in the help section.

    • Updated migration for optimization.


Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-editor-ymaps-1.2.16.tar.gz (2.6 MB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page