NRCan - GeoGratis Search Client

by Mike Gifford

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://openconcept.ca/sites/openconcept.ca/files/openlayers/lib/OpenLayers.js"></script>
<script src="nrcan.ox.ca/sites/nrcan.ox.ca/themes/genesis_clf/js/wet.js"></script>
<h1 id="cn-cont">GeoGratis Search Client</h1>
        <section>
        <form id="search" method="post" action="#">
            <fieldset style="border: 0;">
                <input type="hidden" name="minx" value="-141.0" />
                <input type="hidden" name="miny" value="41.5" />
                <input type="hidden" name="maxx" value="-43.0" />
                <input type="hidden" name="maxy" value="84.0" />
                <input type="hidden" name="page" value="1" />
                <input type="hidden" name="count" value="20" />
                <input id="q" type="text" size="50" name="q" />
                <input type="submit" value="Search" />
                <input type="submit" value="Clear" onclick="document.forms[1].q.value=''" />
                <span style="margin-left:20px;color:#999">
                    <input type="radio" class="lang" name="lang" id="langen" value="en" checked="checked"/><label for="langen">English</label>
                    <input type="radio" class="lang" name="lang" id="langfr" value="fr" /><label for="langfr">Français</label>
                </span>
            </fieldset>
        </form>
        <form id="search" method="get" action="" onsubmit="return false;">
           <fieldset style="border: 0;">
               <input id="locate" type="text" size="50" name="locate" />
           </fieldset>
        </form>

        <div id="geomap" style="width: 100%; height: 500px;clear: both;"> </div>
        <div id="maptools" style="width: 100%;">
            <div id="mapscale"...

JavaScript

jQuery(document).ready(function($) {

    var map;

    function getCoords() {
        //Grab the coordinates and put them in the form fields
        var mapProj = this.getProjectionObject();
        var extent = this.getExtent();
        var latlonProj = new OpenLayers.Projection("EPSG:4269");

        // Map coords to Lat/Long
        var north = new OpenLayers.Geometry.Point(average(extent.left, extent.right), extent.top);
        var south = new OpenLayers.Geometry.Point(average(extent.left, extent.right), extent.bottom);
        var east = new OpenLayers.Geometry.Point(extent.right, average(extent.top, extent.bottom));
        var west = new OpenLayers.Geometry.Point(extent.left, average(extent.top, extent.bottom));

        OpenLayers.Projection.transform(north, mapProj, latlonProj);
        OpenLayers.Projection.transform(south, mapProj, latlonProj);
        OpenLayers.Projection.transform(east, mapProj, latlonProj);
        OpenLayers.Projection.transform(west, mapProj, latlonProj);

        var form = document.forms[1];
        form.minx.value = west.x;
        form.miny.value = south.y;
        form.maxx.value = east.x;
        form.maxy.value = north.y;

        searchData();
    }

    var params = {
        geomap: {
            id: 'geomap',
            theme: 'default'
        },
        autocomplete: ""
    };

    // Beginning of geomap/osg.cfg
    var options = {
        controls: [],
        maxExtent: new OpenLayers.Bounds(-2865000.0, -986500.0, 3513000.0, 4005000.0),
        maxResolution: 'auto',
        projection: "EPSG:42304",
        restrictedExtent: new OpenLayers.Bounds(-2865000.0, -986500.0, 3513000.0, 4005000.0),
        units: 'm',
        displayProjection: new OpenLayers.Projection("EPSG:4269"),
        numZoomLevels: 9
    };
    map = new OpenLayers.Map("geomap", options);
    map.events.register("moveend", map, getCoords);

    vectorLayer = new OpenLayers.Layer.Vector("Extents_Overlay");

    map.addLayer(new...