SAPO GIS Hands-On
Guião
Includes:
<script type=\"text/javascript\" src=\"http://mapas.sapo.pt/codebits/api_bundle.php\"></script>
<link rel=\"Stylesheet\" href=\"http://mapas.sapo.pt/codebits/DraggableWindow.css\" />
1. Adicionar o mapa a um site
map = new SAPO.Widget.Maps({divid:\"map\", width: 1600, height: 750});
2. Adicionar um marcador
map.addMarker(38.70216, -9.17848, 'Codebits@LX Factory');
2.1. Personalizar o marcador adicionado
var opts = {
icon: {
image: \"http://mapas.sapo.pt/imgs/feed.png\",
iconSize: { width: 20, height: 20 },
infoWindowAnchor: { x: 0, y: 0 },
iconAnchor: { x: 10, y: 10 },
display_titles: false
},
opened: false,
selected: false,
permanent: true,
click_callback: function(marker){ alert(\"clicked\"); }
};
map.addMarker(38.70216,-9.17848,'Codebits@LX Factory','codebitsLayer', opts);
3. Adicionar feeds GeoRSS
map.getGeoRSSMarkers(\"http://services.sapo.pt/Traffic/GeoRSS\",
function (markers){map.addGeoRSSMarkers(markers,
{layer: \"trafficLayer\", iconURL: \"images/traffic.png\", iconWidth: 10, iconHeight: 19});});

4. Usar o serviço GIS para obter conteúdos georreferenciados
4.1. Obter lista de categorias
function fillCategories(){
var syndicationObj = new SAPO.Communication.Syndication();
syndicationObj.push(\"http://services.sapo.pt/GIS/GetCategoriesJSON\",
{timeout: 4,onComplete: function(obj,
args){categoriesCompleted(obj,args);}});
syndicationObj.runAll();
}
function categoriesCompleted(obj, args){
var result = obj.GetCategoriesResponse.GetCategoriesResult;
var select = document.getElementById(\"categories\");
for(var idx = 0; idx < result.Category.length; ++idx){
select.options[idx] = new Option(result.Category[idx].CategoryName,
result.Category[idx].CategoryId);
}
}
4.2. Pedir POIs por categoria e adicionar marcadores dinamicamente
function addFromSelectedCategory(){
var bounds = map.getBoundsLatLng();
var select = document.getElementById(\"categories\");
var categoryId = select.options[select.selectedIndex].value;
var url =
\"http://services.sapo.pt/GIS/GetPOIByBoundingBoxJSON?latitude1=\"+bounds.maxY+\"&longitude1=\"+bound
s.maxX+\"&latitude2=\"+bounds.minY+\"&longitude2=\"+bounds.minX+\"&categoryId=\"+categoryId+
\"&matchlevelId=0&trustlevelId=0&recordsPerPage=100\";
var syndicationObj = new SAPO.Communication.Syndication();
syndicationObj.push(url,{timeout: 4,
onComplete: function(obj, args){selectedCategoryCompleted(obj,args);}});
syndicationObj.runAll();
}
function selectedCategoryCompleted(obj, args){
var result = obj.GetPOIByBoundingBoxResponse.GetPOIByBoundingBoxResult;
for(var idx = 0; idx < result.POI.length; ++idx)
{
map.addMarker(result.POI[idx].Latitude, result.POI[idx].Longitude,
result.POI[idx].Name);
}
}

5. Divisões administrativas
5.1. Consultar os dados dos municípios através das operações do serviço GIS (ver em
services.sapo.pt) e guardar num elemento select.
function fillMunicipalities(){
var syndicationObj = new SAPO.Communication.Syndication();
syndicationObj.push(
\"http://services.sapo.pt/GIS/GetMunicipalitiesSortedByNameJSON\",{timeout: 4,
onComplete: function(obj, args){municipalitiesCompleted(obj,args);}});
syndicationObj.runAll();
}
function municipalitiesCompleted(obj, args){
var result =
obj.GetMunicipalitiesSortedByNameResponse.GetMunicipalitiesSortedByNameResult;
var select = document.getElementById(\"municipalities\");
for(var idx = 0; idx < result.Municipality.length; ++idx)
{
select.options[idx] = new Option(result.Municipality[idx].MunicipalityName,
result.Municipality[idx].MunicipalityId);
}
select.selectedIndex = 0;
}
5.2. Utilizar uma operação do serviço GIS que permita fazer um pedido através do código de um
município (ex.: GetPOIByMunicipalityIdAndCategoryId)
function search(){
var syndicationObj = new SAPO.Communication.Syndication();
var municipalities = document.getElementById(\"municipalities\");
var municipalityId = municipalities.options[municipalities.selectedIndex].value;
var categories = document.getElementById(\"categories\");
var categoryId = categories.options[categories.selectedIndex].value;
syndicationObj.push(
\"http://services.sapo.pt/GIS/GetPOIByMunicipalityIdAndCategoryIdJSON?municipalityId=\"+municipalit
yId+\"&categoryId=\"+categoryId+\"&matchlevelId=0&trustlevelId=0&recordsPerPage=10\",{timeout: 4,
onComplete: function(obj, args){searchCompleted(obj,args);},
onTimeout: function(){alert(\"timeout\");}});
syndicationObj.runAll();
}
function searchCompleted(obj, args){
var result =
obj.GetPOIByMunicipalityIdAndCategoryIdResponse.GetPOIByMunicipalityIdAndCategoryIdResult;
for(var idx = 0; idx < result.POI.length; ++idx)
{
map.addMarker(result.POI[idx].Latitude, result.POI[idx].Longitude,
result.POI[idx].Name);
}
}

6. Estatísticas
6.1. Utilizar um feed que devolve estatísticas para a área visível e actualizar os marcadores de
cada vez que houver uma actualização no mapa
Feed:
http://services.sapo.pt/GISStatistics/GetStatisticsForCategoriesInGeoRSS?minLatitude=37.23608&
minLongitude=-13.04962&maxLatitude=38.09214&maxLongitude=-7.70803
Evento: addMapStateChangeListener
function statisticsByCategory(enable){
if(enable){
refreshStatisticsByCategory();
statisticsListener =
map.addMapStateChangeListener(refreshStatisticsByCategory);
}
else{
map.removeMapStateChangeListener(statisticsListener);
map.removeLayer(\"statisticsLayer\");
}
}
function refreshStatisticsByCategory(){
map.removeLayer(\"statisticsLayer\");
var bounds = map.getBoundsLatLng();
map.getGeoRSSMarkers(
\"http://services.sapo.pt/GISStatistics/GetStatisticsForCategoriesInGeoRSS?minLatitu
de=\"+bounds.minY+\"&minLongitude=\"+bounds.minX+\"&maxLatitude=\"+bounds.maxY+\"&maxLongitude=\"
+bounds.maxX, function(markers){map.addGeoRSSMarkers(markers, {layer:
statisticsLayer\"});});
}
6.2. Mostrar no mapa os últimos POIs georreferenciados, com actualização periódica
Ver operação GetLastPOIs
Utilizar o serviço Transformer para transformar o XML dos POIs em GeoRSS:
http://services.sapo.pt/Transformer/GisPoiToGeoRSS?url={url url-encoded}
Função Javascript setInterval
function lastGeoReferencedPOIs(enable){
if(enable){
statisticsInterval = setInterval(function(){
map.getGeoRSSMarkers(\"http://services.sapo.pt/Transformer/GisPoiToGeoRSS?url=http%3A%2F%2F
services.sapo.pt%2FGIS%2FGetLastPOIs%3FrecordsPerPage%3D10\",
function(markers){
map.removeLayer(\"statisticsLayer\");
map.addGeoRSSMarkers(markers, {layer: \"statisticsLayer\", displayTitle: true});});},
2000);
}
else{
clearInterval(statisticsInterval);
map.removeLayer(\"statisticsLayer\");
}
}