JSLegend is a tiny JavaScript library for creating dynamic map legends in various styles.
The intent of JSLegend is to rely heavily on HTML/CSS which is used extensively by developers of all skill levels, avoiding yet another exhaustive set of methods and properties to absorb. JSLegend remains robust without being cumbersome.
Sources: jsLegend.js and jsLegend.css
<link rel="stylesheet" href="/jsLegend.css"/>
<script src="/jsLegend.js"><script>
...
var options = {
id: "legend"
,title: "<strong>Legend<strong>"
,minValue: 0
,maxValue: 100
,steps: 5
,colors: "#0057b7,#ffd700"
,thickness: "10px"
};
var legend = new JSLegend(options);
legend.showLegend();
...
<div id="legend" style="position: absolute; height: 300px; top: 10px; left: 10px;"><div>
JSLegend.showLegend() : displays legend after creation.
JSLegend.hideLegend() : hides legend, does not remove from DOM.
JSLegend.format(template, args...) : Helper function to create formatted text strings.Ex: JSLegend.format('Hello {0} I am {1} 'you', 'me');
id: id of <div> element to draw legend in.
title: valid text HTML/CSS string.
type: gradient|colorstop|cell. gradient is default. See examples for discussion of each.
orientation: [0|1] default is '0', vertical. 1 is horizontal.
translate: [0|1] default 0. See examples for discussion of each.
colors: csv of hex colors.
labels: semi-colon separated list of labels. Type 'cell' only, takes precedence over values.
values: csv of values to process. Will be forced into unique, ascending order.
minValue: minimum value to display
maxValue: maximum value to display
steps: number of labels to display. Creates 'values' using (maxValue - minValue) / steps.
thickness: thickness of legend scale in CSS units.
footer: valid text HTML/CSS string to append to bottom of legend.
labelRotate: Rotate label by degrees. Handy for long labels in horizontal legends.
labelStyleFn: user defined callback to process/style as each value is processed. See notes.
cellStyleFn: user defined callback to style each 'cell' for 'type: cell'. See notes.
Parameters passed to callbacks are 'index' and 'self'. 'index' is the index of the cell or label currently being processed. 'self' is the entire DOM object and contains variables such as the 'values' array and the colors array, that were passed as csv strings in options.
cellStyleFn: You can style the default cell style into whatever you wish. The default cell is a div of dimensions thickness x thickness. The callback returns CSS that is passed to the 'style' attribute in the div.
labelStyleFn: this function should return valid CSS styled HTML tags to create custom labels. It's also handy for say, converting between units of measure, formating decimal places or other math operations. You can also create your own hash.
/* JavaScript */
var basic = new JSLegend({
id: "basic"
,title: "<strong>Basic<br>Legend</strong>"
,minValue: 0
,maxValue: 100
,steps: 5
,colors: "#0057b7,#ffd700"
,thickness: "10px"
});
basic.showLegend();
<!-- in html body -->
<div id="basic" style="float: left; margin: 10px; height: 300px; background-color: #ececec;"><div>
/* JavaScript */
var basicCell = new JSLegend({
id: "basicCell"
,type: "cell"
,title: "<strong>Basic<br>Cell</strong>"
,colors: "#0247FE,#347C98,#66B032,#B2D732,#FEFE33,#FCCC1A,#FB9902,#FC600A"
,labels: "zero;one;two;three;four;five;six;seven"
,thickness: "15px"
});
basicCell.showLegend();
<!-- in html body -->
<div id="basicCell" style="float: left; margin: 10px; background-color: #ececec;"><div>
/* JavaScript */
var opts = {
id: "arbvalues"
,type: '[gradient|colorstop]'
,translate: [0|1]
,title: "<strong>type: 'colorstop'<br>translate: 1</strong>"
// for type 'colorstop', 'values' must have 1 more element than 'colors' elements
,colors: "#0247FE,#347C98,#66B032,#B2D732,#FEFE33,#FCCC1A,#FB9902,#FC600A"
,values: "0,1,2.5,5,7,10,12,20,25"
,thickness: "15px"
opts.labelStyleFn = function (index = null, self = null) {
return self.values[index] + '-' + ((self.values[index] / self.maxValue) * 100).toFixed(0) + '%';
};
};
var arbvalues = new JSLegend(opts);
arbvalues.showLegend();
<!-- in html body -->
<div id="arbvalues" style="display: inline-block; margin-left: 5%; height: 375px; border: 1px solid #fa7;"><div>
/* JavaScript */
var swe = new JSLegend({
id: "swe"
,type: '[gradient|colorstop]'
,title: "<strong>SWE cm(in)</strong>"
,colors: "#f1fafe,#add6f4,#8b98e4,#6b42cf,#6400b8
,#7c209d,#9e00b9,#d300c9,#e657c0,#f48ebe
,#fdbac6,#ffe9e9,#ffffff"
,values: ".1,.5,1,2.5,5,10,15,25,50,75,100,200,500,1000"
,thickness: "15px"
,labelStyleFn: function (index = null, self = null) {
var cm = self.values[index];
var inch = (self.values[index] * 0.393701);
return self.format("{0} ({1} cm, cm < 10 ? inch.toFixed(2) : inch.toFixed(1));
}
});
swe.showLegend();
<!-- in html body -->
<div id="swe" style="float: left; font-family: arial; height: 375px; background: linear-gradient(135deg, #ffe9e977 -10%, #ffffff77 60%, #f1fafe77); margin-right: 20px; border: 1px solid black; border-radius: .5em;"><div>
/* JavaScript */
var cells = new JSLegend({
id: "cells"
,type: "cell"
,title: "<strong>Horizontal Cell Legend</strong>"
,colors: "#0247FE,#347C98,#66B032,#B2D732,#FEFE33,#FCCC1A,#FB9902,#FC600A,#FE2712,#C21460"
,values: "1,2,3,4,5,6,7,8,9,10";
,thickness: "20px"
,orientation: [0|1]
,labelStyleFn: function (index = null, self = null) {
var n = [];
n[1] = "Un"; n[2] = "Deux"; n[3] = "Trois"; n[4] = "Quatre"; n[5] = "Cinq";
n[6] = "Six"; n[7] = "Sept"; n[8] = "Huit"; n[9] = "Neuf"; n[10] = "Dix";
return typeof n[self.values[index]] === "undefined" ? "?" : n[self.values[index]];
}
});
cells.showLegend();
<!-- in html body -->
<div id="cells" style="font-size: 16px; padding: 5px; border: 1px solid #7af; margin: auto; width: fit-content; background-color: #eee;"><div>
/* JavaScript */
var span = new JSLegend({
id: "span"
,title: "<strong>Horizontal Gradient Legend</strong>"
,colors: "#0247FE,#347C98,#66B032,#B2D732,#FEFE33,#FCCC1A,#FB9902,#FC600A,#FE2712,#C21460"
,minValue: 0
,maxValue: 100
,steps: 20
,thickness: "20px"
,orientation: 1
,labelRotate: 45
,labelStyleFn: function (index = null, self = null) { return "•" + self.values[index]; }
});
span.showLegend();
<!-- in html body -->
<div id="span" style="margin: auto; padding: 15px; width: 90%; border-radius: 7px; border: 1px solid #3a3; background-color: white;"><div>
/* JavaScript */
var maptext = new JSLegend({
id: "maptext"
,type: "cell"
,title: '<p style="padding: 5px; margin: auto; background-color: #6C9FB8; color: white;"><strong>Land Cover</strong><p>
,footer: '<p style="padding-top: 10px; border-top: 1px solid #6C9FB8; background-color: white; color: #6C9FB8; font-size: .8em;">lt;a href="https://www.mrlc.gov/data/nlcd-land-cover-conus-all-years" style="color: #368;" target="_blank">Land cover<a> provided by Multi-Resolution Land Characteristics (MRLC) consortium. List is not complete.<p>
,colors: "#466B9F,#D1DEF8,#DEC5C5,#D99282,#EB0000,#AB0000,#B3AC9F, #68AB5F,#1C5F2C,#B5C58F,#CCB879,#DFDFC2,#DCD939, #AB6C28,#B8D9EB,#6C9FB8"
,values: "11,12,21,22,23,24,31,41,42,43,52,71,81,82,90,95"
,thickness: "20px"
,labelStyleFn: function (index = null, self = null) {
var c = [];
c[11] = "Open water"; c[12] = "Perennial Ice/Snow"; c[21] = "Developed Open Space";
c[22] = "Developed Low Intensity"; c[23] = "Developed Medium Intensity"; c[24] = "Developed High Intensity";
c[31] = "Barren Land (Rock/Sand/Clay)"; c[41] = "Deciduous Forest"; c[42] = "Evergreen Forest";
c[43] = "Mixed Forest"; c[52] = "Shrub/Scrub"; c[71] = "Grassland/Herbaceous";
c[81] = "Pasture/Hay"; c[82] = "Cultivated Crops"; c[90] = "Woody Wetlands";
c[95] = "Emergent Herbaceous Wetlands";
return typeof c[self.values[index]] === "undefined" ? "Unknown" : c[self.values[index]];
}
,cellStyleFn: function (index = null, self = null) {
return self.format(
"border-radius: 50%; width: 30px; height: 20px; border: 2px solid {0} background-color: {0}77;", self.colors[index]
);
}
});
maptext.showLegend();
<!-- in html body -->
<div id="maptext" style="float: left; font-family: arial; margin: 20px; font-size: 16px; border: 1px solid #7af; background-color: white; filter: drop-shadow(15px 15px 4px #70a0f017); border-radius: .5em;"><div>
www.Postholer.com © 2005-2024 - W3C - @postholer