Подключение карты

Подготовка страницы

Для подключения карты необходимо выполнить несколько шагов:

1. В раздел head страницы подключить СSS файлы Leaflet

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">

2. Включить загрузку самого «движка», желательно перед закрывающимся body.

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

3. Определить div в котором будет отображаться карта, обязательно этот элемент должен иметь ширину и высоту.

<div id="map" style="width: 800px; height: 400px;">

Все готово для инициализации карты.

Инициализация карты

Для отображения наших тайлов инициализируем карту следующим образом:

var map = new L.Map('map', {
        center: new L.LatLng(50.455002, 30.511284),
        zoom: 9,
        layers : [
            new L.TileLayer('http://tms{s}.visicom.ua/2.0.0/planet3/base_ru/{z}/{x}/{y}.png',{
                    maxZoom : 19,
                    tms : true,
                    attribution : 'Данные компании © <a href="http://visicom.ua/">Визиком</a>',
                    subdomains : '123'
            })
        ]
    });      

Подробнее о библиотеке Leaflet, смотрите сайт leafletjs.com

Весь пример

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Visicom Example</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body>
    <div id="map" style="width: 750px; height: 400px;"></div>
    <script>
        var map = new L.Map('map', {
            center: new L.LatLng(50.455002, 30.511284),
            zoom: 9,
            layers : [
                new L.TileLayer('http://tms{s}.visicom.ua/2.0.0/planet3/base_ru/{z}/{x}/{y}.png',{
                        maxZoom: 19,
                        tms : true,
                        attribution : 'Данные карт © 2013 ЧАО «<a href="http://visicom.ua/">Визиком</a>»',
                        subdomains : '123'
                })
            ]
        });
    </script>
</body>
</html>

Результат