Find your way with SAPO Maps API

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!


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

Where can I find it?

http://mapas.sapo.pt


http://mapas.sapo.pt/

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)


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

OpenLayers - A brief overview


OpenLayers - A brief overview (2)





• 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

http://openlayers.org/

http://openlayers.org/dev/examples/

And now...


Let's have some fun...


Let's talk about SAPO Mapas API!


SAPO Mapas API - Map


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


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>


• 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


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


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


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


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


•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)


SAPO Mapas API – Controls (2)

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

• Available controls:

•MousePosition•Navigation2•Window

•ContextMenu•MapType2•MiniMap2


SAPO Mapas API – Controls (3)

• Controls at SAPO Mapas Website


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);},…


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;

} });


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:


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});

}


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.


SAPO Mapas API – Itineraries (2)



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

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

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



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’ });

}


Demo

Using the itineraries service

More information

http://mapas.sapo.pt/api


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

Find your way with SAPO Maps API

Technology

sapo mapas api sapo

sapo mapas api controls

sapo mapas api overlays

sapo mapas api map events

sapo mapas api map layers

sapo mapas website

sapo gis

new sapo