search

Viglino / ol-ext

Cool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer, charts for statistical map (pie/bar), layer switcher, wikipedia layer, animations, canvas filters.
https://viglino.github.io/ol-ext/
Other
1.24k stars 462 forks source link

Gradient legend #1065

Closed nmcdtu closed 4 months ago

nmcdtu commented 5 months ago

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 5 months ago
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 5 months ago

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?

Viglino commented 4 months ago

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

nmcdtu commented 4 months ago

That is great, thank you very much!

nmcdtu commented 4 months ago

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({})
}