Geo-Información, WebSIG Libres y más...: Widget GeoReferencing (with GeoExt)

En el caso de boletas de recolección de datos, muchas veces no se toma en cuenta la variable geográfica, las razones son multiples pero a veces simplemente no se sabe como almacenar, o manipular las geometrias y mapas en paginas web. En el marco de los proyectos que he trabajado, esa necesidad de geoinformación fue recurente asi que ultimamente, cansado de repetir y repetir el mismo proceso, traté de agilizar un poco ese proceso a través el uso de un widget. Ese permite la integración de un mapa para georeferenciación de elementos en las boletas.

El propósito general del modulo es llenar ese vacio de información geográfica que existe en las instituciones. Casi cualquier dato es mapeable, asi que el campo de aplicación es muy amplio...

A continuacion les comparto el codigo del widget:

FrameWork:

El modulo esta basado en la libreria GeoExt y se presenta como un xType adicional. Esta escrito en JavaScript asi que normalmente se acopla a cualquier pagina web. Sin embargo, necesita la carga de los frameworks JS de ExtJs 3.x, GeoExt 1.x y OpenLayers.

Licencia:

Lo registre bajo licencia Creative Commons BY-NC-SA 3.0:

You are free:

to Share — to copy, distribute and transmit the work
to Remix — to adapt the work

Under the following conditions:

Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
Noncommercial — You may not use this work for commercial purposes.
Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.

Full License at http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode

DOWNLOAD WIDGET

Uso:

El uso del widget es bastante simple, lo pueden llamar como cualquier xtype de Ext o GeoExt y llenar propriedades y configuracion:

/**
    **    Jaw tu iuse el widget **
    **
   *   WE ASSUME THAT WE USE THE BASE MAP IN EPSG:900913 PROJECTION
   */
          { xtype: 'editMapa',
           title: 'Titulo',              // Title on top of MapPanel
           layers: [array,of,layers], // Waiting for an array of layer previously declared on the code REQUIRED!!
geoType: 'Point',     // Waiting for geometry type REQUIRED!!      Point Line o Polygon
      formaType: 'wkt',   // Waiting for geometry format REQUIRED!!    wkt geojson georss kml
           outputProjection: 'EPSG:4326', // Waiting for output projection REQUIRED!!   4326 o 900913
           inputProjection: 'EPSG:4326', // Waiting for intput projection in case of an update 4326 o 900913 (default)
           geomReceived: 'POINT(-90.5 14)', // Waiting for a geometry in case of an update of geom
                                    // The geom must be received in the same format that declared formaType
            height: 495,      //height of mapPanel
            width: 715        //width of mapPanel
           }
/**
   *
   ***/
/**Recupero el valor de la geometria**/
var the_geom = Ext.getCmp('outputgeom').getValue();

Vista del Widget

Ejemplo Completo:
Librerias requeridas:


<style>
.x-toolbar .editing{background:url('images/map/pencil.gif') top left no-repeat}
.x-toolbar .cancel{background:url('images/map/cross.gif') top left no-repeat}
</style>

    <script type="text/javascript" src="/base/js/ext/Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/base/js/ext/Ext/ext-all.js"></script>
    <script type="text/javascript" src="/base/js/OpenLayers/OpenLayers.js"></script>
    <script type="text/javascript" src="/base/js/GeoExt11/script/GeoExt.js"></script>

    <script type="text/javascript" src="widget_GeoReferencing.js"></script>

Script:

<script>
Ext.onReady(function() {
var osm = new OpenLayers.Layer.OSM("OpenStreetMap");
var editPanel = {
            xtype: 'editMapa',
            title: 'Widget georeferenciacion',
            layers: [osm],
            geoType: 'Point',
            inputProjection: 'EPSG:4326',
            geomReceived: 'POINT(-90.5 14)',
             outputProjection: 'EPSG:4326',
            formaType: 'wkt',
            height: 495,
            width: 715
            };
var mainPanel = new Ext.Panel({
        renderTo: "map",
        name: "mainPanel",
        layout:'border',
        hiddenName: "mainPanel",
        height: 500,
        width: 720,
        items: [editPanel]
    });
});
    /**recupero el valor de la geometria y lo pongo en una variable the_geom para el insert o update**/
var the_geom = Ext.getCmp('outputgeom').getValue();
</script>

<body>
    
    <div id ="map"></div>
</body>

Espero les sea util. Si encuentran bugs, errores o mejoras o simplemente si tienen comentarios bienvenidos!
Gracias al programa "ONU-Habitat - Ventana de paz" quienes financiaron, entre otras cosas, el desarrollo de ese modulo.