Viglino/ol-ext

Gradient legend

Closed this issue · 5 comments

nmcdtu commented

Thank you for the excellent extension for OpenLayers.

I am wondering if I can create a gradient legend with ol-ext similar to the legend of this website?
https://globalwindatlas.info/en

Screenshot 2024-05-24 170546

Thank you in advance!

Viglino commented

Yes, you can, you just have to set the size of the symbol and the margin of the legend to fit.
See parameters : https://viglino.github.io/ol-ext/doc/doc-pages/ol.legend.Legend.html
This will compress the legend (and you have remove items title to make it readable).

With a height of 32 Same with a height of 3
image image
nmcdtu commented

It is so great, thank you!

I have just started using ol-ext, so could you please consider sharing with me the code you used to create the 2 legends above?

nmcdtu commented

That is great, thank you very much!

nmcdtu commented

Here is an example: https://codepen.io/viglino/pen/pomNoaQ

I am copying the code here for future reference, in case the link becomes inaccessible in the future:

<head>
<!--
	Copyright (c) 2018 Jean-Marc VIGLINO,
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
	<title>ol-ext: Dijkstra short path</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="Add a routing control to your map." />
	<meta name="keywords" content="ol3, control, search, routing" />

	<!-- FontAwesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
  <link rel="stylesheet" href="https://viglino.github.io/ol-ext/dist/ol-ext.css" />
  <script type="text/javascript" src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>
	
	<link rel="stylesheet" href="../style.css"/>
</head>
<body>
  <div id="map"></div>
</body>
body {
  margin: 0;
  paddin: 0;
}
#map {
  position: fixed;
  inset: 0;
}
var resultDiv = document.getElementById('result');
var routeDiv = document.body.querySelector('ul');
var distDiv = document.body.querySelector('.distance span');

// The map
var map = new ol.Map ({
  target: 'map',
  view: new ol.View ({
    zoom: 7,
    center: [166326, 5992663]
  }),
  layers: [ new ol.layer.Tile({ source: new ol.source.OSM() })]
});

// Define a new legend
var legend = new ol.legend.Legend({ 
  title: 'Gradient legend',
  margin: 5,
  maxWidth: 300
});
var legendCtrl = new ol.control.Legend({
  legend: legend,
  collapsed: false
});
map.addControl(legendCtrl);

// The gradient legend
var gradientLegend = new ol.legend.Legend({
  size: [40,3],
  margin: 0
})
legend.addItem(gradientLegend)

var max = 50
// Some space before
for (var i=0; i<5; i++) {
  gradientLegend.addItem({})
}
// Gradient
for (var i=0; i<=max; i++) {
  gradientLegend.addItem({
    title: ' ' + (i%10 ? '' : max-i),
    typeGeom: 'Polygon',
    style: new ol.style.Style({
      fill: new ol.style.Fill({ color: [255-i*255/max, i*128/max, i*255/max]  }),
    })
  })
}
// Some space after
for (var i=0; i<5; i++) {
  gradientLegend.addItem({})
}