Chameleon

Universidad del Cauca
Maestría en Ingeniería, Área Telemática

Facultad de Ingeniería Electrónica y Telecomunicaciones
Sistemas de Información Geográfica

2006
Introducción a Chameleon
Profesor: José Armando Ordóñez Córdoba
Introducción
Es un framework de software libre para el desarrollo de aplicaciones de Web Mapping.

Que trabaja sobre MapServer.
Prerrequisitos
Se requiere la instalación de Mapserver for Windows ms4w versión 4.6.
Se puede descargar chameleon desde:

http://chameleon.maptools.org/index.phtml?page=home.html
Conceptos
• Servicio de Mapping Web (WMS)
WMS es un estándar de la OGC que define un servicio que provee acceso a las
información geográfica sobre la Internet utilizando protocolos estándares.
• Script de inicialización
Archivo que crea una instancia de Chameleon, inicializa una plantilla y un

mapfile, lanzando así una aplicación Chameleon.
• Plantilla
Es un archivo HTML que incluye etiquetas CWC2. esta etiqueta es pasada a

Chameleon para crear la aplicación.
• Mapfile
Archivo básico que almacena información de configuración.

• Contexto
Descripción XML de los datos geográficos. Una instancia del servicio de

Chameleon usa el contexto para determinar que imágenes solicitar desde que
servidores WMS para generar un mapa.
• Widget
Elemento básico de una aplicación Chameleon. Los Widgets son representados

por etiquetas XML en una plantilla de Chameleon. Cada Widget representa una
pieza específica de funcionalidad SIG para las aplicaciones Web.
• Instancia del servicio de Chameleon
Servicio accesible por Internet que puede interpretar una plantilla de aplicación
Chameleon y un contexto para crear una aplicación de mapeo Web interactiva.
Arquitectura
Instalación
Descomprimimos el archivo descargado chameleon_ms4w-2.4-20060427. Dentro de la

carpeta ms4w encontramos:
Copiamos lo que esta en Apache dentro del apache de nuestra instalación de ms4w
generalmente es c:\ms4w\Apache, lo mismo con apps y lo mismo con httpd.d
Reiniciamos ms4w con el archivo apache-restart.bat que esta en C:\ms4w, abrimos la

pagina inicial de nuestro servidor : http://localhost/ y buscamos en la parte inferior:
“Applications”
Creando la primera aplicación
En creamos una carpeta tutorial dentro de chameleon:

1. Creamos la siguiente estructura de directorios de aplicación:
2. -- tutorial
3. -- data
4. -- etc
5. -- htdocs
6. -- images
7. -- map
• data – datos locales de la aplicación.

• etc – símbolos, fuentes y otra información.
• htdocs – documentos accesibles vía Web como imagenes, platilla, archivo de
inicialización, etc.
• map - mapfile(s).
Copiamos los directorios data, etc, y map del directorio de samples de Chameleon
(chameleon/samples/data, chameleon/samples/etc, chameleon/samples/map).
-- ms4w
-- apps
-- myApp
-- data
-- etc
-- htdocs
-- images
-- map
8. Copiamos el archive de incialización

chameleon/samples/htdocs/sample_basic.phtml a htdocs (i.e.,
myApp/htdocs/). Renombrelo a index.phtml.
<?php
/*
* this is a sample of a minimal application script required to
* get a chameleon application running with a template and a
* local map file. Most applications should actually just
* copy this file and modify the template and mapfile
* parts and should not need to do a lot more here.
*/
include( "../../htdocs/chameleon.php" );
$szTemplate = "./sample_basic.html";
$szMapFile = "../map/chameleon.map";
class SampleApp extends Chameleon

{
function SampleApp()
{
parent::Chameleon();
$this->moMapSession = new MapSession_RW;
$this->moMapSession->setTempDir( getSessionSavePath());
}
}
$oApp = new SampleApp();

$oApp->registerSkin( 'skins/sample' );
$oApp->CWCInitialize( $szTemplate, $szMapFile );
$oApp->CWCExecute();
?>
9. cree una plantilla llamada template1.html, abra este archivo en un editor de

texto (e.g., NotePad, WordPad, TextPad, etc.) y copie el siguiente contenido:
<html>
<head>
<title>Widgets</title>
<link href="cwc2.css" rel="stylesheet" type="text/css">
</head>
<body onload="CWC2OnLoadFunction()">
<form>
<table border="0" cellspacing="2" cellpadding="0">

<tr>
<td colspan="3" align="center">
<CWC2 TYPE="MapDHTML"
VISIBLE="true"
WIDTH="400"
HEIGHT="300"
ALLOWRESIZE="true"
MARQUEECOLOR="#FF3333"
MARQUEEWIDTH="2"
MINSCALE="1"/>
</td>
</tr>
</table>
<CWC2 TYPE="ErrorReport"
POPUPWIDTH="500"
POPUPHEIGHT="400"
TOOLBAR="false"
STATUS="false"
MENUBAR="false"
VISIBLE="false"
IMAGE="images/icon_error.png"
IMAGEWIDTH="18"
IMAGEHEIGHT="18"
IMAGETIP="Display Error Report"
LABEL="Error Report"/>
</form>
</body>
</html>
10. Abra el archivo index.phtml y hag alas siguientes modificaciones:

include( "/absolute/or/relative/path/to/htdocs/chameleon.php" );
$szTemplate = "./template.html";
Para el ejemplo sería:

<?php
/*
*/
$szTemplate = "template1.html";

{
{
}
}

