API de Mapas do Sapo e exemplos de integraçãoAPI de Mapas do Sapo e exemplos de integração

Joaquim Muchaxo

Mapas.SAPO.pt

Resumo

Introdução

• I - Widget do SAPO Mapas

• II - Os mapas como Web-Services

I) API de Mapas

Cliente:

- HTML / DOM / CSS- Javascript - script tag / XMLhttpRequest

Servidor:

- Web-Services

I - Widget SAPO Mapas

http://js.sapo.pt/SAPO/Widget/Maps/sample/map.html/

Widget SAPO Mapas - API

• /* required Map object */

• var map1=new SAPO.Widget.Maps({• divid:'div_mapa', // a container where to render the map• maptitle:'Map Renderer', // a Title for the Map widget• selfrender: true, // otherwise call map1.renderMap()�

• /* map Size in pixels */• width: 700, • height: 400,

• markers: Markers // Given or {}, Markers to add to the map on startup• });

Widget SAPO Mapas - APIvar Markers= {

"rss": { "channel": {"copyright": "©2005, PT.COM","description": "Pesquisa Notícias por title:lisboa",

"item": [{

"author": "Rádio Renascença","dc:date": "2006-10-25T23:19:00Z",

"description": "Os trabalhadores ..",

"guid": "http:\/\//www.rr.pt\/noticia.asp?idnoticia=178760",

"link": "http:\/\/www.rr.pt\/noticia.asp?idnoticia=178760",

"title": "Lisboa: Funcionários admitem fazer greve",

"geo:lat": 38.711,

"geo:lon": -9.13774548},{

_ _ _}

] //item} //channel

} //rss}; //obj

Widget SAPO Mapas - API• Definição de icon para os marcadores :Markers.icon= {

image: "http://mapas.sapo.pt/imgs/feed.png",// Image source or an HTML fragmenticonSize: {width: 16, height: 16},// required , icon size in pixelsiconAnchor: {x: 8, y: 0},

// Relative position in pixels of the Icon anchor (where the Icon touches the ground, measured from bottom left of icon image)�

infoWindowAnchor: {x: 8, y: 0} // Relative position in pixels of the Window anchor (where the

Window touches the ground, measured from bottom left of icon image)

};

Widget SAPO Mapas

- Assistência na introdução de conteúdos- Localização do utilizador

Widget SAPO Mapas - APIMarkers.map_options= {

mapcontrol: "large",

locator_callback: cb,

locator_marker: {title:"Estou aqui",title:"Estou aqui",description:"“

},

// lat: 39, // lon: -9, zoom: 15/*

zooms 5 (Portugal) to 17 (maximum detail)�*/

};

Widget SAPO Mapas

Extensões: GeoRSS - ex: farmácias de serviço em Lisboa

http://js.sapo.pt/SAPO/Widget/Maps/sample/map_extensions.html/

Widget SAPO Mapas• GeoRSS:

map1.addRSSMarkers( "http://farmacias.sapo.pt/rss.php?id=1106", "rss_callback");

function rss_callback( escapedMarkers) { function rss_callback( escapedMarkers) { eval( "var RSSMarkers="+ unescape( escapedMarkers) ); map1.options.markers.rss= RSSMarkers.rss; map1.renderMap();

}

Widget SAPO Mapas

Web service com dados georeferenciados (hotspots PT-WIFI) :

http://js.sapo.pt/SAPO/Widget/Maps/sample/map_extensions.html/

Widget SAPO Mapas - API

• Web Service (dados georeferenciados)�

map1.addRSSMarkersWithXSL( s$('service').value, // Web Service s$('service').value, // Web Service "rss_callback", // JS"http://localhost/GIS_POI_rss_json.xsl"); // XSL

Técnicas de Web-mapping

• TILES

• Asynchronous JavaScript and XML (AJAX)

Técnicas de web-mappingTiles

O mapa está organizado em toda a extensão num número de zooms diferentes em pequenas imagens

(por ex, 256 x 256)�

A Interacção com o Site substitui a página por outra página.

AJAX

(Garrett, 2005).

A Interacção como Site altera componentes da mesma página individualmente.

AJAX

Limitações

• Interfaces de mapas com Tiles:– não permite picar em elementos e obter propriedades

• Extensões:– GeoRSS– Legenda e Escala à parte– Canvas (Red-lines)� Asynchronous JavaScript – Canvas (Red-lines)�– Pesquisa

… A) HTML obriga a maior integração de tecnologias ( SVG / VML / Web Services)

B) Distribuição como Aplicação ( Google Earth ) ou Java Web Start / Flash

Asynchronous JavaScript and XML (AJAX)

II) Mapas como Web-Services

Standards OGC

- Imagem (WMS url, SLD styles)�- listas de elementos XML (WFS)�

Viewers: Viewers:

Google EarthWmsViewer.com

- layers de sistemas SIG remotos

II Web-Services de Mapas

WMShttp://www.opengeospatial.org/standards/wms

• Capabilities (lista de layers , etc)�URL?request=GetCapabilities&version=1.1&service=WMS >>

• Obtem o Mapa:URL?servicename=timeline&WMTVER=1.0&layers=Average+Annual+Precipitation+(mm)&Request=

GetMap&width=800&height=600&Styles=&SRS=EPSG:4326&format=image/gifGetMap&width=800&height=600&Styles=&SRS=EPSG:4326&format=image/gif

• Obtem uma legendaURL?servicename=timeline&WMTVER=1.0&request=getlegendgraphic&layers=Average+Annual+P

recipitation+(mm)�

• WFS InfoTips / Tabelas de atributos de elementos de um mapa

WMS – precipitação média anual (NOAA )�

WMS falhas geológicas

IGP (ww.igeo.pt) Atlas de Portugal

SAPO Web-Services – getMap(WMS)

• http://services.sapo.pt/Maps/GetMap?version=1.1.1&service=WMS&layers=concelhos&request=GetMap&width=600&height=449&transparent=true&bbox=-9.145857921806055,38.71526199556405,-9.13983989155799,38.71948291789876

SAPO Web-ServicesgetMap simples

• http://services.sapo.pt/Maps/GetMapByRadius?latitude=39&longitude=-9&radius=10000&width=400&height=300

Em breve: Adição de GeoRSS e Icons

SW de Mapas (Engines)�• Traços gerais:

• mapa como Imagem (WMS)�• Informação em XML (WFS)�

– Dados : ficheiros / BD espaciais (Oracle, postGreSQL)�– Rendering como query WMS vs custom php, Asp.net

• OpenSource : MapServer (WMS – produção de Tiles)�GeoServermapGuide Open Source

…

• Comerciais :– ESRI ArcIms– MapInfo MapXtreme– Autodesk Mapguide

…

Routing Web-Service

• Itinerário dados os pontos de partida e chegadahttp://services.sapo.pt/Maps/GetRoute?mode=rapido&pts=9.147629,38.

729097,-9.140945,38.73145

• Modos: apeado, mais curto de carro ou mais rápido de carro.• Output em XML ou JSON • Output em XML ou JSON

Resultado: { polylines e atributos } *sentido de viragem (dir)tempo (t) nesse troçonome da rua (para onde virou)distância percorrida nesse troço

- distância e tempo totais

* Sistema de coordenadas do Sapo Mapas.

Routing Web-Service

Rendering:

• SAPO Mapas – Browser (SVG / VML) FFox / IE

• Previsto:• Previsto:Rendering de uma imagem com itinerário no servidor

(HTML layer)�

Próximos passos

SITE SAPO Mapas• Web-services e informação dos mapas como layers• Agregação de marcadores (elevados POIs no mapa)�

Web-services• Base de dados Geográfica

ConclusõesWidget dos MAPAS

http://js.sapo.pt/SAPO/Widget/Maps/sample/map.html

• mapas em qualquer página Web• Marcadores personalizados ( JS ou GeoRSS )�• Assistência na introdução de moradas

Web-servicesservices.sapo.pt (Maps & GIS)�

• Mapas em dispositivos com Internet• Reverse-geocoding

API de Mapas do Sapo e exemplos de integração

Joaquim Muchaxojoaquim@rocketmail.comjoaquim@rocketmail.com

Mapas.SAPO.pt

http://js.sapo.pt/SAPO/Widget/Maps/sample/map.html/http://js.sapo.pt/SAPO/Widget/Maps/sample/map_extensions.html/

http://trac.softwarelivre.sapo.pt/libsapojs