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
mapas the right name or at the right time.