Find your way with API

André Matos & João Duarte

Agenda

• What’s SAPO Mapas

• How SAPO Mapas API is made

• SAPO Mapas API – the inner workings

• Demos

•Documentation

2Find your way with SAPO Mapas APISAPO Codebits 2009

What's SAPO Mapas

• Web Maps Application. • 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)

 •  Get the best route, for anywhere you want (in Portugal).

 •  Search for your needs (e.g. "Comer em Lisboa").

 • And more... you must try it!

3Find your way with SAPO Mapas APISAPO Codebits 2009

Where can I find it?

http://mapas.sapo.pt

4Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API - How is it made?

Technologies used to make SAPO Mapas API: • OpenLayers 2.8

 • JavaScript ( yes, a lot of JavaScript :) )

 • Web Services

 o GIS WebServices (available at:

http://services.sapo.pt/Metadata/Service/GIS?culture=PT)

5Find your way with SAPO Mapas APISAPO Codebits 2009

OpenLayers - A brief overview

 

6Find your way with SAPO Mapas APISAPO Codebits 2009

OpenLayers - A brief overview (2)

 

7Find your way with SAPO Mapas APISAPO Codebits 2009

OpenLayers - A brief overview (3)

8Find your way with SAPO Mapas APISAPO Codebits 2009

OpenLayers - A brief overview (4)

• For more information about OpenLayers:o  http://openlayers.org 

 o  Examples - http://openlayers.org/dev/examples/

 o  Class reference -

http://dev.openlayers.org/releases/OpenLayers-2.8/doc/apidocs/files/OpenLayers-js.html

 o  OpenLayers UML -

http://trac.openlayers.org/attachment/wiki/UML/ClassDiagram_OL2.7RC2-20080916.pdf?format=raw 

 o Mailing lists

9Find your way with SAPO Mapas APISAPO Codebits 2009 c

 

And now...

10Find your way with SAPO Mapas APISAPO Codebits 2009

 

Let's have some fun...

11Find your way with SAPO Mapas APISAPO Codebits 2009

 

Let's talk about SAPO Mapas API!

12Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API - Map

 

13Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API - Map (2)

• The main type. • Draws a map in your HTML page. 

 • Provides some commands to interact with the map:

 o setMapCenter - Center the map in a given point

 o zoomTo - Zoom to a given zoom level

 o setBaseLayer - Changes the map view type

14Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API - Map (2)

 

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>

15Find your way with SAPO Mapas APISAPO Codebits 2009

• There are 4 layer types available on SAPO Mapas API: 

o Map (NORMAL_MAP)     

o Satellite (SATELLITE_MAP) 

o Hybrid (HYBRID_MAP)  

o Terrain (TERRAIN_MAP) 

o And soon will be more...

SAPO Mapas API - Map Layers

16Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API - Map Layers (2)

• Change the base layer programmatically: 

map.getBaseLayers() Returns an object with the following keys:

• NORMAL_MAP (Map mode)• HYBRID_MAP (Hybrid mode)• SATELLITE_MAP (Satellite mode)• TERRAIN_MAP (Terrain mode)

  

 map.setBaseLayer(map.getBaseLayers().HYBRID_MAP) changes the base layer to hybrid mode

17Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API - Map Events

• Register an event: map.eventso register(event type, context, function)o unregister(event type, context, function)

 •  Event types:

o click, dblclick, baselayerchanged, move, movestart, moveend, zoomend, popupopen, popupclose, mouseover, mouseout, mousemove

18Find your way with SAPO Mapas APISAPO Codebits 2009

Demo

• Add a map to your page • Listening some events • Defining a base layer 

SAPO Mapas API - Overlays

• What's an overlay? 

o We call overlay to everything you put over the map which moves with it. 

 •  In OpenLayers there are vector features.

 • Available overlays:

o Markero Polygono Polyline

20Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API – Overlays (2)

• Add an overlay to the map

map.addOverlay(overlay)

• Register some events:o registerEvent(event type, scope, function)o unregisterEvent(event type, scope, function)

• Supported events: o popupopened, popupclosed, click, dblclick, mousedown, mouseup,

mouseover, mouseout, dragstart, drag, dragend, enabledragging, disabledragging

21Find your way with SAPO Mapas APISAPO Codebits 2009

•Show how overlays work

•marker, polygon and polyline

Demo

SAPO Mapas API - Controls

• Control types:o Presentation - Display HTML over the map o Behavior - Manages map behavior

•  Control interface (OpenLayers.Control)

• Add a control to the map:o map.addControl(control_instance)

23Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API – Controls (2)

• Methods: o draw(px: OpenLayers.Pixel)o destroy()

• Available controls:

•MousePosition•Navigation2•Window

•ContextMenu•MapType2•MiniMap2

24Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API – Controls (3)

• Controls at SAPO Mapas Website

25Find your way with SAPO Mapas APISAPO Codebits 2009

Demo

Add controls to your map

SAPO Mapas API - Custom Control

var Codebits = OpenLayers.Class(OpenLayers.Control, {

//Contructor initialize: function(){

//base class call OpenLayers.Control.prototype.initialize.apply(this, []);

},

//Called on page unloaddestroy: function(){ //base class call   OpenLayers.Control.prototype.destroy.apply(this, arguments);},…

27Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API - Custom Control (2)

…//called when the control is added to mapdraw: function(px){

//base class callOpenLayers.Control.prototype.draw.apply(this,

arguments);this.div.innerHTML =

"<a href=\"http://codebits.eu/\">" + "<img src=\"imgs/codebits.jpg\" alt=\”Codebits\" title=\”Codebits\" /></a>; this.div.style.left = (px ? px.x : “20”) + "px";

this.div.style.top = (px? px.y : “20”) + "px";return this.div;

} });

