TALLER 2: Crear un visualitzador web amb...

TALLER 2: Crear un visualitzador web amb informació personalitzada fent servir les eines de la IDE menorca

Objectiu: Desenvolupar visualitzadors de mapes a partir de la llibreria OpenLayers, base de dades MySQL, mitjançant programació amb PHP i fent servir els servis OGC de la IDE Menorca

Cal desenvolupar un visor propi (no val utilitzar els iframes de la IDE de Menorca) que mostri la següent infotrmació:

• Foto aèrea de Menorca de l'any 2012

• Foto aèrea de Menorca de l'any 1956

• Traçat del camí de cavalls

• Xarxa viària de Menorca (escala 1:100:000 i 1:25000)

• Que apareguin les platges de Menorca com a punts interactius i que en fer-hi un click mostri certa informació. Tant els punts com la informació a mostrar es troben a una base de dades en format MySQL i s'han de tractar mitjançant programació PHP

http://cartografia.cime.es I [email protected] I 971 35 62 35

D'ON TREIEM LA INFORMACIÓ CARTOGRÀFICA: REPÀS DELS SERVEIS WMS15 minuts

Per a obtenir les fotos i altres capes d'informació cartogràfica haurem d'utilitzar serveis WMS.

Recordem que un servei WMS és un servei web estàndard (sempre se li passen els mateixos paràmetres i sempre retorna el mateix tipus d'informació) que ens pot

retornar la cartografia que necessitem. Per a cridar un servei WMS ens cal bàsicament dues coses:

• Una adreça web d'aquest servei.• La llista de capes que pot servir aquest servei

Obre el geoportal de la IDE menorca (http://cartografia.cime.es) i accedeix al visualitzador a través del destacat de la dreta de la pàgina. Un cop obert el visualitzador cerca per paraula clau: “ortofoto 1956”. Fes un click sobre la icona de la “i” i anota l'adreça del servei i la capa que ofereix:

• url servei WMS:http://ideib.caib.es/pub_ideib/public/IMATGES_OR1956_R50/MapServer/WMSServer

• identificador de la capa: 0


1

http://ideib.caib.es/pub_ideib/public/IMATGES_OR1956_R50/MapServer/WMSServer?SERVICE=WMS&REQUEST=GetCapabilities


http://cartografia.cime.es/

Repeteix les cerques amb altres paraules clau. Aquest és ha de ser el resultat:

Capa a mostrar Paraula clau cerca

URL servei Id Capa

Foto aèrea de Menorca de l'any 1956

Ortofoto 1956 http://ideib.caib.es/pub_ideib/public/IMATGES_OR1956_R50/MapServer/WMSServer

0

Foto aèrea de Menorca de l'any 2010

Ortofoto 2012 http://ideib.caib.es/pub_ideib/public/IMATGES_OR2012_R25/MapServer/WMSServer

0

Traçat del camí de cavalls

Camí de cavalls http://ide.cime.es/menorca/wms/ordenacio/

OR007CCA_ccavalls

Xarxa viària 1:100000

Xarxa viària 100 http://ide.cime.es/menorca/wms/base_referencia/

RE007RUS_xarxaviaria_s2

Xarxa viària 1:25000

Xarxa viaria 25 http://ide.cime.es/menorca/wms/base_referencia/

RE007RUS_xarxaviaria

En cas que volguéssim afegir capes de la IDE BALEAR, hauríem d'accedir a la web autonòmica:

Accedeix al portal de la IDE de les illes Balears: www.ideib.cat i fes un click al catàleg (que trobaràs dins els destacats)

• Dins el quadre de diàleg QUÈ, hi posarem “Imatges”.• Quan ens retorni els resultats, farem un click al link Serveis del panell 2• Farem un clcik al link capacitats del darrer servei


http://www.ideib.cat/







UN PRIMER INTENT DE VISOR: A SAC PAC.10 minuts

A partir dels serveis WMS podem obtenir les imatges de la cartografia fent peticions al servei:

URLdelServei? + Paràmetres Generals + Capes a servir + Coordenades a visualitzar.

Un exemple d'una petició d'una orto de Menorca de l'any 2010 seria:

URLdelServei http://ideib.caib.es/pub_ideib/public/IMATGES_OR2012_R25/MapServer/WMSServer?

Paràmetres Generals

service=wms&version=1.1.1&request=getmap&srs=EPSG:25831&STYLES=&format=image/jpeg&width=920&height=660

Capes a servir &layers=0Coordenades a visualitzar

&bbox=588541,4421125,592459,4423875 (Xmin, Ymin, Xmax, Ymax)

I tot junt:http://ideib.caib.es/pub_ideib/public/IMATGES_OR2012_R25/MapServer/WMSServer?service=wms&version=1.1.1&request=getmap&layers=0&srs=EPSG:25831&STYLES=&format=image/jpeg&width=920&height=660&bbox=588541,4421125,592459,4423875

Obre un navegador i copia aquest enllaç, a veure què passa...

Cada cop que variem les coordenades a visualitzar, obtenim una imatge diferent. Així doncs, podríem acabar fent un visor molt rudimentari controlant les coordenades a demanar en funció de les accions que faci l'usuari:

• Si vas a la dreta, incrementa la Xmin i la Xmax 500 metres• Si vas a l'esquerra, disminueix la Xmin i la Xmax 500 metres• Si vas al nord, incrementa la Ymin i la Ymax 500 metres• Si vas al sud, disminueix la Ymin i la Ymax 500 metres


2




Aquest visor el podeu trobar com a l'exercici “visor_1.php” que podeu consultar al següent enllaç:

http://www.troopha.com/FormacioSIG/2012/visor_1.php

Evidentment, és molt poc pràctic, lent i caldria fer un fusionat de totes les imatges retornades pels diferents serveis abans de mostrar el resultat.

Tot i així, aquesta tecnologia s'ha estat emprant fins fa ben bé pocs anys!!


http://www.troopha.com/FormacioSIG/2012/visor_1.php

OPENLAYERS (1): L'API PER A GESTIONAR SERVEIS WMS (I ALTRES)10 min

OpenLayers és una llibreria JavaScript de codi lliure que gestiona les peticions a serveis WMS (entre moltes altres coses) per noslatres: Ens estalvia controlar les peticions!!

Anem a fer un visor similar a l'exemple anterior però utilitzant OpenLayers. El seu funcionament és molt senzill:

• Crida a la llibreria a la capçalera de la pàgina (<head>)• Funció Inicial en Javascript que fa:

• Crea un objecte mapa que s'ubicarà a un element <div> del cos (<body>)• Prepara aquest objecte (capes a mostrar, coordenades, nivell de zoom,

etc.)• Crear un elemtn contenidor del mapa (<div>) dins el body• Cridar la funció Inicial quan el body s'hagi carregat (<body onLoad=Inicial()>)

Crearem una pàgina web que es digui “ex1.htm” i hi aferrarem el següent codi:

<html><head>

<title>El primer visor amb OpenLayers</title><script src="OpenLayers-2.10/lib/OpenLayers.js"></script>

<script type="text/javascript"> //Declarem la variable mapvar map

//creem la funcio initfunction init(){

//Especifiquem les opcions de visualització del mapavar options = {

controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoom(),new OpenLayers.Control.LayerSwitcher(),new OpenLayers.Control.MousePosition(),new OpenLayers.Control.ScaleLine({maxWidth:200})

],

