1

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: '&nbsp;'
  });
  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()
    }

migrated from stackoverflow.com Jan 10 '16 at 18:28

This question came from our site for professional and enthusiast programmers.

1

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.

  • I see. I do not want an image of the legend. I want the user to be able to toggle between the different layers. – Toronto23 Dec 29 '15 at 17:29
  • Then you need a layer switcher – Ian Turton Dec 29 '15 at 17:30

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.