Panoramata na mapy.cz

Panoramata na mapy.cz

Zobrazování a navigace na klientu

Ondřej Žára, Seznam.cz

Klientská funkcionalita

Klientská funkcionalita

Na serverech jsou uložena obrazová data a metadata
Klient musí tato získávat, zobrazovat a poskytovat
Nutnost čistě navrženého API (protože: Mapy.cz API)

Klientská funkcionalita

Komunikace s metadatovými backendy
Zobrazování 3D scény
Interakce v rámci jednoho místa (kamera)
Interakce v rámci přechodu jinam

Komunikace s backendy

Komunikace s backendy

Přenos dat vlastním (binárním) protokolem FastRPC
Pro každé "místo" nutnost získání jeho metadat (souřadnice, URL obrázků, náklon automobilu…)
Pro každé místo nutnost získání jeho sousedů
Pro opakovaná procházení jsou tato data cachována na klientu (v paměti JS)

Komunikace s backendy

Některá data jsou důležitá, jiná méně
Metadata pro zobrazované panorama spěchají
Pak se HTTP uvolní pro obrazová data
Teprve poté získáváme informaci o sousedech

Zobrazování 3D scény

Zobrazování 3D scény

Nejsložitější komponenta
Technologie WebGL není dostupná všude, Flash jako fallback
Obrazová data: objem (kvalita) vs. rychlost
Schéma

Zobrazování 3D scény

Debug
Zobrazení (jen zobrazení) je delegováno na konkrétní renderer
Obraz je mapován na kouli, v jejím středu je pozorovatel
Nejprve se zobrazuje náhledový obrázek
Následně se dočítají dlaždice ve vyšším rozlišení (směrem od pohledu uživatele)
Pro WebGL knihovna glMatrix

Interakce s kamerou

Interakce s kamerou

Natáčení levo/pravo, nahoru/dolů
Změna zorného pole (FoV) = zoom
Ovládání myší, klávesnicí, dotykem

Interakce s kamerou

V režii komponenty "Pano.Scene", tj. nezávislé na rendereru
Problematika kompozice HTML a Flashe
Překrytí flashe HTML prvkem ⇒ wmode=opaque

Interakce s dalšími panoramaty

Interakce s dalšími panoramaty

Nejbližší sousedi

Informace o sousedech dotazem na backend
Vizualizace pomocí navigačních šipek
Komponenta "Pano.Nav", tj. nezávislé na rendereru
Zkosení a natočení šipek pomocí CSS3 (3D) transformací

Interakce s dalšími panoramaty

Další sousedi

Pro každé panorama existuje předpřipravená mapa sousedů
Při pohybu myší je kurzor projektován do této mapky
Pokud je kurzor nad oblastí se sousedem, zobrazíme kolečko
Pozicování kolečka a práce s dostupností řeší komponenta "Pano.Nav"
Vykreslení kolečka je závislé na rendereru

Panoramata v Mapy API

Panoramata v Mapy API

Možnost vložení scény do vlastní stránky
Zdarma (zatím), bez omezení
Včetně kompletní interakce
Stojí a padá na tzv. "preflighted CORS"

Panoramata v Mapy API

<script src="//api.mapy.cz/loader.js"></script> Loader.load(null, {pano:true});

var node = document.querySelector("#id");
var scene = new SMap.Pano.Scene(node);

SMap.Pano.get(7022624).then(scene.show.bind(scene));

Panoramata v Mapy API

var center = SMap.Coords.fromWGS84(14.4412791, 50.0845643);

SMap.Pano.getBest(center, 50).then(function(place) {
	scene.show(place);
});

Panoramata v Mapy API

Hlavní objekt SMap.Pano.Scene
Metody get a getBest vracejí tzv. "promise"
Uživatel poskytne jen rodičovský HTML prvek
Kompletní API viz dokumentace

Bonus – dostupnost snímků na mapy.cz

Dostupnost snímků na mapy.cz

"Taková ta červená věc"
Místa, na kterých je dostupný panoramatický snímek
Překvapivě komplikovaná úloha

Dostupnost snímků na mapy.cz

Obrázky s dostupností jsou předgenerované na serveru
Ukázka
Poloprůhledné PNG
Po kliknutí se provede SMap.Pano.getBest()
...ale co kurzor myši?

Dostupnost snímků na mapy.cz

U normálních HTML obrázků je problém poznat barvu
Lze přes <canvas>, ale ne všude a pomalu
Barva není true/false
Proto je dostupnost nutno sdělit dalším, bočním kanálem

Dostupnost snímků na mapy.cz

"Maska dostupnosti" je speciální komprimovaný binární rastr
Načítá se zároveň (duplicitně) s poloprůhlednými obrázky
Každé hnutí myši znamená dotaz do této masky a úpravu kurzoru

Prostor pro otázky
Ondřej Žára, ondrej.zara@firma.seznam.cz