1

I have the code below, however no response when clicking on the map.

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>
 <script type='text/javascript'>


 var map;

 function init() {
 map = new OpenLayers.Map('map_element', {});

// Setup our two layer objects

var osm_layer = new OpenLayers.Layer.OSM(
'OpenStreetMap Layer'
);  /*loading the OSM basemap*/


var wms_layer_labels = new OpenLayers.Layer.WMS(
'Location Labels',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'clabel,ctylabel,statelabel',
transparent: true},
{visibility: false, opacity:0.5}
);

var wms_state_lines = new OpenLayers.Layer.WMS(
'State Line Layer',
'http://labs.metacarta.com/wms/vmap0',
{layers: 'stateboundary',
transparent: true},
{displayInLayerSwitcher: false,
minScale: 13841995.078125}
);

var wms_water_depth = new OpenLayers.Layer.WMS(
'Water Depth',
'http://labs.metacarta.com/wms/vmap0',
{layers: 'depthcontour',
transparent: true},
{opacity:0.8}
);

var wms_roads = new OpenLayers.Layer.WMS(
'Roads',
'http://labs.metacarta.com/wms/vmap0',
{layers: 'priroad,secroad,rail',
transparent: true},
{transistionEffect:'resize'}
);

map.addLayers([
osm_layer,
wms_layer_labels,
wms_state_lines,
wms_water_depth,
wms_roads]);

 map.addControl(new OpenLayers.Control.LayerSwitcher({}));

 if(!map.getCenter()){
 map.zoomToMaxExtent();
 }

 var featureInfo = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://demo.opengeo.org/geoserver/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.addControl(featureInfo);

function featureInfoChange(checked) {
if(checked) {
featureInfo.activate();
} else {
featureInfo.deactivate();
}
}
}

 </script>
</head>

<body onload='init();'>
<div id='map_element' style='width: 500px; height: 500px;'>
<div id="ch05_wmsfeatureinfo" style="width: 100%; height:
100%;"></div>
</div>
</body>
</html>

It is based on this tutorial, How to do it?

  1. Create an HTML file with the OpenLayers library dependencies and add the code for the button and the map's div element:
<button dojoType="dijit.form.ToggleButton" id="featureInfoButton"
onChange="featureInfoChange" iconClass='dijitCheckBoxIcon'
checked="false">Activated</button>
<div id="ch05_wmsfeatureinfo" style="width: 100%; height:
100%;"></div>
  1. Set the proxy script, and initialize the map instance:
OpenLayers.ProxyHost = "./utils/proxy.php?url=";
// Create map
var map = new OpenLayers.Map("ch05_wmsfeatureinfo");

Adding Controls 176

  1. Now, add two WMS layers. The first will act as the base layer while the second will be an overlay layer with the USA states:
var wms = new OpenLayers.Layer.WMS("Basic", "http://demo.
opengeo.org/geoserver/wms",
{
layers: 'topp:naturalearth'
});
map.addLayer(wms);
var wms2 = new OpenLayers.Layer.WMS("Basic", "http://demo.
opengeo.org/geoserver/wms",
{
layers: 'topp:states',
transparent: true
},{
isBaseLayer: false
});
map.addLayer(wms2);
  1. Add the layer switcher control and center the map's viewport:
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-90, 40), 4);
  1. Then add the code for the WMSGetFeatureInfo control:
var featureInfo = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://demo.opengeo.org/geoserver/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.addControl(featureInfo);

The same issue also applies to the code provided earlier, Uncaught Reference Error: init is not defined

Here is my current map created using Openlayer2 enter image description here

  • 1
    In your code, the var featureInfo and the map.addControl(featureInfo) are outside the init() function so it won't work. But really, you are using an old version of OpenLayers and WMS urls from the documentation that seem all down today, I really suggest you like said in your other question to switch to OpenLayers 6.x (start with this example: openlayers.org/en/latest/examples/…), there's no added value in knowing how to do it in OpenLayers 2 today ... – Léo M Oct 8 at 13:51
  • I am convinced Openlayers 2 is still very useful, being a beginner and for the project at hand, it can help me achieve the goals I would like to achieve. With the knowledge of a beginner and the experience, I think I will be propelled and be able to learn even easier more advanced versions in the future. Because I could not add a picture to a comment, I added it to the question section to showcase what OpenLayers 2 can do, thus it will be fantastic for me to solve the current issue at the moment. Let me attend to your suggestion. I will revert back. – Amelia Nicodemus Oct 8 at 14:10
  • 2
    As you wish, it was just an advice ;) Most of the problems you are posting are although more related to basic Javascript (functions not called, variables not embedded in functions etc.) and not so much to the OpenLayers library properly speaking so maybe try to do a few tutorials on plain javascript, I'm sure it can help you to better structure your code :) – Léo M Oct 8 at 14:15

Your Answer

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

Browse other questions tagged or ask your own question.