Sapo GIS Hands-On

623 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
623
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sapo GIS Hands-On

  1. 1. SAPO GIS Hands-On Guião Includes: <script type=quot;text/javascriptquot; src=quot;http://mapas.sapo.pt/codebits/api_bundle.phpquot;></script> <link rel=quot;Stylesheetquot; href=quot;http://mapas.sapo.pt/codebits/DraggableWindow.cssquot; /> 1. Adicionar o mapa a um site map = new SAPO.Widget.Maps({divid:quot;mapquot;, 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: quot;http://mapas.sapo.pt/imgs/feed.pngquot;, 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(quot;clickedquot;); } }; map.addMarker(38.70216,-9.17848,'Codebits@LX Factory','codebitsLayer', opts); 3. Adicionar feeds GeoRSS map.getGeoRSSMarkers(quot;http://services.sapo.pt/Traffic/GeoRSSquot;, function (markers){map.addGeoRSSMarkers(markers, {layer: quot;trafficLayerquot;, iconURL: quot;images/traffic.pngquot;, iconWidth: 10, iconHeight: 19});});
  2. 2. 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(quot;http://services.sapo.pt/GIS/GetCategoriesJSONquot;, {timeout: 4,onComplete: function(obj, args){categoriesCompleted(obj,args);}}); syndicationObj.runAll(); } function categoriesCompleted(obj, args){ var result = obj.GetCategoriesResponse.GetCategoriesResult; var select = document.getElementById(quot;categoriesquot;); 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(quot;categoriesquot;); var categoryId = select.options[select.selectedIndex].value; var url = quot;http://services.sapo.pt/GIS/GetPOIByBoundingBoxJSON?latitude1=quot;+bounds.maxY+quot;&longitude1=quot;+bound s.maxX+quot;&latitude2=quot;+bounds.minY+quot;&longitude2=quot;+bounds.minX+quot;&categoryId=quot;+categoryId+ quot;&matchlevelId=0&trustlevelId=0&recordsPerPage=100quot;; 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); } }
  3. 3. 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( quot;http://services.sapo.pt/GIS/GetMunicipalitiesSortedByNameJSONquot;,{timeout: 4, onComplete: function(obj, args){municipalitiesCompleted(obj,args);}}); syndicationObj.runAll(); } function municipalitiesCompleted(obj, args){ var result = obj.GetMunicipalitiesSortedByNameResponse.GetMunicipalitiesSortedByNameResult; var select = document.getElementById(quot;municipalitiesquot;); 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(quot;municipalitiesquot;); var municipalityId = municipalities.options[municipalities.selectedIndex].value; var categories = document.getElementById(quot;categoriesquot;); var categoryId = categories.options[categories.selectedIndex].value; syndicationObj.push( quot;http://services.sapo.pt/GIS/GetPOIByMunicipalityIdAndCategoryIdJSON?municipalityId=quot;+municipalit yId+quot;&categoryId=quot;+categoryId+quot;&matchlevelId=0&trustlevelId=0&recordsPerPage=10quot;,{timeout: 4, onComplete: function(obj, args){searchCompleted(obj,args);}, onTimeout: function(){alert(quot;timeoutquot;);}}); 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); } }
  4. 4. 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(quot;statisticsLayerquot;); } } function refreshStatisticsByCategory(){ map.removeLayer(quot;statisticsLayerquot;); var bounds = map.getBoundsLatLng(); map.getGeoRSSMarkers( quot;http://services.sapo.pt/GISStatistics/GetStatisticsForCategoriesInGeoRSS?minLatitu de=quot;+bounds.minY+quot;&minLongitude=quot;+bounds.minX+quot;&maxLatitude=quot;+bounds.maxY+quot;&maxLongitude=quot; +bounds.maxX, function(markers){map.addGeoRSSMarkers(markers, {layer: statisticsLayerquot;});}); } 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(quot;http://services.sapo.pt/Transformer/GisPoiToGeoRSS?url=http%3A%2F%2F services.sapo.pt%2FGIS%2FGetLastPOIs%3FrecordsPerPage%3D10quot;, function(markers){ map.removeLayer(quot;statisticsLayerquot;); map.addGeoRSSMarkers(markers, {layer: quot;statisticsLayerquot;, displayTitle: true});});}, 2000); } else{ clearInterval(statisticsInterval); map.removeLayer(quot;statisticsLayerquot;); } }

×