:Author: Владимир Агафонкин, адаптация для live DVD от Johan Van de Wauw

********************************************************************************
Начало работы с Leaflet
********************************************************************************

Запуск
================================================================================

Перед началом работы вы должны запустить TileLite. Он находится в меню **Geospatial\\Spatial Tools\\Start Mapnik & TileLite** на диске OSGeo-live.
Это обеспечит работу тайлов, которые будут использоваться в данной демонстрации. 

Посмотрите пример_

.. tip :: Если вы читаете данное руководство не на диске OSGeo Live, то возможно вам лучше прочитать оригинальную статью http://leafletjs.com/examples/quick-start.html, так как в данном руководстве акцент сделан на тайлы TileLite c DVD-диска.

Начальная подготовка вашей страницы
===================
Перед тем как начать писать код для карты, вам следует выполнить рад действий для подготовки вашей страницы:

* Добавьте ссылку на файлы стилей Leaflet в блоке head вашей страницы

.. code-block:: html

 <link rel="stylesheet" href="/leaflet/leaflet.css" />
 <!--[if lte IE 8]>
     <link rel="stylesheet" href="/leaflet/leaflet.ie.css" />
 <![endif]-->

* Добавьте ссылку на javascript файл Leaflet:

.. code-block:: html

  <script src="/leaflet/leaflet.js"></script>

* Вставьте  **div**-элемент с указанием конкретного **id** там, где вы хотите разместить карту:

.. code-block:: html

  <div id="map"></div>

* Убедитесь, что контейнер карты имеет определенную высоту, например, установив ее в CSS:

.. code-block:: css

  #map { height: 180px; }

Теперь все готово для инициализации карты и выполнения некоторых действия с ней.

Настройка карты
================================================================================
Давайте создадим карту Европы с указанием на ней места проведения конференции FOSS4G 2013. Во-первых, мы должны инициализировать карту и установить отображение на ней наших географических координат и масштаба:

.. code-block:: javascript 

  var map = L.map('map').setView([45.52875, -122.6632], 5);

По умолчанию (даже если мы не задаем какие-либо опции при создании экземпляра карты), все действия мыши и касаний на карте включены, она имеет зум и атрибуты управления.

Обратите внимание, что вызов **setView**, также как и большинство других методов Leaflet, которые не возвращают явное значение, возвращает объект **map**, что позволяет строить цепочки методов похожие на JQuery.

Далее мы добавим тайловый слой на карту.
Для этого мы будем использовать тайловые изображения из TileLite с Live DVD диска. Отметим, что использование таких карт как OpenStreetMap в качестве картографической подложки даст больше практического опыта.

Создание тайлового слоя, как правило, включает в себя установку шаблона URL для тайловых изображений, текста копирайта и максимального уровеня масштабирования слоя:

.. code-block:: javascript

  L.tileLayer('http://localhost:8012/{z}/{x}/{y}.png,{}).addTo(map);

Если у вас есть доступ в интернет, то вы можете использовать и другие тайловые сервисы карт в качестве картографической подложки:

.. code-block:: javascript

  L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
  }).addTo(map);

Убедитесь, что весь javascript код вызывается посл **div** и включения **leaflet.js** файла. Вот и все! У вас есть работающая карта на Leaflet.

Стоит отметить, что Leaflet не привязан к конкретным поставщикам тайловых карт, а также не содержит специвичного кода для кого-то конкретного из них, так что вы свободны в выборе других поставщиков если есть необходимость.

Маркеры, круги и полигоны
================================================================================

Помимо тайловых слоев, вы можете легко добавить и другие объекты на карту, в том числе маркеры, полилинии, полигоны, круги и всплывающие окна.
Давайте добавим маркер:

.. code-block:: javascript 

  var marker = L.marker([45.52875, -122.6632]).addTo(map);

Добавление круга то же самое (за исключением указания размера радиуса в метрах в качестве второго аргумента), но позволяет вам настраивать вид отображения объекта, передавая дополнительные параметры в качестве последнего аргумента при создании объекта:

.. code-block:: javascript

  var circle = L.circle([44.056287, -123.07572], 25000, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5
  }).addTo(map);

Добавление полигон - это просто:

.. code-block:: javascript

  var polygon = L.polygon([
      [46.01, -130.01],
      [40.81, -128.76],
      [44.15, -133.23]
  ]).addTo(map);


Работа со всплывающими окнами
===================

Всплывающие окна, как правило, используется, когда вы хотите прикрепить некоторую информацию к конкретному объекта на карте. Для этого в Leaflet есть очень удобный инструмент:

.. code-block:: javascript 

  var popup = L.popup()
      .setLatLng([45.52875, -122.6632])
      .setContent("I am a standalone popup.")
      .openOn(map);

Здесь мы используем **openOn** вместо **AddTo**, потому что он выполняет автоматическое закрытие ранее открытого всплывающего окна при открытии нового, что добавляет удобство использования.

Обработка событий
===================

Каждый раз, когда что-то происходит в Leaflet, например пользователь нажимает на маркер или изменяет масштаб карты, соответствующий объект передает событие, которое вы можете отслеживать с помощью функции. Это позволяет реагировать на действия пользователя:

.. code-block:: javascript

  function onMapClick(e) {
      alert("You clicked the map at " + e.latlng);
  }

  map.on('click', onMapClick);

Каждый объект имеет свой собственный набор событий (узнай подробности в разделе документация_). Первый аргумент функции - это событие объекта. Оно содержит полезную информацию о событии, которое произошло. Например, событие объекта по клику мыши на карте (**e** в приведенном выше примере) обладает параметром latlng, который содержит данные о координатах этого места.

Давайте усовершенствуем наш пример с использованием всплывающего окна вместо предупреждение:

.. code-block:: javascript

  var popup = L.popup();

  function onMapClick(e) {
      popup
           .setLatLng(e.latlng)
           .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(map);
  } 

  map.on('click', onMapClick);

Попробуйте нажать на карту, и вы увидите координаты во всплывающем окне. Посмотрите полный пример_

Теперь вы изучили базовые возможности Leaflet и можете начать создание своего картографического приложения прямо сейчас! Не забудьте заглянуть в раздел документация_ и посмотреть другие примеры_.


.. _документация: http://leafletjs.com/reference.html
.. _пример: http://localhost/leaflet-demo.html
.. _примеры: http://leafletjs.com/examples.html