Tabs & OpenLayers

by Mike Gifford

HTML

<script src="http://wet-boew.github.io/wet-boew/dist/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://wet-boew.github.io/wet-boew/dist/grids/css/util-min.css">
<link rel="stylesheet" href="http://wet-boew.github.io/wet-boew/dist/js/css/pe-ap-min.css">
<link rel="stylesheet" href="http://wet-boew.github.io/wet-boew/dist/theme-wet-boew/css/theme-min.css">
<link rel="stylesheet" href="http://wet-boew.github.io/wet-boew/dist/theme-wet-boew/css/theme-ns-min.css">
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<body onload="init()">
    <div id="wb-body">
        <div id="wb-skip">
            <ul id="wb-tphp">
                <li id="wb-skip1"><a href="#wb-cont">Skip to main content</a>

                </li>
                <li id="wb-skip2"><a href="#wb-nav">Skip to footer</a>

                </li>
            </ul>
        </div>
        <div id="wb-head">
            <div id="wb-head-in">
                <header>
                    <!-- HeaderStart -->
                    <section>
                        <div id="wet-fullhd">
                             <h2>Header bar</h2>

                            <div id="wet-fullhd-in">
                                <ul>
                                    <li id="wet-fullhd-lang-2"><a href="tabs-fr.html" lang="fr">Français</a>

                                    </li>
                                    <li id="wet-fullhd-lang-current">English</li>
                                </ul>
                            </div>
                        </div>
                    </section>
                    <div id="wet-bnr" role="banner">
                        <div id="wet-bnr-in">
                            <div id="wet-title">
                                <p id="wet-title-in"><a href="../../index-en.html" lang="en"><object...

JavaScript

var box_extents = [
            [-10, 50, 5, 60],
            [-75, 41, -71, 44],
            [-122.6, 37.6, -122.3, 37.9],
            [10, 10, 20, 20]
        ];
        var map;

        function init() {
            map = new OpenLayers.Map('map');

            var ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {
                layers: 'basic'
            });

            var boxes = new OpenLayers.Layer.Vector("Boxes");

            for (var i = 0; i < box_extents.length; i++) {
                ext = box_extents[i];
                bounds = OpenLayers.Bounds.fromArray(ext);

                box = new OpenLayers.Feature.Vector(bounds.toGeometry());
                boxes.addFeatures(box);
            }

            map.addLayers([ol_wms, boxes]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            var sf = new OpenLayers.Control.SelectFeature(boxes);
            map.addControl(sf);
            sf.activate();
            map.zoomToMaxExtent();
        }