28Find your way with SAPO Mapas APISAPO Codebits 2009

Demo

Implementing a custom control

SAPO Mapas API - Search• Semantic search (Search for your needs):

o “Comer em Lisboa”o “Dormir em Lisboa”o “Pitar em Lisboa”

• These searches presents restaurants over the map, with detailed information:

30Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API – Search (2)

• Constructor:o SAPO.Maps.Search(map?, panel?)

• Obtain the resultso Search.search(query, opts?)

SAPO Codebits 2009 Find your way with SAPO Mapas API 31

SAPO Mapas API – Search (3)

function doSearch(){var value = document.getElementById("search").value;if(value.length === 0)return;search.cancel();search.clear();search.search(value, {

allowPaging: true, categorizedSearch: true});

}

32Find your way with SAPO Mapas APISAPO Codebits 2009

Demo

Using the search service

SAPO Mapas API - Itineraries

• Get a route from a place to another.

• Available routes:o The fastest route (by car).o The shortest route (by car).o The pedestrian route.

34Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API – Itineraries (2)

35Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API – Itineraries (3)

• Constructor:o SAPO.Maps.Itineraries(map?, panel?)

• Obtain the routeo Itinerary.getItinerary(from, to, opts?)o opts

omode: ‘fastest’ | ‘shortest’ | ‘walk’

36Find your way with SAPO Mapas APISAPO Codebits 2009

SAPO Mapas API – Itineraries (4)

function getRoute() {iti.cancel(); //if there’s a request for na itinerary cancel ititi.clear(); //If there’s an itinerary drawn

var from = document.getElementById('from').value;

var to = document.getElementById('to').value;

if(!from || !to) return;

//get the itinerary

iti.getItinerary(from, to, { mode: 'fastest’ });

}

37Find your way with SAPO Mapas APISAPO Codebits 2009

Demo

Using the itineraries service

More information

http://mapas.sapo.pt/api

39Find your way with SAPO Mapas APISAPO Codebits 2009

Demo

The last demo as a resource

Q & A

• http://js.sapo.pt/Bundles/SAPOMapsAPI.js

• http://mapas.sapo.pt/api

• http://mapas.sapo.pt/codebits/demos.zip

SAPO Codebits 2009 Find your way with SAPO Mapas API 42