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
Best Answer
In your entire code is used
map.getLocalXYinstead ofmap.getLonLatFromPixel, this would cause an error and would not show the popup.(Note: you adds two
OpenLayers.Control.LayerSwitcherto the map)