Mapy API

Mapy API

Co nabízí, k čemu se hodí, v čem vyniká?

• Webová interaktivní prezentace
• Klávesa "?" zobrazí krátkou nápovědu
• Tisk jako obvykle
• Pro pokračování stiskněte mezerník
• ondrej.zara@firma.seznam.cz

Obsah

1. Co je Mapy API
2. Proč ho používat?
3. Co API umí
4. Technické zajímavosti

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í)

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
• …

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

Proč používat Mapy API?

• Je zadarmo
• Je kvalitní
• Je otestované
• Je podporované

Kvalita podkladů

• ukázka

JS aplikace

• Čtvrtá generace mapového API
• Jednoduché příklady, pokročilé příklady, automaticky generovaná dokumentace
• Kvalitní a relativně rychlá uživatelská podpora

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

Jednoduchá mapa

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

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

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

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
• 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
• ukázka

  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 marker3 = new SMap.Marker(brno);
  var card = new SMap.Card();
  card.getBody().innerHTML = "Tady někde jsme.";
  marker3.decorate(SMap.Marker.Feature.Card, card);
  layer.addMarker(marker3);

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í a reverzní geokódování

• Geokódování: převod místopisného názvu na souřadnice
• Reverzní geokódování: převod souřadnic na místopisný název
• Asynchronní operace realizována AJAXem
• ukázka

  var click = function(e) {
  	var coords = SMap.Coords.fromEvent(e.data.event, mapa);
  	new SMap.Geocoder.Reverse(coords, reverseResponse);
  }
  
  var reverseResponse = function(g) {
  	alert(g.getResults().label);
  }

Technické zajímavosti

• Postaveno nad knihovnou JAK
• API verze 4 je vyvíjeno již přes dva roky
• Přes 10k řádků JS kódu (280kB)

Loader

• Možnost synchronního i asynchronního načítání
• Možnost simple/full API
• Možnost vypuštění knihovny JAK

Loader.async = true;
Loader.load(null, {api:"simple", jak:false}, mujCallback);

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

CORS

• Dotazy na (reverzní) geokódování jdou na server API
• V dobrých prohlížečích je realizováno přes Cross Origin Resource Sharing
• V Opeře a IE 6/7 nutná server-side proxy

Signály

• Realizace návrhového vzoru Observer
• Forma volné vazby mezi spolupracujícími objekty
• Mnohé součásti API vysílají signály
• Vysílané signály jsou součástí dokumentace
• ukázka

  var signals = mapa.getSignals();
  signals.addListener(window, "map-click", "click");
  				
  var click = function(e) {
  	var coords = SMap.Coords.fromEvent(e.data.event, mapa);
  	new SMap.Geocoder.Reverse(coords, reverseResponse);
  }

Budoucnost API

• Databáze nefiremních (turistických) bodů zájmu
• Mercatorova projekce
• WebGL?
• Co si budou uživatelé přát :-)

Odkazy

• Homepage (ukázky, changelog, …)
• Automaticky generovaná dokumentace
• Diskuzní fórum

Prostor pro otázky