openlayers GetFeatureInfo request example + virtual earth/google

Question

Simply I copied the example code from http://openlayers.org/dev/examples/getfeatureinfo-control.html.

I used geoserver to run it and everything is working properly like the internet version, now I tried to change the political baselayer with a virtual earth map.

Due to the nature of virtual earth and google map, I've set spherical mercator to true but after that the highlight feature doesn't work anymore.

I think I spotted where is the the problem, there are differents projection between the vector I'm creating and the rest of the layers and openlayers doesn't know how to merge them. Is there a way to transform my vector layer from (I think) epsg:4326 to epsg:900913 (sherical mercator)?

Below my code:

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<style>
    .opmap
    {
        height:500px;
        width:550px;
    }
    /* The map and the location bar */
    #map {
        clear: both;
        position: relative;
        width: 400px;
        height: 450px;
        border: 1px solid black;
    }
    .mypopuphtml{
         padding-left:5px;
         padding-top:0px;
         padding-bottom:0px;
         padding-right:5px;
         font-family:Arial;
         font-size:8pt;
         background-color:white;
    }

</style>

<script defer="defer" type="text/javascript">

var map, infocontrols, water, highlightlayer;

function load() {

    var options = {
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),    
            //maxExtent: new OpenLayers.Bounds(11.1373,46.6196,11.2117,46.6919),
            numZoomLevels: 19,
            units: 'degrees',
            projection: new OpenLayers.Projection("EPSG:4326"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
            };
            map = new OpenLayers.Map('map', options);

    /*
    var political = new OpenLayers.Layer.WMS("State Boundaries",
        "http://localhost:8080/geoserver/wms", 
        {'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
        {isBaseLayer: true}
    );
    */


    // setup tiled layer
    var blConfig  = {'sphericalMercator': true};
    var ve = new OpenLayers.Layer.VirtualEarth( "Bing", blConfig);


    var roads = new OpenLayers.Layer.WMS("Roads",
        "http://localhost:8080/geoserver/wms", 
        {'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
        {isBaseLayer: false}
    );

    var cities = new OpenLayers.Layer.WMS("Cities",
        "http://localhost:8080/geoserver/wms", 
        {'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
        {isBaseLayer: false}
    );

    water = new OpenLayers.Layer.WMS("Bodies of Water",
        "http://localhost:8080/geoserver/wms", 
        {'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
        {isBaseLayer: false}
    );

    highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {

        isBaseLayer: false,
        projection: new OpenLayers.Projection("EPSG:900913")
        }
    );

    infoControls = {
        click: new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://localhost:8080/geoserver/wms', 
            title: 'Identify features by clicking',
            layers: [water],
            queryVisible: true
        }),
        hover: new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://localhost:8080/geoserver/wms', 
            title: 'Identify features by clicking',
            layers: [water],
            hover: true,
            // defining a custom format options here
            formatOptions: {
                typeName: 'water_bodies', 
                featureNS: 'http://www.openplans.org/topp'
            },
            queryVisible: true
        })
    }

    //map.addLayers([political, roads, cities, water, highlightLayer]); 
    map.addLayers([ve, roads, cities, water, highlightLayer]); 

    for (var i in infoControls) { 
        infoControls[i].events.register("getfeatureinfo", this, showInfo);
        map.addControl(infoControls[i]); 
    }

    map.addControl(new OpenLayers.Control.LayerSwitcher());

    infoControls.click.activate();
    map.zoomToMaxExtent();
}

function showInfo(evt) {
    if (evt.features && evt.features.length) {
         highlightLayer.destroyFeatures();
         highlightLayer.addFeatures(evt.features);
         highlightLayer.redraw();
    } else {
        $('responseText').innerHTML = evt.text;
    }
}

function toggleControl(element) {
    for (var key in infoControls) {
        var control = infoControls[key];
        if (element.value == key && element.checked) {
            control.activate();
        } else {
            control.deactivate();
        }
    }
}

function toggleFormat(element) {
    for (var key in infoControls) {
        var control = infoControls[key];
        control.infoFormat = element.value;
    }
}

function toggleLayers(element) {
    for (var key in infoControls) {
        var control = infoControls[key];
        if (element.value == 'Specified') {
            control.layers = [water];
        } else {
            control.layers = null;
        }
    }
}

// function toggle(key
</script>

Why do you have your vector layer in EPSG:900913 when you don't use Google Maps data? — Niklas Wulff

Yoichi Yoichi · Accepted Answer · 2011-07-31T04:02:36

I am not sure what problem you are having.

<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>

also

function load() {
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            units: "m",
            numZoomLevels: 22,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                             20037508, 20037508.34)
        };

Then,

    var veroad = new OpenLayers.Layer.VirtualEarth(
            "Bing",
            {isBaseLayer: true, 'sphericalMercator': true}
        );

Those WMS data do not seem to be correct, except for the water, which maps OK with Virtual Earth map.

My problem is that the Proxy reports errors if I request FeatureInfo from a server different from the one which served the page.

openlayers GetFeatureInfo request example + virtual earth/google

1 Answers