?>
11. Configure el servidor Web, para lo cual se crea un alias en Apache y se guarda
como httpd_<app_name>.conf en /ms4w/httpd.d/ donde <app_name> el
nombre de la aplicación. En el archivo httpd_chameleon.conf en
C:\ms4w\httpd.d se agrega una entrada con el siguiente código:
Alias /chameleon/tutorial
"/ms4w/apps/chameleon/tutorial/htdocs"
<Directory "/ms4w/apps/chameleon/tutorial/htdocs">
AllowOverride None
Options Indexes FollowSymLinks Multiviews
Order allow,deny
Allow from all
</Directory>
Debe reiniciarse el servidor

En htdocs de ms4w modificar el archivo de chameleon chameleon.pkg.html (ver figura
siguiente) para que en la pagina principal aparezca listada nuestra práctica.
<h3>Chameleon 2.4 URLs:</h3>

<blockquote>
<p><a href="/chameleon/admin/">Chameleon Administration.</a></p>
<p><a href="/chameleon/docs/">Chameleon Documentation.</a></p>
<p><a href="/chameleon/help/">Chameleon HelpViewer.</a></p>
<p><a href="/chameleon/samples/">Chameleon Sample
Applications.</a></p>
<p><a href="/chameleon/cwc2">CWC2 Service Instance.</a></p>
<p><a href="/chameleon/tutorial">tutorial.</a></p>
</blockquote>
12. desde el browser ingresar a :
http://localhost/chameleon/tutorial/index.phtml
Creando nuestra aplicación
Ahora agregaremos un Nuevo widget, creamos primero un archivo llamado

template2.html (ver figura siguiente).
<html>
<head>
<title>Widgets</title>
<link href="cwc2.css" rel="stylesheet" type="text/css">
</head>
<body onload="CWC2OnLoadFunction()">
<form>
<table border="0" cellspacing="2" cellpadding="0">

<tr>
<td colspan="3" align="center">

<CWC2 TYPE="MapDHTML"
VISIBLE="true"
WIDTH="400"
HEIGHT="300"
ALLOWRESIZE="true"
MARQUEECOLOR="#FF3333"
MARQUEEWIDTH="2"
MINSCALE="1"/>
</td>
<td valign=top>
<CWC2 TYPE="ZoomIn"
VISIBLE="true"
IMAGETIP="Zoom Into Selected Point or Region"
TOOLSET="Navigation"
IMAGEWIDTH="24"
IMAGEHEIGHT="24">
<IMAGE STATE="normal"
IMAGE="buttons/button_zoomin_1.png"/>
<IMAGE STATE="hover"
<IMAGE STATE="selected" I
</CWC2>
<br>
<td valign=top>
<CWC2 TYPE="ZoomOut"
VISIBLE="true"
IMAGETIP="Zoom Away From Selected Point"
TOOLSET="Navigation"
IMAGEWIDTH="24"
IMAGEHEIGHT="24">
<IMAGE STATE="normal"
IMAGE="buttons/button_zoomout_1.png"/>
<IMAGE STATE="hover"
<IMAGE STATE="selected" I
</CWC2>
</td>
</tr>
</table>
<CWC2 TYPE="ErrorReport"
POPUPWIDTH="500"
POPUPHEIGHT="400"
TOOLBAR="false"
STATUS="false"
MENUBAR="false"
VISIBLE="false"
IMAGE="images/icon_error.png"
IMAGEWIDTH="18" IMAGEHEIGHT="18"
IMAGETIP="Display Error Report"
LABEL="Error Report"/>
</form>
</body>
</html>
Ahora creamos el archivo php ejemplo2.phtml
<?php
/*
*/
$szTemplate = "template2.html";

{
{
}
}

?>
Accedemos con el Browser a la dirección:

http://localhost/chameleon/tutorial/ejemplo2.phtml

Chameleon

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chameleon

Uploaded by

Copyright:

Available Formats

Universidad del Cauca

Maestría en Ingeniería, Área Telemática

Sistemas de Información Geográfica

Es un framework de software libre para el desarrollo de aplicaciones de Web Mapping.

Se requiere la instalación de Mapserver for Windows ms4w versión 4.6.

Se puede descargar chameleon desde:

• Servicio de Mapping Web (WMS)

Archivo que crea una instancia de Chameleon, inicializa una plantilla y un

Es un archivo HTML que incluye etiquetas CWC2. esta etiqueta es pasada a

Archivo básico que almacena información de configuración.

Descripción XML de los datos geográficos. Una instancia del servicio de

Elemento básico de una aplicación Chameleon. Los Widgets son representados

• Instancia del servicio de Chameleon

Descomprimimos el archivo descargado chameleon_ms4w-2.4-20060427. Dentro de la

Reiniciamos ms4w con el archivo apache-restart.bat que esta en C:\ms4w, abrimos la

Creando la primera aplicación

En creamos una carpeta tutorial dentro de chameleon:

• data – datos locales de la aplicación.

8. Copiamos el archive de incialización

class SampleApp extends Chameleon

$oApp = new SampleApp();

9. cree una plantilla llamada template1.html, abra este archivo en un editor de

<table border="0" cellspacing="2" cellpadding="0">

10. Abra el archivo index.phtml y hag alas siguientes modificaciones:

Para el ejemplo sería:

class SampleApp extends Chameleon

$oApp = new SampleApp();

Debe reiniciarse el servidor

<h3>Chameleon 2.4 URLs:</h3>

Ahora agregaremos un Nuevo widget, creamos primero un archivo llamado

<table border="0" cellspacing="2" cellpadding="0">

<td colspan="3" align="center">

Ahora creamos el archivo php ejemplo2.phtml

class SampleApp extends Chameleon

$oApp = new SampleApp();

Accedemos con el Browser a la dirección:

You might also like