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'm new at openlayers and I am having some trouble when trying to display the feature info.

I have the map working, with the layers I want to add in, but it seems that when I try to ask for the info just like in the following example:

http://openlayers.org/dev/examples/getfeatureinfo-popup.html

It shows an error:

Uncaught TypeError: Cannot call method 'addControl' of undefined

As I said, my map is working perfectly and I am not able to figure out why it shows this error, can someone help me on this?!

Here goes the piece of code that is anoying me:

    var info = new OpenLayers.Control.WMSGetFeatureInfo({
        url: 'http://localhost/cgi-bin/mapserv.exe      map=/ms4w/apache/htdocs/lixo.map&layers=Edificos', 
        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.addControl(info);
    info.activate();

Thak you very much!

UPDATE_________________________________________________

        <?xml version="1.0" encoding="utf-8" ?>
        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <title>Faculdade de Ciências da Universidade de Lisboa</title>
            <link rel="stylesheet" href="utilitarios.css" type="text/css">

            </style>


            <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
            <script src="http://openlayers.org/api/OpenLayers.js"></script>
            <script defer="defer" type="text/javascript">

            OpenLayers.ProxyHost = "proxy.cgi?url=";

             var map, info;
             OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
             OpenLayers.Util.onImageLoadErrorColor = "transparent";


               function init(){

                  var navigation_control = new OpenLayers.Control.Navigation({});

        //DEFINIÇÃO DOS COMANDOS A UTILIZAR NO MAPA
                  var controls_array = [
                  navigation_control,
                  new OpenLayers.Control.PanZoomBar({}),
                  new OpenLayers.Control.LayerSwitcher({}),
                  new OpenLayers.Control.Permalink({}),
                  new OpenLayers.Control.MousePosition({}),
                  ];

        //CRIAÇÃO DA VARIÁVEL MAPA COM PROJECÇÃO E LIMITES ASSOCIADOS.
                  map = new OpenLayers.Map( 'mapa',{
                 controls: controls_array,
                  projection: new OpenLayers.Projection("EPSG:900913"),
                  displayProjection: new OpenLayers.Projection("EPSG:3763"),
                  numZoomLevels: 18,
                   maxResolution: 156543.0339,
                   maxExtent: new OpenLayers.Bounds(-1019723.067567,  4686569.677227,-1018877.96253, 4687126.173453),
                   // maxExtent: new OpenLayers.Bounds(-1021183.067567, 4686569.677227, -1017159.96253, 4687181.173453)
                   units: "m"
                 } );


        // DEFINIÇÃO DE LAYERS DE INFORMAÇÃO

                  var caminhos = new OpenLayers.Layer.WMS( 
                  'Caminhos',
                  "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/apache/htdocs/lixo.map&layers=Caminhos",
                  {layers: 'basic','transparent': true, 'isBaseLayer': false});
                  //{'opacity': 0.5, 'isBaseLayer': true, 'visibility': true}  );

                  var escadas = new OpenLayers.Layer.WMS(
                  "Escadas",
                  "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/apache/htdocs/lixo.map&layers=Escadas",
                   {'layers': 'basic','transparent': true }
                   );


        // LAYERS DE API's EXTERIORES

                  var aerial = new OpenLayers.Layer.Bing({
                   type: "Aerial",
                   key: "AkDvQXEdeliH2C-JNTFWx_lnoUyIlfbRhdZoucaBHWBvHGIxmF_etkgXGYr0CzXE",
                   sphericalMercator: true
                    });

                    // Bing's Road imagerySet
                    var road = new OpenLayers.Layer.Bing({
                     key: "AkDvQXEdeliH2C-JNTFWx_lnoUyIlfbRhdZoucaBHWBvHGIxmF_etkgXGYr0CzXE",
                     sphericalMercator: true,
                    type: "Road"});

                 // Bing's AerialWithLabels imagerySet
                    var hybrid = new OpenLayers.Layer.Bing({
                   key: "AkDvQXEdeliH2C-JNTFWx_lnoUyIlfbRhdZoucaBHWBvHGIxmF_etkgXGYr0CzXE",
                    type: "AerialWithLabels",
                    sphericalMercator: true,
                    name: "Bing Aerial With Labels"
                    });

                    var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap");


        //ADIÇÂO DE LAYERS E DETERMINAÇAO DE ORDEM DE APRESENTAÇÂO

                   map.addLayers([road, aerial, hybrid, osmLayer]);
                  //map.addLayers([hybrid, edificios]);

                  map.addLayer(caminhos);
                  map.setLayerIndex(caminhos, 1); //set the image overlay to the bottom

                  map.addLayer(escadas);
                  map.setLayerIndex(escadas, 2);


        // ADIÇÂO DE CONTROLOS AO MAPA
                  map.addControl(new OpenLayers.Control.LayerSwitcher({title: 'Switch/add/remove layers'}));
                  map.addControl(new OpenLayers.Control.ScaleLine({}));
                  //map.zoomToMaxExtent();



        // TENTATIVA - ATRIBUTOS
                  var info = new OpenLayers.Control.WMSGetFeatureInfo({
                    url: 'http://localhost/cgi-bin/mapserv.exe?', 
                    title: 'Identify features by clicking',
                    queryVisible: true,
                    eventListeners: {
                        getfeatureinfo: function(event) {
                            map.addPopup(new OpenLayers.Popup.FramedCloud(
                                "chicken", 
                                map.getLocalXY(event.xy),
                                null,
                                event.text,
                                null,
                                true
                            ));
                        }
                    }
                });
                map.addControl(info);
                info.activate();


                 var selectCtrl = new OpenLayers.Control.SelectFeature(edificios, {
                    clickout: true, 
                    onSelect: open_infowin, 
                    //onUnselect: close_infowin
                  });

                 function open_infowin(event) {

                  var mousePos = this.events.getMousePosition(event);

                   infowin = new OpenLayers.Popup.FramedCloud(
                             "popup",
                             map.getLonLatFromViewPortPx(mousePos),
                             new OpenLayers.Size(300,150),
                             "Updating<br/>information...",
                             null,
                             true,
                             null
                           );
                map.addPopup(infowin);
            }

            */

                    var infoControls = {
                    click: new OpenLayers.Control.WMSGetFeatureInfo({
                        url: 'http://demo.opengeo.org/geoserver/wms', 
                        title: 'Identify features by clicking',
                        layers: [salas],
                        queryVisible: true
                    })}

        // CENTRAGEM DO MAPA
                var point=(-1019294, 4686862);
                  map.setCenter(point, 17);

                  }

                var count=0;


            </script>
         </head>

Here's a fuller version of the script. it doesn't include all the layers or the body part, but it would be too long, and I beilieve that's not ther source of the problem. I'm using MAPSERVER, can it be a configuration issue?! if so I attached my mapfile:

        MAP
          NAME "QGIS-MAP"
          # Map image size
          SIZE 1000 800
          UNITS meters
          QUERYMAP
                 STATUS ON
          END

        EXTENT -89279.355471 -100905.485742 -88614.316404 -100538.256445
          FONTSET './fonts/fonts.txt'
          SYMBOLSET './symbols/symbols.txt'
         PROJECTION
                "init=epsg:3763"
            END #end projection

          # Background color for the map canvas -- change as desired
          IMAGECOLOR 255 255 255
          Transparent true
          IMAGEQUALITY 95
          IMAGETYPE png



          SCALEBAR
            IMAGECOLOR 255 255 255
            LABEL
              COLOR 0 0 0
              SIZE TINY
            END
            STYLE 1
            SIZE 100 2
            COLOR 0 0 0
            UNITS MILES
            INTERVALS 2
            TRANSPARENT FALSE
            STATUS ON
          END 

          # Legend
          LEGEND
              IMAGECOLOR 255 255 255
            STATUS ON
            KEYSIZE 18 12
            LABEL
              TYPE BITMAP
              SIZE MEDIUM
              COLOR 0 0 89
            END
          END

           WEB
            TEMPLATE temp.html
            IMAGEPATH '/ms4w/tmp/ms_tmp/'
            IMAGEURL '/ms_tmp/'
            METADATA
              'ows_title'           'fcul'
              'ows_onlineresource'  'http://localhost/cgi-bin/mapserv.exe?'
              'ows_srs'             'EPSG:3763 EPSG:900913'
              "ows_enable_request"   "*"
              "ows_include_items" "all"
              "wms_include_items" "all"
            END

          END

        LAYER
            NAME 'Caminhos'
            TYPE POLYGON
            CONNECTIONTYPE postgis
            CONNECTION "dbname='fcul' host=localhost port=5432 user='postgres' password='****'"
            DATA 'geom FROM "campus"."exteriorcaminhos" USING UNIQUE gid USING srid=3763'
            METADATA
              'ows_title' 'Caminhos'
              "ows_include_items" "all"
              "wms_include_items" "all"
            END
            STATUS ON
           PROJECTION
                "init=epsg:3763"
            END #end projection
            CLASS
               NAME 'Caminhos' 
               STYLE
                 WIDTH 0.05 
                 OUTLINECOLOR 115 63 44
                 COLOR 249 239 189
               END
            END
          END

          LAYER
            NAME 'Escadas'
            TYPE POLYGON
            CONNECTIONTYPE postgis
            CONNECTION "dbname='fcul' host=localhost port=5432 user='postgres' password='****'"
            DATA 'geom FROM "campus"."edificiosescadas" USING UNIQUE gid USING srid=3763'
            METADATA
              'ows_title' 'Escadas'
            END
            STATUS ON
            TRANSPARENCY 50
            PROJECTION
                "init=epsg:3763"
            END #end projection
            CLASS
               NAME 'Escadas' 
               STYLE
                 WIDTH 0.91 
                 OUTLINECOLOR 235 116 255
                 COLOR 235 116 255
               END
            END
          END


        END
share|improve this question
    
Guys, it seems like the problem vas in the order od the elments, it is not giving that error anymore. But it doesn't seem to show the popup aswell, any idea?! –  Alexandra Dec 30 '12 at 14:27
    
What error if any do you see in firebug? Are you seeing any request being sent? –  Devdatta Tengshe Dec 30 '12 at 16:15
    
Post your entire code. You aren't initializing map as the right name or at the right time. –  tmcw Dec 30 '12 at 17:23
    
Devdatta, there are no errors in firebug. I attached the file bellow: –  Alexandra Dec 30 '12 at 19:18
    
i've updated the question to include the rest of the code! thank you once again! –  Alexandra Dec 30 '12 at 19:39
show 2 more comments

2 Answers

In your entire code is used map.getLocalXY instead of map.getLonLatFromPixel, this would cause an error and would not show the popup.

(Note: you adds two OpenLayers.Control.LayerSwitcher to the map)

share|improve this answer
add comment

I have been going thru this and it seems like the code wasn't really the issue here.. It was my browser's configuration that wasn't allowing the request to be made.. I have asked for a friend's help and he's changed the configuration to allow it. I am not shure of what the problem was, but it has something to do with this:

http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin

hopefully you'll have an informatic background and will be able to deciphre it.. (or if someone who understands the issue see this post, please feel free to explain) !

Thank you all =)

share|improve this answer
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.