1 марта 2010 г.

Сервисы on-line картографи

map api logo

Среди онлайн картографических сервисов наиболее известным и широко распространенным является картографический сервис от Google. Пользователям из рунета так же известен сервис от Яндекс. Оба они имеют программный интерфейс для JavaScript (Google maps API и Yandex maps API), так что когда при построении онлайн приложения или сервиса возникает необходимость в визуализации пространственных данных выбор разработчиков чаще всего падает на них.

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

Так, после выпуска Google maps, ребята из Microsoft нашли в нем фатальный недостаток, и сделали свой картографический сервис Live maps, который после выхода поисковика Bing был быстренько переименован в Bing map, и выпустили API к нему.

Yahoo тоже пыталась оторвать свою часть рынка онлайн картографии, предоставив API к своим картам Yahoo! maps.


Компания MultiMap имеет свои интерфейсы, предоставляющие доступ к всё тому же Bing map, плюс еще несколько взможностей.

В этом списке кроме Яндекса найдется место еще одной компании из России - это Космоснимки ру и их API.

Ну и стоит расказать об OpenStreetMap - открытом проекте создания общедоступных карт. Создается и поддерживается добровольцами путем использования личных GPS устройств и оцифровки катр. Да, карты OpenStreetMap имеют векторный формат, но могут быть экспортированы в форматы PNG, JPEG, SVG, PDF, PostScrip. Они двухмерные, то есть не содержат информации о высоте точки. Распространяются в подмножестве формата XML - GPX(GPS eXchange Format).

Для использования всех этих картографических API нужно помещать код JavaScript в раздел head thml документа, например:

<head>
  <!--  код API здесь -->
</head>

Что не всегда удобно, особенно когда у пользователя нет возможности или желания изменять шаблон страницы ради вставки одной карты, например в блоге или одной странице большого сайта. Но можно использовать html тег <iframe>, который можно разместить в теле документа.

Для Google maps - переходим на http://www.maps.google.ru и в верхнем левом углу видим ссылку с надписью "Ссылка", жмем на нее и получаем искомый iframe:

<iframe 
  width="400px"
  height="400px" 
  frameborder="0" 
  scrolling="no" 
  marginheight="0" 
  marginwidth="0" 
  src="http://maps.google.com/?ie=UTF8&
       ll=48.44,35.04&spn=0.079704,0.145912&
       z=12&output=embed">
</iframe>

А вот так это будет выглядеть в странице:

Это карта от Google

Кроме того Google, предоставляет мастер для создания виджетов, которые можно вставлять в страницу. Этот мастер генерирует JavaScript, с которым становятся доступны все функции данного API.

Чтобы проделать такое же с картами от Micrisoft на странице http://www.bing.com/maps в нижнем левом углу нажимаем на конверт (share you map) и копируем от туда код:

<iframe 
  width="400px" 
  height="400px" 
  frameborder="0" 
  scrolling="no" 
  marginheight="0" 
  marginwidth="0" 
  src="http://www.bing.com/maps/embed/?v=2&amp;
      cp=48.45~35.04&amp;lvl=12&amp;
      pushpins=8.443539324535294~35.053333282117194amp;
      sty=r&amp;
      emid=0f28e721-6516-e8d1-b654-ac99d2075569">
</iframe>
Карта от Bing maps

У этих карт довольно странное поведение. При данном увеличении с карты пропала одна из крупнейших рек европы - Днепр. Хотя при увеличении масштаба он магическим образом появляется на карте.

С картами от Open StreetMap все еще проще. На странице http://www.openstreetmap.org/export в разделе "Формат экспорта" выбираем "Встраиваемый HTML" и в результате имеем:

<iframe 
  width="400px" 
  height="400px" 
  frameborder="0" 
  scrolling="no" 
  marginheight="0" 
  marginwidth="0" 
  src="http://www.openstreetmap.org/export/embed.html?
       bbox=35.005,48.4348,35.0933,48.4835&layer=mapnik">
</iframe>

и карта OpenStreetMap

Остальные картографические сервисы, в том числе и Яндекс, не предоставляют простого способа встраивания своих карт в тело страницы без существенного переписывания кода и использования JavaScript.

Комментариев нет:

Отправить комментарий