Mapy API: Chcete mít ve stránce lepší mapu než Google?

Mapy API

Chcete mít ve stránce lepší mapu než Google?

Ondřej Žára, Seznam.cz

O čem to bude?

Co je Mapy API, k čemu se hodí
Základní principy použití
Co všechno API umí

Co je Mapy API, k čemu se hodí

Co je Mapy API

Způsob, jak do vlastních stránek vložit (interaktivní) mapu
Sada JS knihoven
Jednoduchý přístup ke kvalitním mapovým podkladům
Doplňkové služby (vyhledávání, plánování, měření, …)

Co API umí

Zobrazovat mapu
Měnit mapové podklady či je kombinovat
Nad mapou zobrazovat značky ("POI"), obrázky, vektorovou grafiku a jiné
Provádět rozmanité přepočty zeměpisných souřadnic
Vyhledávat v našich mapových databázích

Příklady možností využití

Prezentace firmy
Evidence a vizualizace údajů zeměpisného charakteru
Legrace s GPS
Cestovatelský deník
Katastr, dopravní situace
…

Proč používat Mapy API?

Je zadarmo
Je kvalitní
Je otestované
Je podporované

Kvalita podkladů

Ukázka

Základní principy použití

Technická stránka používání Mapy API

Používání API je zdarma (i pro komerční využití) a bez jakýchkoliv limitů či omezení
Do stránky se vloží načítací skript API a ve vhodnou chvíli se API načte <script src="http://api4.mapy.cz/loader.js"></script> <script>Loader.load();</script>
Práce s mapou = jednoduchá práce s JS objekty definovanými v API

Jednoduchá mapa

Uživatel zadá HTML prvek, střed, přiblížení, mapový podklad

<div id="mapa" style="width:800px; height:500px;"></div>

var jh = SMap.Coords.fromWGS84(15, 49.14);
var mapa = new SMap(document.querySelector("#mapa"), jh, 8);
mapa.addDefaultLayer(SMap.DEF_BASE).enable();

Souřadnice

Zeměpisná souřadnice jako datový typ – SMap.Coords
Tvorba statickou tovární metodou
Konverze voláním .toXYZ()
Další metody: vzdálenost, azimut, …

var jh = SMap.Coords.fromWGS84(15, 49.14);
/* alternativně: fromPP, fromUTM33, fromEXIF, fromEvent */

mapa.setCenter(jh);

alert(jh.toWGS84(2));
/* alternativně: toPP, toUTM33, toPixel */

Projekce

Algoritmus, realizující převod zeměpisné souřadnice na pixelovou
Mapové podklady jsou vždy renderovány v konkrétní projekci
API podporuje změnu projekce za běhu

mercator transverse mercator

Co všechno API umí

Ovládací prvky

Výchozí ovládací prvky (klávesnice, myš, výběr obdélníkem)
Přepínač podkladů, kontextová nabídka, náhledová mapka, minimapa
Ukázka

mapa.addDefaultControls();
mapa.addDefaultContextMenu();

mapa.addControl(new SMap.Control.Overview(), {left:"0px", bottom:"20px"});
mapa.addControl(new SMap.Control.Minimap(), {right:"3px", bottom:"30px"});

var c = new SMap.Control.Layer();
c.addDefaultLayer(SMap.DEF_BASE);
c.addDefaultLayer(SMap.DEF_OPHOTO);
c.addDefaultLayer(SMap.DEF_TURIST);
mapa.addControl(c, {left:"0px", top:"0px"});

Značky a vizitky

Značka je primární forma interaktivity (Ukázka)
Značka je obecně nějaký HTML uzel; může být klikatelná či přesouvatelná
Vizitka spojuje bod v mapě s doplňkovými informacemi

var layer = new SMap.Layer.Marker();
mapa.addLayer(layer).enable();

var marker1 = new SMap.Marker(jh);
layer.addMarker(marker1);

var marker2 = new SMap.Marker(praha);
marker2.decorate(SMap.Marker.Feature.Draggable);
layer.addMarker(marker2);

var card = new SMap.Card();
card.getBody().innerHTML = "Jindřichův Hradec";
marker1.decorate(SMap.Marker.Feature.Card, card);

Geometrické útvary

Čáry, mnohoúhelníky, kruhy a elipsy, obecnější křivky
Ideální pro definování tras či oblastí
Ukázka

var souradnice = [...];

var vrstva = new SMap.Layer.Geometry();
mapa.addLayer(vrstva).enable();
var polygon = new SMap.Geometry(SMap.GEOMETRY_POLYGON, null, souradnice);
vrstva.addGeometry(polygon);

Geokódování

Převod místopisného termínu na jeho souřadnice
"Hledání"
Ukázka

new SMap.Geocoder("brno", function(geocoder) {
	var results = geocoder.getResults()[0].results;
	alert(results[0].label);
	alert(results[0].coords);
});

Reverzní geokódování

Převod souřadnic na místopisný termínu
Výsledkem je tzv. regionální dekompozice
Seřazená sada místopisných celků s názvy a souřadnicemi
Ukázka

var coords = SMap.Coords.fromWGS84(17.012167, 50.055132);
new SMap.Geocoder.Reverse(coords, function(geocoder) {
	alert(geocoder.getResults().label);
});

Hledání trasy

Nalezení trasy autem, kolem, pěšky
Vstupem jsou dva či více bodů
Výstupem je geometrie trasy, průjezdní body, metadata (celková délka)
Ukázka

var coords = [SMap.Coords.fromWGS84(14, 50), SMap.Coords.fromWGS84(18, 49)];
new SMap.Route(coords, function(route) {
	var results = route.getResults();
	alert(results.length); /* v metrech */
});

Shluky značek

Když je na jednom místě příliš mnoho značek
Možnost automatického shluknutí všech značek ve vrstvě
Možnost individuálního spočítání shluků
Kliknutí na shluk nastaví mapu na oblast pokrytou "jeho" značkami
Ukázka

var shlukovac = new SMap.Marker.Clusterer(mapa);
znackovaVrstva.setClusterer(shlukovac);

GPX a KML

Datové formáty pro záznam geografických dat
GPX jen trasy a body, KML i obrázky a geometrické útvary
Mapy API obsahuje podporu pro zobrazování dat z obou formátů
Ukázka

var gpx = new SMap.Layer.GPX(xmlDoc);
mapa.addLayer(gpx);
gpx.enable();
gpx.fit();

Body zájmu

Ikonky doplňující mapový podklad
Definovány v rámci tzv. "mapových sad" na webu mapy.cz
Realizováno relativně pokročilou technikou Preflighted CORS
Ukázka

var layer = new SMap.Layer.Marker();
mapa.addLayer(layer).enable();

var dataProvider = mapa.createDefaultDataProvider();
dataProvider.setOwner(mapa);
dataProvider.addLayer(layer);
dataProvider.setMapSet(SMap.MAPSET_BASE);
dataProvider.enable();

Blízká budoucnost – Panoramata

Panoramatický 360° pohled typu Streetview
Možnost navigace na sousední panoramata
Stále se zahušťující síť pokrytí (aktuálně cca 50% silniční sítě)
WebGL + Flash
Ukázka