JavaScriptové API mapy.cz

JavaScriptové API mapy.cz

Co nabízí, jak se používá

Ondřej Žára, Seznam.cz

O čem to bude?

Co je Mapy API, k čemu se hodí

Co je Mapy API

Co API umí

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

Proč používat Mapy API?

Kvalita podkladů

Ukázka

Základní principy použití

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

Jednoduchá mapa

<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

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

mercator transverse mercator

Co všechno API umí

Ovládací prvky

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

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

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í

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

Reverzní geokódování

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

Hledání trasy

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

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

GPX a KML

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

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