projection: new OpenLayers.Projection('EPSG:25831'),displayProjection: new OpenLayers.Projection('EPSG:25831'),maxExtent: new OpenLayers.Bounds(567000, 4406000,

614000, 4439000),units: 'm',maxResolution: 'auto'

}

//Ortofoto 2012: Capes WMS com a baseLayervar ortofoto2012 = new OpenLayers.Layer.WMS(

//Nom a mostrar"Ortofoto 2012",//Url del servei"http://ideib.caib.es/pub_ideib/public/IMATGES_OR2012_R25/M

apServer/WMSServer", //Capes{layers: '0'}, {isBaseLayer: true}

);


3

//Creem l'objecte "map" al contenidor DIV espeicifcat, hi afegim les capes i el centrem

map = new OpenLayers.Map('mapDIV',options);map.addLayers([ortofoto2012]);map.setCenter(new OpenLayers.LonLat(590500,4422500), 1);

}

</script> </head>

<body onload="init()"> <center>

<div id="mapDIV" style="width: 100%px; height: 100%"></div>

</center></body>

</html>

I aquí el resultat:

Cada cop que ens desplacem pel mapa o canviem de zoom, per darrera OpenLayers va fent totes les peticions que hauríem de fer a mà nosaltres i ens les va retornant de forma automàtica.

GOOGLE MAPS API: L'API DE GOOGLE vs OPENLAYERS10 min

