Find your way with SAPO Maps API
-
Upload
jdduarte -
Category
Technology
-
view
1.731 -
download
0
description
Transcript of Find your way with SAPO Maps API
![Page 1: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/1.jpg)
Find your way with API
André Matos & João Duarte
![Page 2: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/2.jpg)
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
![Page 3: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/3.jpg)
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
![Page 4: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/4.jpg)
Where can I find it?
http://mapas.sapo.pt
4Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 5: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/5.jpg)
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
![Page 6: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/6.jpg)
OpenLayers - A brief overview
6Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 7: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/7.jpg)
OpenLayers - A brief overview (2)
7Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 8: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/8.jpg)
OpenLayers - A brief overview (3)
8Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 9: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/9.jpg)
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
![Page 10: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/10.jpg)
And now...
10Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 11: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/11.jpg)
Let's have some fun...
11Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 12: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/12.jpg)
Let's talk about SAPO Mapas API!
12Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 13: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/13.jpg)
SAPO Mapas API - Map
13Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 14: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/14.jpg)
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
![Page 15: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/15.jpg)
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
![Page 16: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/16.jpg)
• 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
![Page 17: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/17.jpg)
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
![Page 18: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/18.jpg)
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
![Page 19: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/19.jpg)
Demo
• Add a map to your page • Listening some events • Defining a base layer
![Page 20: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/20.jpg)
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
![Page 21: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/21.jpg)
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
![Page 22: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/22.jpg)
•Show how overlays work
•marker, polygon and polyline
Demo
![Page 23: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/23.jpg)
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
![Page 24: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/24.jpg)
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
![Page 25: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/25.jpg)
SAPO Mapas API – Controls (3)
• Controls at SAPO Mapas Website
25Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 26: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/26.jpg)
Demo
Add controls to your map
![Page 27: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/27.jpg)
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
![Page 28: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/28.jpg)
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
![Page 29: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/29.jpg)
Demo
Implementing a custom control
![Page 30: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/30.jpg)
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
![Page 31: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/31.jpg)
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
![Page 32: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/32.jpg)
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
![Page 33: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/33.jpg)
Demo
Using the search service
![Page 34: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/34.jpg)
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
![Page 35: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/35.jpg)
SAPO Mapas API – Itineraries (2)
35Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 36: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/36.jpg)
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
![Page 37: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/37.jpg)
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
![Page 38: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/38.jpg)
Demo
Using the itineraries service
![Page 39: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/39.jpg)
More information
http://mapas.sapo.pt/api
39Find your way with SAPO Mapas APISAPO Codebits 2009
![Page 40: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/40.jpg)
Demo
The last demo as a resource
![Page 41: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/41.jpg)
Q & A
![Page 42: Find your way with SAPO Maps API](https://reader033.fdocuments.us/reader033/viewer/2022061211/54935524b479598d4e8b45a1/html5/thumbnails/42.jpg)
• 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