[Geoserver-users] Creating a legend in Geoserver?

I created a map in Geoserver and I have a lot of layeres.

How can I add a legend to it (hopefully without using code)? I want the user
to be able to switch layers on and off.

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

On Sat, 26 Dec 2015 04:55:31 PM epyks23 wrote:

I created a map in Geoserver and I have a lot of layeres.

How can I add a legend to it (hopefully without using code)? I want the user
to be able to switch layers on and off.

Are you really looking for a legend for each layer, or a map-layer switcher?

Brad

On 27/12/15 14:26, Brad Hards wrote:

On Sat, 26 Dec 2015 04:55:31 PM epyks23 wrote:

I created a map in Geoserver and I have a lot of layeres.

How can I add a legend to it (hopefully without using code)? I want the user
to be able to switch layers on and off.

Are you really looking for a legend for each layer, or a map-layer switcher?

And if you are looking for a map layer switcher, are you using OpenLayers 3? You will need a little JavaScript, but there are several layer switchers that you can use (OL3 lacks a layer switcher). Here is one:
https://github.com/walkermatt/ol3-layerswitcher
Example:
https://github.com/walkermatt/ol3-layerswitcher/blob/master/examples/layerswitcher.js
Interactive example:
http://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/layerswitcher.html

Kind regards,

--
Ben Caradoc-Davies <ben@anonymised.com>
Director
Transient Software Limited <http://transient.nz/&gt;
New Zealand

The interactive example that Ben Caradoc-Davies posted is perfect for what
I'm looking for.

I have attached the HTML code of my map.

I am new to this and I was wondering where the javascript code goes. Do I
have to create a javascript file? And paste and play around with the code
from
https://github.com/walkermatt/ol3-layerswitcher/blob/master/examples/layerswitcher.js
<https://github.com/walkermatt/ol3-layerswitcher/blob/master/examples/layerswitcher.js&gt;
?

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243022.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

See the source of the layerswitcher demo:
https://github.com/walkermatt/ol3-layerswitcher/blob/master/examples/layerswitcher.html

Your JavaScript goes in an HTML <script> tag, either just pasted between <script></script>, or even better, by referring to another file using the src attribute (as in the example):

<script src="mylayerswitcher.js" defer></script>

See: http://www.w3schools.com/tags/tag_script.asp

In this case (with a relative path), mylayerswitcher.js is in the same folder as your HTML file. You can also refer to remote JavaScript files with http:// URLs.

You also need a <script> tags for OL3 and for the component itself (the js file), so the script tags become:

<script src="ol.js" defer></script> <!-- could be http reference -->
<script src="ol3-layerswitcher.js" defer></script>
<script src="mylayerswitcher.js" defer></script>

To define the styling, reference your stylesheets with
<link rel="stylesheet" href="yourstylesheet.css"> in your HTML <head>.

Kind regards,
Ben.

On 28/12/15 06:44, epyks23 wrote:

The interactive example that Ben Caradoc-Davies posted is perfect for what
I'm looking for.

I have attached the HTML code of my map.

I am new to this and I was wondering where the javascript code goes. Do I
have to create a javascript file? And paste and play around with the code
from
https://github.com/walkermatt/ol3-layerswitcher/blob/master/examples/layerswitcher.js
<https://github.com/walkermatt/ol3-layerswitcher/blob/master/examples/layerswitcher.js&gt;
?

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243022.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

------------------------------------------------------------------------------
_______________________________________________
Geoserver-users mailing list
Geoserver-users@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-users

--
Ben Caradoc-Davies <ben@anonymised.com>
Director
Transient Software Limited <http://transient.nz/&gt;
New Zealand

I checked out the links. I have attached my HTML and JS file but it seems
that I get two maps (my Geoserver map and the OSM map). index2.html
<http://osgeo-org.1560.x6.nabble.com/file/n5243031/index2.html&gt;
mylayerswitcher.js
<http://osgeo-org.1560.x6.nabble.com/file/n5243031/mylayerswitcher.js&gt;

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243031.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

You have *three* <script> tags that load ol.js. You also have multiple script tags for your other js when you should have only one for each. If you use defer, it should be fine to include only the ones in the body.