Google ofereix una API molt similar a OpenLayers que també permet inserir cartografia en una pàgina web.

El seu funcionament és molt similar:

• Crida a la llibreria a la capçalera de la pàgina (<head>)• Funció Inicial en Javascript que fa:

• Crea un objecte mapa que s'ubicarà a un element <div> del cos (<body>)• Prepara aquest objecte (capes a mostrar, coordenades, nivell de zoom,

etc.)• Crear un elemtn contenidor del mapa (<div>) dins el body• Cridar la funció Inicial quan el body s'hagi carregat (<body onLoad=Inicial()>)

Crearem una pàgina web que es digui “ex2.htm” i hi aferrarem el següent codi:

<html> <head> <title>Exercici 2: Google Maps v2 Bàsic</title>

 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6oTTVB_7kcaN-UYpK4XTJhRBRsA_8O_TwHirK4FdDtxA7FnmRhSaa_A1W5SeQ7980sdjoShbgKuIgw" type="text/javascript"></script> <script type="text/javascript">

//Creem la funcií initialize() function initialize() { if (GBrowserIsCompatible()) {

//Creem l'objecte map i el posarem al contenidor especificatvar map = new GMap2(document.getElementById("map_canvas"));//Afegim l'opció de mostrar el PlugIn de Google Earthmap.addMapType(G_SATELLITE_3D_MAP);//Preparem les coordenades del centre del mapa i el zoom

map.setCenter(new google.maps.LatLng(39.939661, 4.082762), 11);//Preparem la Interfície d'usuari per defectemap.setUIToDefault();

} }

</script> </head>  <body onload="initialize()" onunload="GUnload()">

<h1>Exercici 2: Un exemple de Google Maps v2 - Basic</h1><p> 

<div id="map_canvas" style="width: 900px; height: 600px"></div> </body></html>

Hi ha algunes diferències importants entre Google Maps i OpenLayers:

• La cartografia sempre és la servida per Google, no podem cridar altres serveis WMS de forma senzilla. Per tant, no podrem veure ni el camí de cavalls, ni les altres capes necessàries

• La llibreria JavaScript no és descarregable, sempre l'hem de cridar al


4

sevidor de Google previ registre. No podem treballar offline i Google controla les peticions que es fan, podent tallar el servei al cap de certes peticions si no es paga una cuota

I aquí en veiem el resultat:


OPENLAYERS (2): AFEGINT CAPES BASE I CAPES SOBREPOSADES5 min

Una de les avantges importants d'OpenLayers és que és molt senzill afegir altres serveis WMS.

Anem a afegir la resta de crides als serveis a la nostra pàgina web que hem iniciat a l'exercici 1. Guardarem ”ex1.htm” com a “ex3.htm” i hi afegirem el següent codi dins la funció init(), a continuació de la crida al servei de la ortofoto que ja havíem fet i just abans de la creació de l'objecte map

//Ortofoto 1956: Capes WMS com a baseLayervar ortofoto1956 = new OpenLayers.Layer.WMS(

"Ortofoto 1956","http://ideib.caib.es/pub_ideib/public/IMATGES_OR1956_R50/M

apServer/WMSServer", {layers: '0'}, {isBaseLayer: true}

);

//Camí de cavalls: Capa WMS sobreposadavar layerWMS_CamiCavalls = new OpenLayers.Layer.WMS(

"Cami de Cavalls","http://ide.cime.es/menorca/wms/ordenacio/", {layers: 'OR007CCA_ccavalls', transparent: 'true'}, {isBaseLayer: false, visibility: true}

);

//Xarxa viària: Capa WMS sobreposadavar layerWMS_XarxaViaria = new OpenLayers.Layer.WMS(

"Xarxa Viària","http://ide.cime.es/menorca/wms/base_referencia/", {layers: 'RE007RUS_xarxaviaria,RE007RUS_xarxaviaria_s2',

transparent: 'true'}, {isBaseLayer: false, visibility: true}

);

Fixeu-vos que quan fem la crida als serveis, a banda d'espicificar la capa o capes que volem que ens torni, especifiquem un altre paràmetre: isBaseLayer.

Aquest paràmetre per indicar si la capa serà un capa de fons, sobre la qual podem sobreposar altres capes o bé serà una capa que serà carregada damunt una capa de fons.

Podem veure divereses capes sobreposades alhora però una única capa de fons. Fixeu-vos bé que la capa Ortofoto1956 està declarada com a capa de fons, perquè o bé visualitzarem la orto de 1956 o bé la del 2010:

