[GIS] Unable to create PopUp in OpenLayers

openlayers-2popup

I am unable to create Popup in OpenLayers. 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>

Best Answer

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.

Related Question