I have a question related to legend. I have a series of layers as the picture below. I want to add legend (symbology) base on categories on that map. For example, if I select layer land use, the symbology (color and categories) will appear on that map.
closed as unclear what you're asking by Richard Law, Midavalo♦ Aug 4 '17 at 0:06
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
If you're using Geoserver, you can import and SLD (style) file that you can create in QGIS. You then style your layer using the SLD, and Geoserver will generate a dynamic image based on the SLD of the layer. You can copy the path to that image, and use it in the Leaflet legend plugin.
Here's a picture of our Leaflet map containing a WMS layer (for the picture) and a GeoJSON layer for interactivity. (I manage both in one script that can be added to other maps easily).
Once you've created the Geoserver Style based on the QGIS-based SLD file, apply it to your layer. You'll see in your Layer > Publishing the image of the legend:
The Leaflet Legend basically creates a pane with a mouseover button which inside you can put whatever you want, in my case, the URL to the image that Geoserver is maintaining.
The HTML looks like this:
<div id="legend"> <b>Utilization Rate:</b> <br> <i>Utilization rate calulcated daily using capacity and today's student totals by school</i> <br> <img src='http://server:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&STRICT=false&style=utilization_AboveAndBelow'> <p> <b>Residential Development Student Yield:</b> <Br> <i>Residential development student yields maintained via City and Developer announcements. Student yield estimates based on number and types of units. <Br> Note: Developments yielding 0-5 students not shown.</i> <br> <img src='http://server:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&STRICT=false&style=Developments'> </div>
And again, we're using 2 layers in the map: the WMS is simply a styled picture of the data. The GeoJSON layer is for interactivity (pop-ups with data-driven text from PostgreSQL/PostGIS.