Finalment, caldrà dir a l'objecte map que carregui aquestes capes. Cal substituir l'anterior línia:

map.addLayers([ortofoto2012]);

Per aquesta:

map.addLayers([ortofoto2012,ortofoto1956,layerWMS_CamiCavalls,layerWMS_XarxaViaria]);


5

I aquí en veiem el resultat:

Podeu provar a activar i desactivar capes sobreposades i a canviar la capa de fons.


PHP: CONNECTATS A LA BASE DE DADES10 min

Tenim una base de dades en format MySQL que conté informació de platges:

La base de dades conté la taula “platges” que té els següents camps:

• idPlatja: Identificador de la platja• nomPlatja: nom de la platja• idTipusPlatja: tipus de la platja (A,B,C)• urlFitxaAmbiental: una adreça url a un PDF d'informació ambiental• urlFitxaResum: una adreça url a una imatge d'una fitxa de la platja• X: Coordenada x en sistema de referència ETRS89 (o 25831)• Y: Coordenada y en sistema de referència ETRS89 (o 25831)

Teniu l'arxiu “platges.sql” que conté les sentències SQL per a la creació de la taula.

Cal ubicar les platges damunt el mapa i per tant, el primer que farem és crear un arxiu PHP que permeti fer una consulta a la taula

Per tant guardarem l'actual ex3.htm com a ex4.php i afegirem el següent codi a l'inici del document:

<?php//Ens conectem a la base de dades$username="u_platges";$password="password";$database="platges";

mysql_connect("localhost",$username,$password);@mysql_select_db($database) or die( "Unable to select database");

//Seleccionem tots els registres de la taula entitats$query="SELECT * FROM platges order by nomPlatja";$result=mysql_query($query);


6

$num=mysql_numrows($result);

//Tanquem la connexiómysql_close();

?><html>...

Aquest codi es conecta a la base de dades amb l'usuari “u_platges” i el password “password”. Cal adaptar el codi al vostre usuari i password.

Ara ja tenim tota la informació enmagatzemada a la variable $result


OPENLAYERS (3): AFEGINT MARCADORS15min

OpenLayers permet afegir marcadors. Venen a ser les famoses xinxetes de Google, una icona damunt el mapa que permet mostrar informació.

OpenLayers té una capa especial per als marcadors, la tracta diferent que a una capa WMS:

Cal declarar la cara markers com a capa de tipus Markers. Per tant, farem una còpia del nostre arxiu “ex4.php” com a “ex5.php” i hi afegirem les següents línies:

Declararem la la varible markers com a variable global, just abans de la funció init()

...<script type="text/javascript">

var mapvar markersfunction init(){

...Creem la capa markers dins la función init(), just després de la creació de la darrera capa WMS de xarxa viària

//Capa de marcadorsmarkers = new OpenLayers.Layer.Markers( "Markers" );

I substituïm la línia:

map.addLayers([ortofoto2012,ortofoto1956,layerWMS_CamiCavalls,layerWMS_XarxaViaria]);

Per aquesta de nova, on carreguem la capa markers a l'objecte map:

map.addLayers([ortofoto2012,ortofoto1956,layerWMS_CamiCavalls,layerWMS_XarxaViaria,markers]);

Per afegir un marcador, us proposem una funció en JavaScript que rep com a paràmetres la posició X, la posició Y, la icona i el codi HTML a mostrar quan es faci un click. Copieu aquesta funció dins la capçalera (<head>), però fora de la funció init()

function posaMarker(lon, lat, icon, html){

var lonLatMarker = new OpenLayers.LonLat(lon, lat);var feature = new OpenLayers.Feature(markers, lonLatMarker);feature.closeBox = true;feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new

OpenLayers.Size(200, 100) } );feature.data.popupContentHTML = html;feature.data.overflow = "hidden";

var size = new OpenLayers.Size(32, 32);var icon = new OpenLayers.Icon(icon, size);var marker = new OpenLayers.Marker(lonLatMarker, icon);

marker.feature = feature;

var markerClick = function(evt) {if (this.popup == null) {

this.popup = this.createPopup(this.closeBox);map.addPopup(this.popup);


7

this.popup.show();} else {

this.popup.toggle();}OpenLayers.Event.stop(evt);

};marker.events.register("mousedown", feature, markerClick);markers.addMarker(marker);

}

