JSFiddle - React, Tailwind, and code Playground
by Thomas B.
HTML
<link rel="stylesheet" href="//dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css">
<link rel="stylesheet" href="//dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css">
<script src="//dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js"></script>
<body onload="load()">OpenLayers GetFeatureInfo from multiple Layers with if else
<br />
<div id="map" class="smallmap"></div>
</body>
JavaScript
//OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
// ADD YOUR PROXY HOST HERE AND RUN ON YOUR SERVER
var map, info;
function load() {
map = new OpenLayers.Map({
div: "map",
maxExtent: new OpenLayers.Bounds(143.834, -43.648, 148.479, -39.573)
});
var political = new OpenLayers.Layer.WMS("State Boundaries",
"http://demo.opengeo.org/geoserver/wms", {
'layers': 'topp:tasmania_state_boundaries',
transparent: true,
format: 'image/png'
}, {
isBaseLayer: true
});
var roads = new OpenLayers.Layer.WMS("Roads",
"http://demo.opengeo.org/geoserver/wms", {
'layers': 'topp:tasmania_roads',
transparent: true,
format: 'image/png'
}, {
isBaseLayer: false
});
var cities = new OpenLayers.Layer.WMS("Cities",
"http://demo.opengeo.org/geoserver/wms", {
'layers': 'topp:tasmania_cities',
transparent: true,
format: 'image/png'
}, {
isBaseLayer: false
});
var water = new OpenLayers.Layer.WMS("Bodies of Water",
"http://demo.opengeo.org/geoserver/wms", {
'layers': 'topp:tasmania_water_bodies',
transparent: true,
format: 'image/png'
}, {
isBaseLayer: false
});
var highlight = new OpenLayers.Layer.Vector("Highlighted Features", {
displayInLayerSwitcher: false,
isBaseLayer: false
});
map.addLayers([political, roads, cities, water, highlight]);
info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://demo.opengeo.org/geoserver/wms',
title: 'Identify features by clicking',
queryVisible: true,
infoFormat: 'application/json',
drillDown: true,
eventListeners: {
...