Gis SAPO Hands On

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";


syndicationObj.push(url,{timeout: 4,

onComplete: function(obj, args){selectedCategoryCompleted(obj,args);}});


}

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(){


syndicationObj.push(

"http://services.sapo.pt/GIS/GetMunicipalitiesSortedByNameJSON",{timeout: 4,

onComplete: function(obj, args){municipalitiesCompleted(obj,args);}});


}

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


}

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(){


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.addGeoRSSMarkers(markers, {layer: "statisticsLayer", displayTitle: true});});},

2000);

}

else{

clearInterval(statisticsInterval);


}

}

http://services.sapo.pt/GISStatistics/GetStatisticsForCategoriesInGeoRSS?minLatitude=37.23608&minLongitude=-13.04962&maxLatitude=38.09214&maxLongitude=-7.70803

http://services.sapo.pt/GISStatistics/GetStatisticsForCategoriesInGeoRSS?minLatitude=37.23608&minLongitude=-13.04962&maxLatitude=38.09214&maxLongitude=-7.70803

Technology

Gis SAPO Hands On