Find your way with   API André Matos & João Duarte
Agenda <ul><li>What’s SAPO Mapas </li></ul><ul><li>How SAPO Mapas API is made </li></ul><ul><li>SAPO Mapas API – the inner...
What's SAPO Mapas <ul><ul><li>Web  Maps  Application. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Contains over 1.5 mil...
Where can I find it? <ul><li>http://mapas.sapo.pt </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
SAPO Mapas API - How is it made? <ul><li>Technologies used to make SAPO Mapas API: </li></ul><ul><li>  </li></ul><ul><ul><...
OpenLayers - A brief overview <ul><li>  </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
OpenLayers - A brief overview (2) <ul><li>  </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
OpenLayers - A brief overview (3) Find your way with SAPO Mapas API SAPO Codebits 2009
OpenLayers - A brief overview (4) <ul><ul><li>For more information about OpenLayers: </li></ul></ul><ul><ul><ul><li>  http...
  <ul><li>And now... </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
  <ul><li>Let's have some fun... </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
  <ul><li>Let's talk about  </li></ul><ul><li>SAPO Mapas API! </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
SAPO Mapas API - Map <ul><li>  </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
SAPO Mapas API - Map (2) <ul><ul><li>The main type. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Draws a map in your HTM...
SAPO Mapas API - Map (2) <ul><li>  </li></ul>window.onload = function (){     var map = new SAPO.Maps.Map('mapDiv');     m...
<ul><ul><li>There are 4 layer types available on SAPO Mapas API: </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Map (N...
SAPO Mapas API - Map Layers (2) <ul><ul><li>Change the base layer programmatically: </li></ul></ul><ul><li>  </li></ul><ul...
SAPO Mapas API - Map Events <ul><ul><li>Register an event: map.events </li></ul></ul><ul><ul><ul><li>register(event type, ...
Demo <ul><ul><li>Add a map to your page  </li></ul></ul><ul><ul><li>Listening some events  </li></ul></ul><ul><ul><li>Defi...
SAPO Mapas API - Overlays <ul><ul><li>What's an overlay? </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>We call overla...
SAPO Mapas API – Overlays (2) <ul><ul><li>Add an overlay to the map </li></ul></ul><ul><ul><li>map.addOverlay(overlay) </l...
<ul><li>Show how overlays work </li></ul><ul><li>marker, polygon and polyline </li></ul>Demo
SAPO Mapas API - Controls <ul><li>Control types: </li></ul><ul><ul><li>Presentation - Display HTML over the map  </li></ul...
SAPO Mapas API – Controls (2) <ul><li>Methods:  </li></ul><ul><ul><li>draw(px: OpenLayers.Pixel) </li></ul></ul><ul><ul><l...
SAPO Mapas API – Controls (3) <ul><li>Controls at SAPO Mapas Website </li></ul>Find your way with SAPO Mapas API SAPO Code...
Demo Add controls to your map
SAPO Mapas API - Custom Control  <ul><li>var  Codebits = OpenLayers.Class(OpenLayers.Control, { </li></ul><ul><li>//Contru...
SAPO Mapas API  -  Custom Control (2)  <ul><li>… </li></ul><ul><li>//called when the control is added to map </li></ul><ul...
Demo Implementing a custom control
SAPO Mapas API - Search <ul><li>Semantic search (Search for your needs): </li></ul><ul><ul><li>“ Comer em Lisboa” </li></u...
SAPO Mapas API – Search (2) <ul><li>Constructor: </li></ul><ul><ul><li>SAPO.Maps.Search(map?, panel?) </li></ul></ul><ul><...
SAPO Mapas API – Search (3) <ul><li>function  doSearch(){ </li></ul><ul><li>var  value = document.getElementById( &quot;se...
Demo Using the search service
SAPO Mapas API - Itineraries <ul><li>Get a route from a place to another. </li></ul><ul><li>Available routes: </li></ul><u...
SAPO Mapas API – Itineraries (2) Find your way with SAPO Mapas API SAPO Codebits 2009
SAPO Mapas API – Itineraries (3) <ul><li>Constructor: </li></ul><ul><ul><li>SAPO.Maps.Itineraries(map?, panel?) </li></ul>...
SAPO Mapas API – Itineraries (4) <ul><li>function  getRoute() { </li></ul><ul><li>iti.cancel();  //if there’s a request fo...
Demo Using the itineraries service
More information <ul><li>http://mapas.sapo.pt/api </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
Demo The last demo as a resource
Q & A
<ul><li>http://js.sapo.pt/Bundles/SAPOMapsAPI.js </li></ul><ul><li>http://mapas.sapo.pt/api </li></ul><ul><li>http://mapas...
Upcoming SlideShare
Loading in …5
×

Find your way with SAPO Maps API

2,049 views
1,942 views

Published on

Presentation about the SAPO Maps API at Codebits 2009

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,049
On SlideShare
0
From Embeds
0
Number of Embeds
92
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • A maioria das funcionalidades disponiveis em mapas.sapo.pt, estão também disponiveis via SAPO Mapas API.
  •   Nova versão lançada em julho. Mostar página do Mapas. Itinerarios. Pesquisas.   Transportes públicos Controlos     TUDO Disponível via SAPO Mapas API!
  • OpenLayers como motor de mapa Javascript para construir a camada de abstração e montar a API de mapas do SAPO. Webservices para consumir conteúdos e apresenta-los sobre o mapa.    
  • Tipo principal Map. Qualquer interação com o mapa passará por este tipo.   Se for usado o tipo Map do OpenLayers será necessário inidicar um enpoint para as imagens de mapa. Indicar projecções, sistemas de coordenadas, etc.   O tipo SAPO.Maps.Map já implementa toda ess abstração.   Controlos:  Facilita a colocação de HTML sobre o mapa. Apenas têm de definir o HTML que pretendem colocar e o controlo faz o resto. Não se têm de preocupar com os posicionamentos. Podem indicar a posição do HTML sobre o mapa.   Exemplos de controlos existentes: Barra de zoom e navegação. Menu de base layers. Minimap MousePosition OL já disponibiliza uma panoplia de controlos: free hand, permite desenhar shapes sobre o mapa.
  • Popup e features. Popup - É aqui que definimos o desenho do popup que usamos nos mapas do SAPO. Se não gostarem do nosso popup é possível defenirem um novo ou usarem um já existente. Para definir um novo basta estender a classe Popup. Ou podem usar um já existente, anchoredBuble, FrameCloud Features - Desenho vectorial. É através de features que desenhamos marcadores, linhas e poligonos. Veremos mais a frente a API do SAPO para isso.
  • Nestes links poderão encontrar mais informação sobre o OL. Página principal, onde poderão fazer o download do OpenLayers, actualmente na versão 2.8.   Galeria de exemplos.   Class reference. Embora seja preferivel olhar para o código. Esta documentação é produzida de forma automática.   Diagrama UML que ajuda a perceber por alto a arquitectura do OpenLayers (É muito grande)    Mailing lists. Onde podem colocar duvidas ou até colaborar no projecto.  
  • Este slide apenas serve para mostrar que as funcionalidades existentes no openlayers são mantidas, i. e., se alguem for um utilizador experiente de openlayers e pretender tirar partido de alguma funcionalidade, por exemplo, adicionar uma layer KML, GML etc, pode continuar a faze-lo através da API de mapas do SAPO.  A API de mapas do SAPO abstraí do openlayers e ao mesmo tempo adiciona mais funcionalidades.
  • É o tipo principal na API de mapas. Tudo passa por este tipo. Para desenhar um mapa na página, e necessário instanciar este tipo. Providencia de forma simples interagir com o mapa. Fazer zoom, centrar o mapa, adicionar controlos, inibir o zoom com a wheel do rato, trocar as base layers.
  • Para colocar um mapa na página apenas é preciso instanciar mapa, passando o div para o qual o mapa se vai renderizar. Trocamos o tipo de vista do mapa. Por ultimo o mapa é centrado em lisboa com o nível de zoom 13.
  • Como é possivel ver nos mapas do sapo, estão disponiveis as seguintes layers: Map Satellite Hybrid Terrain
  • A instancia de mapa contém o seguinte método: getBaseLayers() Este método contém as base layers disponiveis na API de mapas. para alterar a layer base basta evocar o método setBaseLayer com um dos objectos devolvidos pelo método getBaseLayers
  • Como na maior parte das frameworks, a API de mapas é event driven. É possivel ser notificado sempre que dada acção ocorre. Para registar um evento deve aceder à propriedade events em mapa.
  • Nós consideramos como overlay tudo o que se coloca em cima do mapa num determinado ponto. É como se estivesse agarrado à superficie terrestre. Como overlays temos: marcadores poligonos linhas Estes elementos desenham-se através de features do OpenLayers, numa layer vectorial.
  • Para adicionar a overlay ao mapa, deve usar-se o método: addOverlay
  • O que é isto de um controlo? há 2 tipos de controlos. o primeiro e mais importante de todos serve para representar HTML sobre o mapa. o 2º serve essencialmente para gerir comportamente sobre o mapa. Todos os controlos devem obedecer à seguinte interface OpenLayers.Control e devem implementar os seguintes métodos: draw(px) destroy
  • ContextMenu: quando existe um right click sobre o mapa, apresenta um menu de contexto MapType2: Coloca sobre o mapa uma forma de trocar as baselayers MiniMap2: Coloca sobre o mapa um minimapa que permite fazer um overview sobre o mapa principal MousePosition: Coloca sobre o mapa um controlo que permite ver as coordenadas Navigation: Desenha um controlo que permite navegar, fazer zoom etc. Window: Coloca sobre o mapa uma janela flutuante que permite colocar html no seu interior
  • Controlos usados no sapo mapas: Navigation2 MapType2 ContextMenu MousePosition MiniMap
  • Nesta demo vamos demonstrar como podem adicionar controlos ao mapa.
  • Explicar sintaxe de construção da classe. Construtor Destrutor Quando é chamado cada método. this.div Quando é chamado o draw
  • Explicar sintaxe de construção da classe. Construtor Destrutor Quando é chamado cada método. this.div Quando é chamado o draw
  • Exemplo de um custom control
  • Possibilidade de fazer pesquisas semanticas: Comer em Lisboa Dormir em Lisboa Em que são apresentados sobre o mapa restaurantes ou hoteis, neste caso, com informação detalhada. Podemos ver que é apresentado o telefone, a morada e até uma pequena descrição.
  • Exemplo de um custom control
  • Disponibiliza uma forma de obter um caminho de um local para outro. Caminhos disponiveis: Mais rápido Mais curto A pé É pintado sobre o mapa o caminho, onde pode fazer zoom para ver com mais detalhe, e é colocada num painel a descrição do caminho. Está tudo disponivel para impressão.
  • Coloca descrição detalhada sobre o painel lateral e desenha uma linha sobre o mapa. Esta informação é toda configurável. Se for fornecido apenas o painel os resultados são apresentados apenas sobre o painel. Se for fornecido o mapa apenas são apresentados sobre o mapa. Se forem ambos os resultados são desenhados sobre ambos os elementos
  • Para construir um itinerário é necessário fornecer o mapa e um painel. Estes elementos são opcionais. ? Significa que o parâmetro não é obrigatório. Para obter o itinerário, basta evocar o método getItinerary, passando o local de partida, de chegada e o modo.
  • Código para obter o itinerário. Cancelar se houver um pedido por um itinerário em curso, limpar o painel. Obter o itinerário.
  • Esta demo demonstra a utilização dos itinerários.
  • Documentação Galeria de exemplos Documentos de migração
  • Como um bundle final com todas as funcionalidades apresentadas fizesmos esta demo, que também ficará como um recurso para ser utilizado pelos vossos projectos no codebits.
  • Find your way with SAPO Maps API

    1. 1. Find your way with API André Matos & João Duarte
    2. 2. Agenda <ul><li>What’s SAPO Mapas </li></ul><ul><li>How SAPO Mapas API is made </li></ul><ul><li>SAPO Mapas API – the inner workings </li></ul><ul><li>Demos </li></ul><ul><li>Documentation </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    3. 3. What's SAPO Mapas <ul><ul><li>Web Maps Application. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Contains over 1.5 million POIs in Portuguese territory distributed over 200 categories ( Supported by SAPO Gis: http://services.sapo.pt/Metadata/Service/GIS?culture=PT ) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>  Get the best route, for anywhere you want (in Portugal). </li></ul></ul><ul><li>  </li></ul><ul><ul><li>  Search for your needs (e.g. &quot;Comer em Lisboa&quot;). </li></ul></ul><ul><li>  </li></ul><ul><ul><li>And more... you must try it! </li></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    4. 4. Where can I find it? <ul><li>http://mapas.sapo.pt </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    5. 5. SAPO Mapas API - How is it made? <ul><li>Technologies used to make SAPO Mapas API: </li></ul><ul><li>  </li></ul><ul><ul><li>OpenLayers 2.8 </li></ul></ul><ul><li>  </li></ul><ul><ul><li>JavaScript ( yes, a lot of JavaScript :) ) </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Web Services </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>GIS WebServices (available at: http://services.sapo.pt/Metadata/Service/GIS?culture=PT ) </li></ul></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    6. 6. OpenLayers - A brief overview <ul><li>  </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    7. 7. OpenLayers - A brief overview (2) <ul><li>  </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    8. 8. OpenLayers - A brief overview (3) Find your way with SAPO Mapas API SAPO Codebits 2009
    9. 9. OpenLayers - A brief overview (4) <ul><ul><li>For more information about OpenLayers: </li></ul></ul><ul><ul><ul><li>  http://openlayers.org   </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>  Examples - http://openlayers.org/dev/examples/ </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>  Class reference - http://dev.openlayers.org/releases/OpenLayers-2.8/doc/apidocs/files/OpenLayers-js.html </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>  OpenLayers UML - http://trac.openlayers.org/attachment/wiki/UML/ClassDiagram_OL2.7RC2-20080916.pdf?format=raw   </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Mailing lists </li></ul></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009 c
    10. 10.   <ul><li>And now... </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    11. 11.   <ul><li>Let's have some fun... </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    12. 12.   <ul><li>Let's talk about  </li></ul><ul><li>SAPO Mapas API! </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    13. 13. SAPO Mapas API - Map <ul><li>  </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    14. 14. SAPO Mapas API - Map (2) <ul><ul><li>The main type. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Draws a map in your HTML page.  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Provides some commands to interact with the map: </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>setMapCenter - Center the map in a given point </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>zoomTo - Zoom to a given zoom level </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>setBaseLayer - Changes the map view type </li></ul></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    15. 15. SAPO Mapas API - Map (2) <ul><li>  </li></ul>window.onload = function (){     var map = new SAPO.Maps.Map('mapDiv');     map.setBaseLayer(map.getBaseLayers().HYBRID_MAP)     map.setMapCenter(new OpenLayers.LonLat(-9.133419, 38.709208), 13); } <div id='mapDiv' style='width:600px; height:400px;'></div> Find your way with SAPO Mapas API SAPO Codebits 2009
    16. 16. <ul><ul><li>There are 4 layer types available on SAPO Mapas API: </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Map (NORMAL_MAP) </li></ul></ul></ul><ul><li>      </li></ul><ul><ul><ul><li>Satellite (SATELLITE_MAP) </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Hybrid (HYBRID_MAP)  </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>Terrain (TERRAIN_MAP) </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>And soon will be more... </li></ul></ul></ul>SAPO Mapas API - Map Layers Find your way with SAPO Mapas API SAPO Codebits 2009
    17. 17. SAPO Mapas API - Map Layers (2) <ul><ul><li>Change the base layer programmatically: </li></ul></ul><ul><li>  </li></ul><ul><li>map.getBaseLayers() </li></ul><ul><li>Returns an object with the following keys: </li></ul><ul><ul><li>NORMAL_MAP (Map mode) </li></ul></ul><ul><ul><li>HYBRID_MAP (Hybrid mode) </li></ul></ul><ul><ul><li>SATELLITE_MAP (Satellite mode) </li></ul></ul><ul><ul><li>TERRAIN_MAP (Terrain mode) </li></ul></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  map.setBaseLayer(map.getBaseLayers().HYBRID_MAP) </li></ul><ul><li>changes the base layer to hybrid mode </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    18. 18. SAPO Mapas API - Map Events <ul><ul><li>Register an event: map.events </li></ul></ul><ul><ul><ul><li>register(event type, context, function) </li></ul></ul></ul><ul><ul><ul><li>unregister(event type, context, function) </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>  Event types: </li></ul></ul><ul><ul><ul><li>click, dblclick, baselayerchanged, move, movestart, moveend, zoomend, popupopen, popupclose, mouseover, mouseout, mousemove </li></ul></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    19. 19. Demo <ul><ul><li>Add a map to your page  </li></ul></ul><ul><ul><li>Listening some events </li></ul></ul><ul><ul><li>Defining a base layer   </li></ul></ul>
    20. 20. SAPO Mapas API - Overlays <ul><ul><li>What's an overlay? </li></ul></ul><ul><li>  </li></ul><ul><ul><ul><li>We call overlay to everything you put over the map which moves with it.  </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>  In OpenLayers there are vector features. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Available overlays: </li></ul></ul><ul><ul><ul><li>Marker </li></ul></ul></ul><ul><ul><ul><li>Polygon </li></ul></ul></ul><ul><ul><ul><li>Polyline </li></ul></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    21. 21. SAPO Mapas API – Overlays (2) <ul><ul><li>Add an overlay to the map </li></ul></ul><ul><ul><li>map.addOverlay(overlay) </li></ul></ul><ul><li>Register some events: </li></ul><ul><ul><li>registerEvent(event type, scope, function) </li></ul></ul><ul><ul><li>unregisterEvent(event type, scope, function) </li></ul></ul><ul><li>Supported events: </li></ul><ul><ul><li>popupopened, popupclosed, click, dblclick, mousedown, mouseup, mouseover, mouseout, dragstart, drag, dragend, enabledragging, disabledragging </li></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    22. 22. <ul><li>Show how overlays work </li></ul><ul><li>marker, polygon and polyline </li></ul>Demo
    23. 23. SAPO Mapas API - Controls <ul><li>Control types: </li></ul><ul><ul><li>Presentation - Display HTML over the map </li></ul></ul><ul><ul><li>Behavior - Manages map behavior </li></ul></ul><ul><li>  Control interface (OpenLayers.Control) </li></ul><ul><li>Add a control to the map: </li></ul><ul><ul><li>map.addControl(control_instance) </li></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    24. 24. SAPO Mapas API – Controls (2) <ul><li>Methods: </li></ul><ul><ul><li>draw(px: OpenLayers.Pixel) </li></ul></ul><ul><ul><li>destroy() </li></ul></ul><ul><li>Available controls : </li></ul><ul><ul><li>MousePosition </li></ul></ul><ul><ul><li>Navigation2 </li></ul></ul><ul><ul><li>Window </li></ul></ul><ul><ul><li>ContextMenu </li></ul></ul><ul><ul><li>MapType2 </li></ul></ul><ul><ul><li>MiniMap2 </li></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    25. 25. SAPO Mapas API – Controls (3) <ul><li>Controls at SAPO Mapas Website </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    26. 26. Demo Add controls to your map
    27. 27. SAPO Mapas API - Custom Control <ul><li>var Codebits = OpenLayers.Class(OpenLayers.Control, { </li></ul><ul><li>//Contructor </li></ul><ul><li>initialize: function (){ //base class call OpenLayers.Control.prototype.initialize.apply( this , []); </li></ul><ul><li>}, </li></ul><ul><li>//Called on page unload destroy: function (){ //base class call    OpenLayers.Control.prototype.destroy.apply( this , arguments); }, </li></ul><ul><li>… </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    28. 28. SAPO Mapas API - Custom Control (2) <ul><li>… </li></ul><ul><li>//called when the control is added to map </li></ul><ul><li>draw: function (px){ </li></ul><ul><li>//base class call </li></ul><ul><li>OpenLayers.Control.prototype.draw.apply(this, arguments); </li></ul><ul><li>this .div.innerHTML = </li></ul><ul><li>&quot;<a href=&quot;http://codebits.eu/&quot;>&quot; + </li></ul><ul><li>&quot;<img src=&quot;imgs/codebits.jpg&quot; alt=”Codebits&quot; title=”Codebits&quot; /></a>; this .div.style.left = (px ? px.x : “20” ) + &quot;px&quot; ; </li></ul><ul><li>this .div.style.top = (px? px.y : “20” ) + &quot;px&quot; ; </li></ul><ul><li>return this .div; </li></ul><ul><li>} }); </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    29. 29. Demo Implementing a custom control
    30. 30. SAPO Mapas API - Search <ul><li>Semantic search (Search for your needs): </li></ul><ul><ul><li>“ Comer em Lisboa” </li></ul></ul><ul><ul><li>“ Dormir em Lisboa” </li></ul></ul><ul><ul><li>“ Pitar em Lisboa ” </li></ul></ul><ul><li>These searches presents restaurants over the map, with detailed information: </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    31. 31. SAPO Mapas API – Search (2) <ul><li>Constructor: </li></ul><ul><ul><li>SAPO.Maps.Search(map?, panel?) </li></ul></ul><ul><li>Obtain the results </li></ul><ul><ul><li>Search.search(query, opts?) </li></ul></ul>SAPO Codebits 2009 Find your way with SAPO Mapas API
    32. 32. SAPO Mapas API – Search (3) <ul><li>function doSearch(){ </li></ul><ul><li>var value = document.getElementById( &quot;search&quot; ).value; </li></ul><ul><li>if (value.length === 0) return ; </li></ul><ul><li>search.cancel(); </li></ul><ul><li>search.clear(); </li></ul><ul><li>search.search(value, { </li></ul><ul><li>allowPaging: true , </li></ul><ul><li>categorizedSearch: true }); </li></ul><ul><li>} </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    33. 33. Demo Using the search service
    34. 34. SAPO Mapas API - Itineraries <ul><li>Get a route from a place to another. </li></ul><ul><li>Available routes: </li></ul><ul><ul><li>The fastest route (by car). </li></ul></ul><ul><ul><li>The shortest route (by car). </li></ul></ul><ul><ul><li>The pedestrian route. </li></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    35. 35. SAPO Mapas API – Itineraries (2) Find your way with SAPO Mapas API SAPO Codebits 2009
    36. 36. SAPO Mapas API – Itineraries (3) <ul><li>Constructor: </li></ul><ul><ul><li>SAPO.Maps.Itineraries(map?, panel?) </li></ul></ul><ul><li>Obtain the route </li></ul><ul><ul><li>Itinerary.getItinerary(from, to, opts?) </li></ul></ul><ul><ul><li>opts </li></ul></ul><ul><ul><ul><li>mode: ‘fastest’ | ‘shortest’ | ‘walk’ </li></ul></ul></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    37. 37. SAPO Mapas API – Itineraries (4) <ul><li>function getRoute() { </li></ul><ul><li>iti.cancel(); //if there’s a request for na itinerary cancel it </li></ul><ul><li>iti.clear(); //If there’s an itinerary drawn </li></ul><ul><li>var from = document.getElementById('from').value; </li></ul><ul><li>var to = document.getElementById('to').value; </li></ul><ul><li> if (!from || !to) return ; </li></ul><ul><li>//get the itinerary </li></ul><ul><li>iti.getItinerary(from, to, { mode: 'fastest’ }); </li></ul><ul><li>} </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    38. 38. Demo Using the itineraries service
    39. 39. More information <ul><li>http://mapas.sapo.pt/api </li></ul>Find your way with SAPO Mapas API SAPO Codebits 2009
    40. 40. Demo The last demo as a resource
    41. 41. Q & A
    42. 42. <ul><li>http://js.sapo.pt/Bundles/SAPOMapsAPI.js </li></ul><ul><li>http://mapas.sapo.pt/api </li></ul><ul><li>http://mapas.sapo.pt/codebits/demos.zip </li></ul>SAPO Codebits 2009 Find your way with SAPO Mapas API

    ×