Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am unable to create Popup in Openlayer. I have followed the examples and my code is also correct but I am not sure where am I going wrong. Here is the link. Here is my entire code,

<!DOCTYPE html>
<html>
    <head>
        <title>iPlant Map</title>
        <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
        <style>
            #map-id {
                width: 1024px;
                height: 512px;
            }

        </style>
        <<script src="openlayers/lib/OpenLayers.js"></script>
        <!--<script src="http://openlayers.org/api/2.12-rc6/OpenLayers.js"></script>-->
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.6"></script>
    </head>
    <body>
        <h1>iPlant Map</h1>
        <div id="map-id"></div>
        <script>
            OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

            var map = new OpenLayers.Map("map-id");

            var bio = new OpenLayers.Layer.WMS("bio11", "http://niles.iplantcollaborative.org:8080/geoserver/wms", {
                layers : 'bio11'
            });

            /*var QuebecSpecies = new OpenLayers.Layer.WMS("All Quebec Species", "http://niles.iplantcollaborative.org:8080/geoserver/wms", {
                layers : 'AllQuebecSpecies',
                transparent : true
            }, {
                'isBaseLayer' : false
            });*/

            var pima = new OpenLayers.Layer.WMS("Pima Pines", "http://niles.iplantcollaborative.org:8080/geoserver/wms", {
                layers : 'PimaPine',
                transparent : true
            }, {
                'isBaseLayer' : false
            });

            var carib = new OpenLayers.Layer.WMS("Carribbean Pine", "http://niles.iplantcollaborative.org:8080/geoserver/wms", {
                layers : 'CaribPine',
                transparent : true
            }, {
                'isBaseLayer' : false
            });

            var vector_layer = new OpenLayers.Layer.Vector('Editable Vectors');

            var QuebecSpecies = new OpenLayers.Layer.Vector("AllQuebecSpecies", {
            strategies : [new OpenLayers.Strategy.Fixed()],
            projection : new OpenLayers.Projection("EPSG:4326"),
            visibility : true,
            protocol : new OpenLayers.Protocol.WFS({
            version : "1.1.0",
            url : "http://niles.iplantcollaborative.org:8080/geoserver/iPlant/wfs",
            featurePrefix : 'iPlant', //geoserver worspace name
            featureType : "AllQuebecSpecies", //geoserver Layer Name
            featureNS : "http://geoserver-iPlant", // Edit Workspace Namespace URI
            geometryName : "the_geom" // field in Feature Type details with type "Geometry"
            })
            });

            map.addLayers([bio, QuebecSpecies, pima, carib, vector_layer]);
            //console.log(QuebecSpecies);

            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition({
                element : $('location')
            }));
            map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));
            map.events.register("mousemove", map, function(e) {
                //var position = this.events.getMousePosition(e);
                //var position = OpenLayers.Control.MousePosition(e);
                var latlon = map.getLonLatFromViewPortPx(e.xy);
                var lat = Math.round(latlon.lat);
                var lon = Math.round(latlon.lon);
                OpenLayers.Util.getElement("location").innerHTML = "The Latitude is " + lat + " and the Longitude is " + lon;
            });

            info = new OpenLayers.Control.WMSGetFeatureInfo({
            url : 'http://niles.iplantcollaborative.org:8080/geoserver/iPlant/wms',
            title : 'Identify features by clicking',
            queryVisible : true,
            eventListeners : {
            getfeatureinfo : function(event) {
            /*map.addPopup(new OpenLayers.Popup.FramedCloud("chicken", map.getLonLatFromPixel(event.xy), null, event.text, null, true));*/
            map.addPopup(new OpenLayers.Popup("chicken", map.getLonLatFromPixel(event.xy), new OpenLayers.Size(200,200), event.text, true));
            }
            }
            });
            map.addControl(info);
            info.activate();

            //map.setCenter(center, 9);
            map.zoomToMaxExtent();
        </script>


        <div id="location">
            Position
        </div>
    </body>
</html>
share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

You have made error in URL option of WMSGetFeatureInfo control. Change this option to "http://niles.iplantcollaborative.org:8080/geoserver/wms" and your example will work. Also you can add option:

layerUrls: ['http://niles.iplantcollaborative.org:8080/geoserver/wms']

In this case you don't have to modify url option.

share|improve this answer
    
Thanks, finally seeing the PopUp. I did not get what you meant by layerUrls? where should I add them? –  Sam007 Jun 5 '12 at 17:36
    
layerUrls is option of WMSGetFeatureInfo –  drnextgis Jun 8 '12 at 3:01
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.