2

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>
1

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.

  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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