danielquisbert@blog:~$: OpenLayers

Creando tu propio visualizador desde 0 en Linux

Preparamos el proxy.cgi

Para comenzar a jugar con OpenLayers debemos preparar nuestra PC, como ya saben utilizaremos una distro linux (Ubuntu o Debian), un editor de texto ej.: gedit, o en el mejor caso Aptana Studio [http://www.aptana.com/] ;)
Ahora bien crearemos nuestro archivo 'proxy.cgi':

luego copiamos y pegamos el siguiente código:

#!/usr/bin/env python
"""This is a blind proxy that we use to get around browser
restrictions that prevent the Javascript from loading pages not on the
same server as the Javascript.  This has several problems: it's less
efficient, it might break some sites, and it's a security risk because
people can use this proxy to browse the web and possibly do bad stuff
with it.  It only loads pages via http and https, but it can load any
content type. It supports GET and POST requests."""

import urllib2
import cgi
import sys, os

# Designed to prevent Open Proxy type stuff.

allowedHosts = ['www.openlayers.org', 'openlayers.org',
                'labs.metacarta.com', 'world.freemap.in',
                'prototype.openmnnd.org', 'geo.openplans.org',
                'sigma.openplans.org', 'demo.opengeo.org',
                'www.openstreetmap.org', 'sample.azavea.com',
                'v2.suite.opengeo.org', 'v-swe.uni-muenster.de:8080',
                'vmap0.tiles.osgeo.org', 'www.openrouteservice.org']

method = os.environ["REQUEST_METHOD"]

if method == "POST":
    qs = os.environ["QUERY_STRING"]
    d = cgi.parse_qs(qs)
    if d.has_key("url"):
        url = d["url"][0]
    else:
        url = "http://www.openlayers.org"
else:
    fs = cgi.FieldStorage()
    url = fs.getvalue('url', "http://www.openlayers.org")

try:
    host = url.split("/")[2]
    if allowedHosts and not host in allowedHosts:
        print "Status: 502 Bad Gateway"
        print "Content-Type: text/plain"
        print
        print "This proxy does not allow you to access that location (%s)." % (host,)
        print
        print os.environ

elif url.startswith("http://") or url.startswith("https://"):

if method == "POST":
            length = int(os.environ["CONTENT_LENGTH"])
            headers = {"Content-Type": os.environ["CONTENT_TYPE"]}
            body = sys.stdin.read(length)
            r = urllib2.Request(url, body, headers)
            y = urllib2.urlopen(r)
        else:
            y = urllib2.urlopen(url)

# print content type header
        i = y.info()
        if i.has_key("Content-Type"):
            print "Content-Type: %s" % (i["Content-Type"])
        else:
            print "Content-Type: text/plain"
        print

print y.read()

y.close()
    else:
        print "Content-Type: text/plain"
        print
        print "Illegal request."

except Exception, E:
    print "Status: 500 Unexpected Error"
    print "Content-Type: text/plain"
    print
    print "Some unexpected error occurred. Error text was:", E

depués guardamos y cerramos [Ctrl + O ; Ctrl + X], y le cambiamos los permisos:

y listo! con eso acabamos con el proxy para poder utilizar los servicios wms de sitios web.

[Tomar en cuenta]: esta configuración del proxy es necesario para poder utilizar servicios WMS, en tal caso no es necesario si solo queremos un fondo de mapa nada mas, por lo tanto tampoco seria necesario trabajar en Linux.

Creamos el archivo mivisualizador.html que es la estructura básica de HTML.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Visualizador con OpenLayers</title>
     <title>Visualizador con OpenLayers</title>
    
    <style>
     html {
   height: 100%;
   overflow: hidden;
  }
  body {
   height: 100%;
   overflow: hidden;
   margin: 0;
   padding: 0;
   font-family: tahoma, arial, helvetica, sans-serif;
   font-size: 14px;
   color: #333;
  }
  
  #map {
   height: 100%;
  }
    </style>
  </head>
  <body>
    
 <div id="map">
</div>

  <script src="http://openlayers.org/api/OpenLayers.js"></script>

<script src="misfunciones.js"></script>
  </body>
</html>

Creamos el archivo: misfunciones.js:

/**
 * funciones que se utilizaran en 'mivisualizador.html'
 * en el cual se visualizarán mapas de OSM
 *
 */
"use strict";

// Variables globales uno del mapa y
// el  otro de la funcion principal init
var map, init;
/**
 * /Utilizare los puntos de referencia (boundingbox)
 * de mi país BOpenLayersIVIA ;)
 */
var bounds = new OpenLayers.Bounds(-8830162.81905630045, -2659717.96953959996, -5571796.30232330039, -1097314.84473340004);
/**
 * Variable de configuración que contendra los
 * parámetros básicos necesarios para nuestro visualizador
 */
var config = {
 projection : new OpenLayers.Projection("EPSG:900913"),
 displayProjection : new OpenLayers.Projection("EPSG:4326")
};
/**
 * funcion creadora de nuestro visualizador
 */
function crearMapa() {
 map = new OpenLayers.Map(
  "map", // nombbre del mapa 
  {
   div : 'map', // selecciona el contenedor donde se vera el mapa
   numZoomLevels : 18, // número máximo de acercamiento del mapa
   projection : config.projection, // proyección google
   displayProjection : config.displayProjection // proyección standard
  });
 /**
  * adición de los mapas como layers (capas)
  * el mapa
  */
 map.addLayers([
  new OpenLayers.Layer.OSM("Mapnik"),
  new OpenLayers.Layer.OSM(
   "Midnight Commander",
    ["http://a.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/${z}/${x}/${y}.png", 
     "http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/${z}/${x}/${y}.png", 
     "http://c.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/${z}/${x}/${y}.png"], 
    { "tileOptions" : { "crossOriginKeyword" : null }
     }
  )
 ]); 
 /**
  * añadimos un control para seleccionar los mapas (layers
  *  y luego centramos el mapa con un acercamiento de 6)
  */
 map.addControl(new OpenLayers.Control.LayerSwitcher({'baseLblTitle':"Nuestros Mapas",'dataLblTitle':"Datos"}));
 map.setCenter(bounds.getCenterLonLat(), 6);
}

/**
 * funcion principal asignada en la variable init
 */
init = function() {
 /**
  * Para los que se preguntaban : 
  * para qué configuramos el proxy??, aqui lo utilizamos
  */
 OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
 /**
  * llamamos a la funcion que creara el mapa
   */
 crearMapa(); 
 
};
// lasignamos a init a la propiedad onload
// de nuestro visualizador
window.onload = init;

Y a tenemos nuestro primer visualizador sencillo con OpenLayers,

bueno espero le sirva a alguien; más adelante hare otros visualiadores con el fondo de googleMaps y también añadiremos más funcionalidades a estos :D

El resultado deberá ser este:

No duden en escribir cualquier pregunta...

danielquisbert@blog:~$

Páginas

OpenLayers

Creando tu propio visualizador desde 0 en Linux

Juega al Ahorcado

.