Kind regards,
Ben.

On 28/12/15 09:49, epyks23 wrote:

I checked out the links. I have attached my HTML and JS file but it seems
that I get two maps (my Geoserver map and the OSM map). index2.html
<http://osgeo-org.1560.x6.nabble.com/file/n5243031/index2.html&gt;
mylayerswitcher.js
<http://osgeo-org.1560.x6.nabble.com/file/n5243031/mylayerswitcher.js&gt;

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243031.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

------------------------------------------------------------------------------
_______________________________________________
Geoserver-users mailing list
Geoserver-users@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-users

--
Ben Caradoc-Davies <ben@anonymised.com>
Director
Transient Software Limited <http://transient.nz/&gt;
New Zealand

Like this? index2.html
<http://osgeo-org.1560.x6.nabble.com/file/n5243038/index2.html&gt;

I am using only one script that loads ol.js

And the layerswitcher.js is defer and inside the body.

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243038.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

You still have two map divs:

<div id="map"></div>

It is invalid HTML to have more than one element with id=map". This will confuse OpenLayers. And where is the script to load ol3-layerswitcher.js?

The html+javascript from the GeoServer page has a lot of complex features. Perhaps start with a simpler page and add functionality incrementally?

Kind regards,
Ben.

On 28/12/15 11:02, epyks23 wrote:

Like this? index2.html
<http://osgeo-org.1560.x6.nabble.com/file/n5243038/index2.html&gt;

I am using only one script that loads ol.js

And the layerswitcher.js is defer and inside the body.

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243038.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

------------------------------------------------------------------------------
_______________________________________________
Geoserver-users mailing list
Geoserver-users@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-users

--
Ben Caradoc-Davies <ben@anonymised.com>
Director
Transient Software Limited <http://transient.nz/&gt;
New Zealand

And you should be careful mixing inline <script> content with deferred <script> unless you understand the dependencies of your code and the order in which the JavaScript files are run. I recommend putting all your JavaScript in a .js file that you load with <script src="..." defer></script>. Deferred scripts will be run in order they are referenced in the html.

Kind regards,
Ben.

On 28/12/15 12:07, Ben Caradoc-Davies wrote:

You still have two map divs:

<div id="map"></div>

It is invalid HTML to have more than one element with id=map". This will
confuse OpenLayers. And where is the script to load ol3-layerswitcher.js?

The html+javascript from the GeoServer page has a lot of complex
features. Perhaps start with a simpler page and add functionality
incrementally?

Kind regards,
Ben.

On 28/12/15 11:02, epyks23 wrote:

Like this? index2.html
<http://osgeo-org.1560.x6.nabble.com/file/n5243038/index2.html&gt;

I am using only one script that loads ol.js

And the layerswitcher.js is defer and inside the body.

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243038.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

------------------------------------------------------------------------------
_______________________________________________
Geoserver-users mailing list
Geoserver-users@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-users

--
Ben Caradoc-Davies <ben@anonymised.com>
Director
Transient Software Limited <http://transient.nz/&gt;
New Zealand

It is better now? index3.html
<http://osgeo-org.1560.x6.nabble.com/file/n5243053/index3.html&gt;

javascript.js
<http://osgeo-org.1560.x6.nabble.com/file/n5243053/javascript.js&gt;

(I apologize if I repeat myself. I am not very familiar with JavaScript
syntax)

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243053.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

(I added the shapefiles as stores and then put them together as a layer
group. Not sure if this has
anything to do with it.)

I was reading this link:
http://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/legendgraphic.html
<http://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/legendgraphic.html&gt;

I am not sure where this goes in my code:
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

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243113.html
Sent from the GeoServer - User mailing list archive at Nabble.com.

Are these ok? oceans.html
<http://osgeo-org.1560.x6.nabble.com/file/n5243129/oceans.html&gt;

mylayerswitcher.js
<http://osgeo-org.1560.x6.nabble.com/file/n5243129/mylayerswitcher.js&gt;

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/Creating-a-legend-in-Geoserver-tp5242993p5243129.html
Sent from the GeoServer - User mailing list archive at Nabble.com.