Code Monkey home page Code Monkey logo

leaflet-wms-legend's Introduction

Leaflet WMS Legend Plugin

This is a simple plugin for leaflet that will display a WMS GetLegendGraphic request result in a legend. At the moment the plugin is really, really simple in that is actually will display any image URI you pass it on initialisation. However that is enough to create a nice looking legend on your map like this:

Legend Example

Usage

To use it simply include the supplied javascript and css files (make sure the js file comes after the main leaflet js file):

<link rel="stylesheet" href="../css/leaflet.wmslegend.css"/>
<script src="../js/leaflet.wmslegend.js"></script>

Then add a call to the legend control as per this example:

uri = "http://maps.kartoza.com/cgi-bin/qgis_mapserv.fcgi?";
uri += "map=/web/Boosmansbos/Boosmansbos.qgs&";
uri += "&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&";
uri += "REQUEST=GetLegendGraphic&FORMAT=image/jpeg&LAYER=Boosmansbos&STYLE=";
L.wmsLegend(uri);

Demos

For a complete example, please see example.html in the source tree. You can also visit http://maps.kartoza.com as various of our demos there use the legend control provided here.

License

MIT License - see LICENSE.txt provided in the source

Requirements

Works with leaflet 0.7.3 - may work with older version (untested by the author).

Author

Tim Sutton ([email protected])

August 2014

leaflet-wms-legend's People

Contributors

pamtrak06 avatar timlinux avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

leaflet-wms-legend's Issues

Is this a hoax?

Seems like you just did a nice image and plenty of HTML and CSS...

If it is true, i will provide you with a link to use so that you can prove your results. Nice concept though...although this is a hoax...seen your code, you only use an image of the legend and use CSS to display it!!!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.