jQuery + OpenLayers

by erichbschulz

HTML

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<body>
    <div id="agc">
        <div id="top">the top</div>
    <div id="container">
        <div class="left">
            <div id="mapa"></div>
            
        </div>
        <div class="right">
            <ul>
                <li>The columns are in the right order semantically</li>
                <li>You don't have to float both columns</li>
                <li>You don't get any odd wrapping behaviour</li>
                <li>The columns are fluid to the available page...</li>
   
            </ul>
        </div>
    </div>
    <div id="bottom">the end</div>
        </div>
</body>

CSS

.left {
    background-color: grey;
    float: left;
    width: 80%;
}
#mapa {
    height: 80px;
    min-height: 80px;
}
.right {
    background-color: Aqua;
    margin-left: 80%;
}
#bottom, #top {
    background-color: green;
}

JavaScript

// Creación del mapa y encuadre inicial
var WGS84 = new OpenLayers.Projection('EPSG:4326');
var MERCATOR = new OpenLayers.Projection('EPSG:900913');
var peninsula = new OpenLayers.Bounds(-18.0, 26.0, 6.0, 44.0).transform(WGS84, MERCATOR);
var mapa = new OpenLayers.Map("mapa");
mapa.addLayer(new OpenLayers.Layer.OSM());
mapa.zoomToExtent(peninsula);


// Creación del control de selección
var controlSeleccion = new OpenLayers.Control.SelectFeature(ciudades);
mapa.addControl(controlSeleccion);
controlSeleccion.activate();