I created a map in Geoserver by adding shapefiles as stores and them grouping them as a layer group. I understand that I can use GetLegendGraphic request to make a legend in the map and the user can switch the layers on and off.
I was reading this link http://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/legendgraphic.html
and I was wondering where in my code this would go:
http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=topp:states&legend_options=fontName:Times%20New%20Roman;fontAntiAliasing:true;fontColor:0x000033;fontSize:14;bgColor:0xFFFFEE;dpi:180
I was also wondering how I would be able to call on the layers in the code.
This is my HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
<style>
.ol-zoom {
top: 52px;
}
.ol-toggle-options {
z-index: 1000;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
position: absolute;
left: 8px;
top: 8px;
}
#updateFilterButton, #resetFilterButton {
height: 22px;
width: 22px;
text-align: center;
text-decoration: none !important;
line-height: 22px;
margin: 1px;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-weight: bold !important;
background: rgba(0,60,136,0.5);
color: white !important;
padding: 2px;
}
.ol-toggle-options a {
background: rgba(0,60,136,0.5);
color: white;
display: block;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-size: 19px;
font-weight: bold;
height: 22px;
line-height: 11px;
margin: 1px;
padding: 0;
text-align: center;
text-decoration: none;
width: 22px;
border-radius: 2px;
}
.ol-toggle-options a:hover {
color: #fff;
text-decoration: none;
background: rgba(0,60,136,0.7);
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
iframe {
width: 100%;
height: 250px;
border: none;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
}
#toolbar ul {
list-style: none;
padding: 0;
margin: 0;
}
#toolbar ul li {
float: left;
padding-right: 1em;
padding-bottom: 0.5em;
}
#toolbar ul li a {
font-weight: bold;
font-size: smaller;
vertical-align: middle;
color: black;
text-decoration: none;
}
#toolbar ul li a:hover {
text-decoration: underline;
}
#toolbar ul li * {
vertical-align: middle;
}
#map {
clear: both;
position: relative;
width: 752px;
height: 768px;
border: 1px solid black;
}
#wrapper {
width: 752px;
}
#location {
float: right;
}
/* Styles used by the default GetFeatureInfo output, added to make IE happy */
table.featureInfo, table.featureInfo td, table.featureInfo th {
border: 1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
}
table.featureInfo th {
padding: .2em .2em;
font-weight: bold;
background: #eee;
}
table.featureInfo td {
background: #fff;
}
table.featureInfo tr.odd td {
background: #eee;
}
table.featureInfo caption {
text-align: left;
font-size: 100%;
font-weight: bold;
padding: .2em .2em;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script>
<title>OpenLayers map preview</title>
</head>
<body>
<script src="javascript.js" defer></script>
<script src="http://openlayers.org/en/v3.3.0/build/ol.js" defer></script>
<script src="ol3-layerswitcher.js" defer></script>
<script src="layerswitcher.js" defer></script>
<div id="toolbar" style="display: none;">
<ul>
<li>
<a>WMS version:</a>
<select id="wmsVersionSelector" onchange="setWMSVersion(value)">
<option value="1.1.1">1.1.1</option>
<option value="1.3.0">1.3.0</option>
</select>
</li>
<li>
<a>Tiling:</a>
<select id="tilingModeSelector" onchange="setTileMode(value)">
<option value="untiled">Single tile</option>
<option value="tiled">Tiled</option>
</select>
</li>
<li>
<a>Antialias:</a>
<select id="antialiasSelector" onchange="setAntialiasMode(value)">
<option value="full">Full</option>
<option value="text">Text only</option>
<option value="none">Disabled</option>
</select>
</li>
<li>
<a>Format:</a>
<select id="imageFormatSelector" onchange="setImageFormat(value)">
<option value="image/png">PNG 24bit</option>
<option value="image/png8">PNG 8bit</option>
<option value="image/gif">GIF</option>
<option id="jpeg" value="image/jpeg">JPEG</option>
</select>
</li>
<li>
<a>Styles:</a>
<select id="imageFormatSelector" onchange="setStyle(value)">
<option value="">Default</option>
</select>
</li>
<li>
<a>Width/Height:</a>
<select id="widthSelector" onchange="setWidth(value)">
<!--
These values come from a statistics of the viewable area given a certain screen area
(but have been adapted a litte, simplified numbers, added some resolutions for wide screen)
You can find them here: http://www.evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20/2297/
--><option value="auto">Auto</option>
<option value="600">600</option>
<option value="750">750</option>
<option value="950">950</option>
<option value="1000">1000</option>
<option value="1200">1200</option>
<option value="1400">1400</option>
<option value="1600">1600</option>
<option value="1900">1900</option>
</select>
<select id="heigthSelector" onchange="setHeight(value)">
<option value="auto">Auto</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
</select>
</li>
<li>
<a>Filter:</a>
<select id="filterType">
<option value="cql">CQL</option>
<option value="ogc">OGC</option>
<option value="fid">FeatureID</option>
</select>
<input type="text" size="80" id="filter"/>
<a id="updateFilterButton" href="#" onClick="updateFilter()" title="Apply filter">Apply</a>
<a id="resetFilterButton" href="#" onClick="resetFilter()" title="Reset filter">Reset</a>
</li>
</ul>
</div>
<div id="map">
<div class="ol-toggle-options ol-unselectable"><a title="Toggle options toolbar" onClick="toggleControlPanel()" href="#toggle">...</a></div>
</div>
<div id="wrapper">
<div id="location"></div>
<div id="scale">
</div>
<div id="nodelist">
<em>Click on the map to get feature info</em>
</div>
</body>
</html>
JavaScript:
var pureCoverage = false;
// if this is just a coverage or a group of them, disable a few items,
// and default to jpeg format
var format = 'image/png';
var bounds = [-3594302.422745372, 4299979.83984952,
1326460.2317970337, 9321046.312807199];
if (pureCoverage) {
document.getElementById('filterType').disabled = true;
document.getElementById('filter').disabled = true;
document.getElementById('antialiasSelector').disabled = true;
document.getElementById('updateFilterButton').disabled = true;
document.getElementById('resetFilterButton').disabled = true;
document.getElementById('jpeg').selected = true;
format = "image/jpeg";
}
var mousePositionControl = new ol.control.MousePosition({
className: 'custom-mouse-position',
target: document.getElementById('location'),
coordinateFormat: ol.coordinate.createStringXY(5),
undefinedHTML: ' '
});
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/Marine/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
STYLES: '',
LAYERS: 'Marine:Marine',
}
})
});
var tiled = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/Marine/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'Marine:Marine',
}
})
});
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
units: 'm',
axisOrientation: 'neu'
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([mousePositionControl]),
target: 'map',
layers: [
untiled,
tiled
],
view: new ol.View({
projection: projection
})
});
map.getView().on('change:resolution', function(evt) {
var resolution = evt.target.get('resolution');
var units = map.getView().getProjection().getUnits();
var dpi = 25.4 / 0.28;
var mpu = ol.proj.METERS_PER_UNIT[units];
var scale = resolution * mpu * 39.37 * dpi;
if (scale >= 9500 && scale <= 950000) {
scale = Math.round(scale / 1000) + "K";
} else if (scale >= 950000) {
scale = Math.round(scale / 1000000) + "M";
} else {
scale = Math.round(scale);
}
document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
});
map.getView().fit(bounds, map.getSize());
map.on('singleclick', function(evt) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
var view = map.getView();
var viewResolution = view.getResolution();
var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
if (url) {
document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
}
});
// sets the chosen WMS version
function setWMSVersion(wmsVersion) {
map.getLayers().forEach(function(lyr) {
lyr.getSource().updateParams({'VERSION': wmsVersion});
});
}
// Tiling mode, can be 'tiled' or 'untiled'
function setTileMode(tilingMode) {
if (tilingMode == 'tiled') {
untiled.set('visible', false);
tiled.set('visible', true);
} else {
tiled.set('visible', false);
untiled.set('visible', true);
}
}
function setAntialiasMode(mode) {
map.getLayers().forEach(function(lyr) {
lyr.getSource().updateParams({'FORMAT_OPTIONS': 'antialias:' + mode});
});
}
// changes the current tile format
function setImageFormat(mime) {
map.getLayers().forEach(function(lyr) {
lyr.getSource().updateParams({'FORMAT': mime});
});
}
function setStyle(style){
map.getLayers().forEach(function(lyr) {
lyr.getSource().updateParams({'STYLES': style});
});
}
function setWidth(size){
var mapDiv = document.getElementById('map');
var wrapper = document.getElementById('wrapper');
if (size == "auto") {
// reset back to the default value
mapDiv.style.width = null;
wrapper.style.width = null;
}
else {
mapDiv.style.width = size + "px";
wrapper.style.width = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}
function setHeight(size){
var mapDiv = document.getElementById('map');
if (size == "auto") {
// reset back to the default value
mapDiv.style.height = null;
}
else {
mapDiv.style.height = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}
function updateFilter(){
if (pureCoverage) {
return;
}
var filterType = document.getElementById('filterType').value;
var filter = document.getElementById('filter').value;
// by default, reset all filters
var filterParams = {
'FILTER': null,
'CQL_FILTER': null,
'FEATUREID': null
};
if (filter.replace(/^\s\s*/, '').replace(/\s\s*$/, '') != "") {
if (filterType == "cql") {
filterParams["CQL_FILTER"] = filter;
}
if (filterType == "ogc") {
filterParams["FILTER"] = filter;
}
if (filterType == "fid")
filterParams["FEATUREID"] = filter;
}
// merge the new filter definitions
map.getLayers().forEach(function(lyr) {
lyr.getSource().updateParams(filterParams);
});
}
function resetFilter() {
if (pureCoverage) {
return;
}
document.getElementById('filter').value = "";
updateFilter();
}
// shows/hide the control panel
function toggleControlPanel(){
var toolbar = document.getElementById("toolbar");
if (toolbar.style.display == "none") {
toolbar.style.display = "block";
}
else {
toolbar.style.display = "none";
}
map.updateSize()
}
Best Answer
The GetLegendGraphic request returns an image (in the format requested) so you can add it to your html where ever you want the legend to appear using an
<img src="..." />tag as you would any other image you are including in your page.As for your other question may be looking at the answers to How to Start Web Mapping? and other web-mapping questions on http://gis.stackexchange.com may help you.