Простая публикация геоданных на собственной карте на базе 2ГИС

Недавно передо мной встала интересная задача — отображать на сайте карту, с различными объектами, причем этих объектов могут быть десятки и сотни, а управлять ими должен уметь любой менеджер ниже среднего звена.

Более формально задача сводилась к тому, чтобы дать возможность пользователям задавать некий список гео-объектов, дать им возможность легко и быстро этими объектами управлять и автоматически отображать эти объекты на некоей карте.

Для реализации задумки была выбрана связка Google Docs и API картографического сервиса 2ГИС. Решение получилось действительно простым, в духе знаменитых «30 строк» :)

Шаг 1. Заводим таблицу для данных.

Открываем Google Docs и создаем таблицу. В моей таблице было достаточно много ненужных мне, но очень нужных для прочих служб полей, поэтому я пойду на небольшую хитрость и для тестирования заведу отдельную.

Вот ссылка на нее: docs.google.com/spreadsheet/ccc?key=0AvdXWIJtCGnndG0tODY5MzRsVFhnbkJseFk0aWJkaUE&usp=sharing

В качестве тестовых данных я взял адреса домов, относящихся к двум небольшим избирательным участкам в городе Костроме. Номер участка, улица, номер дома и число квартир.

Использование в качестве источника данных Google Drive снимает множество проблем с совместной работой специалистов разной степени подготовки и с оперативным обновлением данных.

Теперь таблицу нужно опубликовать. Для этого идем в меню «Файл — Опубликовать в интернете». В появившемся окне выбираем «Начать публикацию», в нижней части — выбираем «CSV (значения, разделенные запятыми)» и получаем ссылку на наш лист таблицы в виде CSV.

Получается вот такая ссылка: docs.google.com/spreadsheet/pub?key=0AvdXWIJtCGnndG0tODY5MzRsVFhnbkJseFk0aWJkaUE&single=true&gid=0&output=csv

Шаг 2. Готовим данные для карты.

Напишем несложный скрипт на PHP и назовем его getMapData.php:

define('CSV_DATA_URL', 'https://docs.google.com/spreadsheet/pub?key=0AvdXWIJtCGnndG0tODY5MzRsVFhnbkJseFk0aWJkaUE&single=true&gid=0&output=csv');
define('DEFAULT_CITY', 'Кострома');

$points = array();
$csvDataHandle = fopen(CSV_DATA_URL, 'r');
$i = 0;
while ( false !== ($line = fgetcsv($csvDataHandle, null, ',', '"')) ) {
    // Пропускаем первую строку в файле
    if ( !$i++ ) continue;
    // Считываем номер участка
    if ( !empty($line[0]) )
        $zone = $line[0];
    $points[] = array(
        'zone' => $zone,
        'address' => DEFAULT_CITY . ', ' . $line[1] . ', ' . $line[2],
        'data' => $line[3],
    );
}

Тут нужно заметить, что скорее всего при первом запуске вы получите ошибку «Warning: fopen(): Unable to find the wrapper „https“». Это связано с тем, что в дефолтной установке PHP не включен модуль OpenSSL. Найдите в файле php.ini строчку

;extension=php_openssl.so и раскомментируйте ее, убрав точку с запятой. Обычного этого достаточно.

Разумеется, массив $points нужно куда-то закешировать, чтобы не «дергать» Google Docs при каждой отрисовке карты.

Теперь перед нами стоит следующая задача. Нужно адреса геообъектов каким-то образом перевести в координаты на карте. Для этого у 2ГИС есть соответствующее API: api.2gis.ru/doc/geo/search/

Вот простейший код для работы с API геокодера:

define('DGIS_API_KEY', 'XXXXXX'); // Ваш ключ
define('DGIS_API_URL', 'http://catalog.api.2gis.ru/geo/search?version=1.3&key=' . DGIS_API_KEY . '&q=%s');

function getGeoObjectInfo($address) {
    $url = sprintf(DGIS_API_URL, $address);
    $response = json_decode(file_get_contents($url));
    if ( $response->response_code == 200 ) {
        // Координаты центра геообъекта
        $coords = $response->result[0]->centroid;
        // Немного магии, чтобы привести их в нужный вид
        $coords = explode(',', preg_replace('/^POINT\(([\S]+)([\s]+)([\S]+)\)$/', '$1,$3', $coords));
    } else
        $coords = array();
    return $coords;
}

Ну и наконец пробежимся по массиву $points нашим «геокодером» и выведем результат в формате JSON:

foreach ( $points as &$address ) {
    $address['coords'] = getGeoObjectInfo($address['address']);
    sleep(1);
}

echo json_encode($points);

Обратите внимание на странную строчку sleep(1); в коде. Дело в том, что я пользуюсь тестовым доступом к API 2GIS, а при нем частота запросов ограничена одним в секунду. После получения полного доступа эту строчку нужно, разумеется, убрать.

Ну и не забываем опять же кэшировать полученные данные, чтобы не создавать 2ГИС лишнюю нагрузку, а себе — лишнее время работы скрипта.

Шаг 3. Показываем карту.

Тут я приведу полный код страницы. Ничего сложного в нем нет, тем более что у 2ГИС есть неплохая документация, ее можно прочитать по адресу api.2gis.ru/doc/maps/info/

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.api.2gis.ru/1.0?loadByRequire=1"></script>
    <title>Тестовая карта с объектами</title>
</head>
<body>
    <div id="DGMap" style="width:100%; height:600px"></div>

    <script type="text/javascript">

        $(DG.load(function() {

            // Создаем карту
            var map = new DG.Map('DGMap');
            map.setCenter(new DG.GeoPoint(40.95,57.76),12);
            map.controls.add(new DG.Controls.Zoom());

            // Получаем данные
            $.get('getMapData.php', function (data) {
                var objects = JSON.parse(data);
                for ( i in objects ) {
                    var marker = new DG.Markers.MarkerWithBalloon({
                        geoPoint: new DG.GeoPoint(objects[i].coords[0], objects[i].coords[1]),
                        balloonOptions: {
                            headerContentHtml: '<b>Участок №'+objects[i].zone+'</b>',
                            contentHtml: 'Адрес:'+objects[i].address+'<br />Число квартир:'+objects[i].data
                        }
                    });
                    map.markers.add(marker);
                }
                // Получаем границы добавленных на карту маркеров:
                var markersBounds = map.markers.getBounds();
                // Устанавливаем карте новые границы по маркерам:
                map.setBounds(markersBounds);
            });

        }));

    </script>

</body>
</html>

На этом, собственно, всё. Мы получили простейшую, но вполне функциональную систему, которая показывает на карте объекты согласно списку, ведущемуся в Google Docs. Вот такой mash-up :)

P.S.

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

P.P.S.

Собственно, ничто не мешает сделать такой же «трюк» с картами, например, от Яндекса. Получится даже красивее, за счет множества встроенных стилей и технологии кластеризации маркеров на карте. Изначально я пошел именно этим путем, но тесты показали, что геокодер 2ГИС все-таки гораздо точнее. Яндекс справляется с получением координат примерно от 95% адресов при условии их тщательной подготовки, 2ГИС — почти все 100%.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.