How I can make a linear gradient legend using Leaflet

Question

i asked this question on gis.stackexchange by they said i should ask here I'm working on project that visualize solar energy data using Leaflet, I want to add a map legend when i add a lot of values the legend box get bigger and out of the map this is my try image image and code.

this the wanted legend result exp

var map = L.map('map').setView([31.7945, -7.0849], 5,
	);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/light-v9'
	}).addTo(map);
  
  var legend = L.control({position: 'bottomright'});

	legend.onAdd = function(map) {
    var div = L.DomUtil.create("div", "legend");
    div.innerHTML += "<h4>Legend</h4>";
    div.innerHTML += '<i style="background: rgba(105,  0,  0,255)"></i><span> 2750</span><br>';
    div.innerHTML += '<i style="background: rgba(110,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(115,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(120,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(125,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(130,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(135,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(140,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(145,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(150,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(155,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(160,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(165,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(170,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(175,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(180,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(185,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(190,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(195,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(200,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(205,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(210,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(215,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(220,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(225,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(230,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(235,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(240,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(245,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(250,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  0,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><span></span><br>';
    div.innerHTML += '<small>GHI (kWh/an/m²)<small>';
  return div;
  };

  legend.addTo(map);

	#map { width: 1080px; height: 720px; }
  .legend {
  padding: 10px 10px;
  font: 14px Arial, Helvetica, sans-serif;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
  line-height: 18px;
  border-radius: 5px;
}
.legend h4 {
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  color: black;
  font-weight: 400;
}

.legend span {
  bottom: 3px;
  padding-right: 10px;
}

.legend i {
    width: 20px;
    height: 5px;
    float: left;

}

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<html>
<head>

	<title>t</title>
</head>
<body>

<div id='map'></div>

</body>
</html>

Alexandar Zaharyan · Accepted Answer · 2020-05-16 08:40:57Z

Try removing the span elements and add a line-height:5px; to .legend element.

var map = L.map('map').setView([31.7945, -7.0849], 5,
	);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/light-v9'
	}).addTo(map);
  
  var legend = L.control({position: 'bottomright'});

	legend.onAdd = function(map) {
    var div = L.DomUtil.create("div", "legend");
    div.innerHTML += "<h4>Legend</h4>";
    div.innerHTML += '<i style="background: rgba(105,  0,  0,255)"></i>2750<br>';
    div.innerHTML += '<i style="background: rgba(110,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(115,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(120,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(125,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(130,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(135,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(140,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(145,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(150,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(155,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(160,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(165,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(170,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(175,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(180,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(185,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(190,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(195,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(200,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(205,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(210,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(215,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(220,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(225,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(230,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(235,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(240,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(245,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(250,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  0,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br>';
    div.innerHTML += '<i style="background: rgba(255,  3,  0,255)"></i><br><br>';
    div.innerHTML += '<small>GHI (kWh/an/m²)<small>';
  return div;
  };

  legend.addTo(map);

	#map { width: 1080px; height: 720px; }
  .legend {
  padding: 10px 10px;
  font: 14px Arial, Helvetica, sans-serif;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  line-height: 5px;
}
.legend h4 {
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  color: black;
  font-weight: 400;
}

.legend span {
  bottom: 3px;
  padding-right: 10px;
}

.legend i {
    width: 20px;
    height: 5px;
    float: left;

}

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<html>
<head>

	<title>t</title>
</head>
<body>

<div id='map'></div>

</body>
</html>

Collectives™ on Stack Overflow

How I can make a linear gradient legend using Leaflet

1 Answer 1

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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

Related

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