Farem una nova funció JavaScript anomenada “marcadors_on” que recorri la matriu de resultats fruit de la consulta PHP i que per a cada registre que trobi, construeixi els paràmetrs lon,lat, icon i html i faci una crida a la funció posaMarker()

Copieu aquest funció just després de la funció posaMarker(), dins la capçalera (<head>) i fora de la funció init()

function marcadors_on(){

<?php$i=0;

//Recorrem la matriu de resultatswhile ($i < $num) {

//Assignem els valors de cada camp de cada registre a una variable$idPlatja = mysql_result($result,$i,"idPlatja");$nomPlatja = str_replace("'","\'",mysql_result($result,$i,"nomPlatja"));$tipusPlatja = mysql_result($result,$i,"tipusPlatja");$urlFitxaAmbiental = mysql_result($result,$i,"urlFitxaAmbiental");$urlFitxaResum = mysql_result($result,$i,"urlFitxaResum");$Lon = mysql_result($result,$i,"X");$Lat = mysql_result($result,$i,"Y");

//Construim el codi html a mostrar amb el nom de la platja, un link i la imatge$html="<b><font face=arial>".$nomPlatja."</b><hr><center><a href=\"".

$urlFitxaAmbiental."\" target=\"_new\">Fitxa ambiental</a></center><br><a href=\"".$urlFitxaResum."\" target=\"_new\" border=0><img src=\"".$urlFitxaResum."\" width=413 height=584 border=0></a>";

//Preparem una icona segons el tipus de platja i afegim l'element a la taula amb la llista platges

$icon ="''";if ($tipusPlatja=='A') {

$icon="'http://maps.google.com/mapfiles/kml/paddle/red-circle.png'";}if ($tipusPlatja=='B') {

$icon="'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png'";}if ($tipusPlatja=='C') {

$icon="'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png'";}

//cridem la funció posaMarker amb les variables que hem createcho "posaMarker($Lon,$Lat,$icon,'$html');";$i++;

}?>

}

Ara només ens falta cridar la funció marcadors_on() al final de la funció init().


... //Creem l'objecte "map" al contenidor DIV espeicifcat, hi afegim les capes i el centremmap = new OpenLayers.Map('mapDIV',options);map.addLayers([ortofoto2012,ortofoto1956,layerWMS_CamiCavalls,layerWMS_XarxaViaria,markers]);map.setCenter(new OpenLayers.LonLat(590500,4422500), 1);marcadors_on()}...


EXTJS: UN FRAMEWORK JAVASCRIPT PER A FER BONS LAYOUTS10 min

ExtJs és un entorn de treball JavaScript (FrameWork) que permet desenvolupar, entre moltes altres coses, layouts molt professionals amb molt poc esforç.

Anem a millorar la presentació del nostre mapa. Fem una còpia del nostre “ex5.php” a “ex6.php”

Afegirem la crida a la llibreria ExtJS i als seus estils a l'inici de la capçalera (<head>) just després de la crida a la API d'OpenLayers:

<script src="OpenLayers-2.10/lib/OpenLayers.js"></script><script src="ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script><script src="ext-3.2.1/ext-all.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />

Crearem el següent codi JavaScript, dins la capçalera, sense associar-lo a cap funció i just després de la funció “marcadors_on()” que acabem de crear:

Ext.onReady(function() {var backendViewport = new Ext.Viewport({

layout: 'border',items: [{

region: 'north',xtype: 'panel',border: true,margins: '0 0 0 0',contentEl:'top',height:37

},{

region: 'center',layout: 'fit',xtype: 'panel', contentEl:'mapDIV'

},{region: 'east',collapsible: true,title: 'Platges',xtype: 'panel',width: 250,split: true,layout: 'accordion',defaults: {

bodyStyle: 'padding:5px'},layoutConfig: {

titleCollapse: true,animate: true,activeOnTop: false

},items: [{

title: 'Platges Verges',contentEl:'platges1'

},{title: 'Platges verges amb serveis',contentEl:'platges2'

},{title: 'Platges urbanes',


8

contentEl:'platges3'}]

}] });

init()});

Aquest codi ens generarà un layout amb 3 regions tot just s'hagi carregat la pàgina.

• La regió de dalt (north), mostrarà el contingut del div 'top' (contentEl:'top') que haurem de posar dins el body.

• La regió del mig (center) mostrarà el contingut del div 'mapDIV' que hem estat fent fins ara

