OpenStreetMap
на вашем сайте

Александр Сапожников, Южно-Уральский государственный университет

OpenStreetMap
на вашем сайте

OSM

Александр Сапожников

Южно-Уральский государственный университет

 UWDC  2013

На прошлых конференциях

Яндекс.Карты

Встраиваемые карты

OpenStreetMap

Логотип

Что не так в других картах?

Покрытие по Уралу

bit.ly/XdQx33 (сентябрь 2012)

Crowdsourcing maps

Внешний вид

Google
Google

Ограничения

developers.google.com/maps/faq#usagelimits
Web sites and applications using the Google Maps API may at no cost generate up to 25,000 map loads per day for each service.

Сравним с OSM

Google
Mapnik
Midnight Commander
OSM
Stamen

Бесплатно*

Итого

Как?

google://
openstreetmap api

Разобьём на подзадачи

Библиотеки, допускающие замену тайлов

GeoMixer

kosmosnimki.ru/geomixer/docs/api_samples/ex_only_osm.html 
<script>createFlashMap(
    document.getElementById("map"), "OSM",
        function(map){}
);
</script>

OSM в Google Maps

function initialize() {
        var map = new google.maps.Map(document.getElementById("map"), {});
        map.setCenter(new google.maps.LatLng(55.160751, 61.412512));
        map.setZoom(18);
        var openStreet = new google.maps.ImageMapType({
          getTileUrl: function(ll, z) {
            var X = ll.x % (1 << z);  // wrap
            return "http://tile.openstreetmap.org/"
                + z + "/" + X + "/" + ll.y + ".png";
          },
          tileSize: new google.maps.Size(256, 256),
          maxZoom: 18,
          name: "OSM"
        }); 
        map.mapTypes.set('osm', openStreet);
        map.setMapTypeId('osm');
        map.setOptions({
          mapTypeControlOptions: {
            mapTypeIds: [
              'osm',
              google.maps.MapTypeId.ROADMAP,
              google.maps.MapTypeId.TERRAIN,
              google.maps.MapTypeId.SATELLITE,
              google.maps.MapTypeId.HYBRID
            ],
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
          }
        });
    }

Вычисляем адрес тайла

var openStreet = new google.maps.ImageMapType({
  getTileUrl: function(ll, z) {
    var X = ll.x % (1 << z);  // wrap
    return "http://tile.openstreetmap.org/"
        + z + "/" + X + "/" + ll.y + ".png";
  },
// ...

Адреса тайлов

http://tile.openstreetmap.org/z/x/y.png

Боромир
Google Maps со слоем OSM

В Яндекс.Картах и OSM — разные проекции

Слой OSM на Яндекс.Картах

ymaps.layer.storage.add('osm#mapsurfer', function () {
    var layer = new ymaps.Layer(
        'http://129.206.74.245:8001/tms_r.ashx?x=%x&y=%y&z=%z', // http://www.openmapsurfer.uni-hd.de/
        { projection: ymaps.projection.sphericalMercator }
    );
    return layer;
} );
ymaps.mapType.storage.add('osm#mapsurfer', new ymaps.MapType('OpenStreetMap', ['osm#mapsurfer']) );
Яндекс.Карты со слоем OSM

  • ! GeoMixer
  • √ Google Maps
  • √ Яндекс.Карты

    • Если делаем новую карту

    OpenLayers

    openlayers.org

    Leaflet

    leafletjs.com

    Вес

    Возможности Leaflet

    Код для создания карты

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
    <![endif]-->
 <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
</head>
<body><div id="map" style="height: 600px"></div>

    Код для создания карты

    <script>
    var map = L.map('map').setView([55.17, 61.39], 16);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    }).addTo(map);
</script>
    Карта

    Шаблон URL тайлов

    http://{s}.tile.osm.org/{z}/{x}/{y}.png

    Плагины

    Адресный поиск в Leaflet

    Leaflet GeoSearch

    Адресный поиск в Leaflet

    Leaflet GeoSearch

    Nominatim

    Nominatim (лат. по имени) — адресный поиск на основе данных OSM.

    Использование Nominatim

    Доступ к Номинатиму из Перла

    github.com/shoorick/bing-imagery-tools/blob/master/watch.pl 
    use Geo::Coder::OSM;
...
my $geocoder = Geo::Coder::OSM->new();
my @places = $geocoder->geocode(
    location => $self->param('address'),
);
foreach my $place ( @places ) {
    print $place->{'lon'};

    MapQuest

    developer.mapquest.com/web/products/open/sdk

    Другие библиотеки

    Mapstraction

    mapstraction.com

     *.tile.openstreetmap.org 

    Because the OpenStreetMap Foundation is a non-profit organisation with limited resources, you can’t just slot in the tiles from openstreetmap.org as a replacement

    См. также Tile usage policy.

    CloudMade

    cloudmade.com

    Map
    Yandex

    Подключение тайлов CloudMade в Leaflet

    L.tileLayer(
    'http://{s}.tile.cloudmade.com/'
    + 'bce850b437d7493ead1fbd1c1bc77ee4'
    + '/997/256/{z}/{x}/{y}.png',
    {attribution: 'Картографические данные © Участники <a href="http://openstreetmap.org">OpenStreetMap</a>, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Изображения © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18}).addTo(map);

    А можно и так

    L.tileLayer('http://{s}.tile.cloudmade.com/'
    + '{key}/{styleId}/256/{z}/{x}/{y}.png', {
    key: ключ,
    attribution: ...,
    styleId: номер_стиля
}).addTo(map);
    leafletjs.com/examples/choropleth.html

    Самодельные тайлы

    Maperitive

    Maperitive
    Maperitive

    TileMill

    TileMill

    Y перевернулся?

    TileMill

    Y перевернулся?

    L.tileLayer( ...
    {
        tms: true,
        ...
    TMS — Tile Map Service

    Для ленивых

    Модули CMS

    Drupal WordPress
    Карта
    Карта
    Карта
    Карта
    Карта

    Ещё проще

    shtosm.ru/2013/02/05/1/ + MapBox

    Карта
    Карта
    Карта
    Map
    Map

    Редактирование

    Чем

    берите JOSM

    Будете много рисовать —

    Не планируете?

    Тогда совсем не рисуйте

    Попросите кого-нибудь

    Форум

    OSB
    OSB
    OSB

    Выводы

    1. Можно использовать
    2. Можно совмещать с другими картами
    3. Можно использовать Leaflet для отображения
    4. Внешний вид можно менять
    5. Можно встраивать модулями CMS и через <iframe>
    6. Можно редактировать

    Александр Сапожников

    Южно-Уральский государственный университет, Челябинск

    QR-код