• La regió de la dreta (east), mostrarà un panell amb 3 acordions, cadascuna de les quals mostrarà el contingut dels divs 'platges1', 'platges2' i 'platges3'

Finalment, s'executarà la funció init() que s'executava fins ara.

Ens falta doncs, afegir els 4 <divs> que necessita aquest layout al <body>:

<body > <center>

<div id="mapDIV" style="width: 100%px; height: 100%"></div>

</center><div id="top"><table width=100% cellspacing=2 cellpadding=2

style="border-collapse:collapse;border:1px solid #d0d0d0;"><tr><td style="font-family:Arial, Verdana, Helvetica;font-weight:bold;font-size:16pt;border:1px solid #bbbbbb;background-color:#dedede;padding:4px;">Visor de platges del IES Ramis</td></tr></table></div>

<div id="platges1">platges1</div><div id="platges2">platges2</div><div id="platges3">platges3</div>

</body>

I heus aquí el canvi:

ELS RETOCS FINALS: GENERANT CONTINGUITS DINÀMICS10 min

Modificant la funció marcadors_on, podem generar les llistes de les platges en format HTML que podem associar a cada <div> de les platges:

Farem doncs una còpia de ”ex6.php” a “ex7.php” i modificarem la funció marcadors_on de tal manera que quedi així:

function marcadors_on(){

<?php$i=0;//Iniciem les taules amb els llistats de les platges$taula1="<table width=100%>";$taula2="<table width=100%>";$taula3="<table width=100%>";

//Recorrem la matriu de resultatswhile ($i < $num) {

//Assignem els valors de cada camp de cada registre a una variable$idPlatja = mysql_result($result,$i,"idPlatja");$nomPlatja = str_replace("'","\'",mysql_result($result,$i,"nomPlatja"));$tipusPlatja = mysql_result($result,$i,"tipusPlatja");$urlFitxaAmbiental = mysql_result($result,$i,"urlFitxaAmbiental");$urlFitxaResum = mysql_result($result,$i,"urlFitxaResum");$Lon = mysql_result($result,$i,"X");$Lat = mysql_result($result,$i,"Y");

//Construim el codi html a mostrar amb el nom de la platja, un link i la imatge$html="<b><font face=arial>".$nomPlatja."</b><hr><center><a href=\"".

$urlFitxaAmbiental."\" target=\"_new\">Fitxa ambiental</a></center><br><a href=\"".$urlFitxaResum."\" target=\"_new\" border=0><img src=\"".$urlFitxaResum."\" width=413 height=584 border=0></a>";

//Preparem una icona segons el tipus de platja i afegim l'element a la taula amb la llista platges

$icon ="''";if ($tipusPlatja=='A') {

$icon="'http://maps.google.com/mapfiles/kml/paddle/red-circle.png'";$taula1=$taula1."<tr><td width=100%

onclick=fn_centerPlatja('$Lon','$Lat')><font face='arial'><font size=2><a href=#>$nomPlatja</a></td></tr>";

}if ($tipusPlatja=='B') {

$icon="'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png'";$taula2=$taula2."<tr><td width=100%


}if ($tipusPlatja=='C') {

$icon="'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png'";$taula3=$taula3."<tr><td width=100%


}

//cridem la funció posaMarker amb les variables que hem createcho "posaMarker($Lon,$Lat,$icon,'$html');";$i++;


9

}//finalitzem les taules amb els llistats de les platges$taula1=$taula1."</table>";$taula2=$taula2."</table>";$taula3=$taula3."</table>";?>//Assignem el contingut de les taules als contenidorsdocument.getElementById("platges3").innerHTML="<?php echo $taula1;?

>";document.getElementById("platges2").innerHTML="<?php echo $taula2;?

>";document.getElementById("platges1").innerHTML="<?php echo $taula3;?

>";}

Quan recorrem la matriu de resultats, generem tres taules, segons la classificació de les platges, on hi afegim el nom de la platja i una crida a la funció centerPlatja() passant-li com a paràmetres les coordenades d'aquesta.

I afegim una funció anomenada “fn_centerPlatja” que rep les coordenades de la platja seleccionada i ens hi centra el mapa mitjançant la funció setCenter que ja hem fet servir abans.

function fn_centerPlatja(Lon,Lat){

map.setCenter(new OpenLayers.LonLat(Lon,Lat), 8);}

I finalment:


TALLER 2: Crear un visualitzador web amb...

Documents

Transcript of TALLER 2: Crear un visualitzador web amb...