127 lines
3.7 KiB
Python
127 lines
3.7 KiB
Python
import json
|
|
from .folium_injections import FoliumCSSAndJavaScript
|
|
|
|
|
|
def color_bar(colorbar_ticks, fontsize='16px', scale=1):
|
|
return FoliumCSSAndJavaScript(code="""
|
|
jQuery.prototype.colorbar_legend = function(colormap, smooth) {{
|
|
$(this).html('')
|
|
var colormap_ = {{}}
|
|
for (var idx in colormap) {{
|
|
colormap_[parseFloat(idx)] = colormap[idx];
|
|
}}
|
|
colormap = colormap_
|
|
|
|
var colors_div = $('<div class="colors"></div>');
|
|
var tick_locations = Object.keys(colormap).map(parseFloat);
|
|
tick_locations.sort();
|
|
tick_locations.reverse();
|
|
var previous = undefined;
|
|
var color_style = (
|
|
'linear-gradient(' +
|
|
tick_locations.map(function(tick) {{
|
|
var prepend = '';
|
|
if (!smooth)
|
|
prepend = previous ? previous + ' ' + (100 * (1-tick) + 0.001) + '%, ' : '';
|
|
previous = colormap[tick].color;
|
|
return (
|
|
prepend + colormap[tick].color + ' ' + (100 * (1-tick)) + '%'
|
|
);
|
|
}}).join(', ') + ')'
|
|
);
|
|
colors_div.css('background-image', color_style);
|
|
$(this).append(colors_div);
|
|
|
|
for(var i in tick_locations) {{
|
|
var tick = tick_locations[i];
|
|
var top = tick == 0 ? 'calc(100% - 1px)' : (100 * (1-tick)) + '%';
|
|
if ('value' in colormap[tick]) {{
|
|
var label = $('<div class="label">' + colormap[tick].value + '</div>');
|
|
label.css('top', top);
|
|
label.css('left', '130%');
|
|
|
|
var tick_ = $('<div class="tick"></div>');
|
|
tick_.css('top', top);
|
|
$(this).append(tick_);
|
|
|
|
// label.css('width', '100%');
|
|
$(this).append(label);
|
|
}}
|
|
|
|
}}
|
|
}};
|
|
|
|
var color_to_rgba = function(color) {{
|
|
var rgba = $('div').css('color', color).css('color');
|
|
rgba = rgba.replace('rgb(', '').replace('rgba(', '').replace(')', '').split(',').map(parseFloat);
|
|
if (rgba.length < 4) // jquery's color sometimes does not return an alpha if it is 1.
|
|
rgba.push(1);
|
|
return rgba;
|
|
}};
|
|
|
|
var colormap = function(start, end) {{
|
|
return (function(start, end, value) {{
|
|
var value = Math.max(0, Math.min(value, 1));
|
|
return (
|
|
'rgba(' + [0, 1, 2, 3].map(
|
|
i => start[i] + value * (end[i] - start[i])
|
|
).join(',') + ')');
|
|
}}).bind(null, color_to_rgba(start), color_to_rgba(end))
|
|
}};
|
|
|
|
$(function() {{
|
|
var legend = $('<div class="colorbar"></div>');
|
|
$('body').append(legend);
|
|
|
|
legend.colorbar_legend({colorbar_ticks}, true);
|
|
}});
|
|
""".format(colorbar_ticks=json.dumps(colorbar_ticks)), style="""
|
|
table.leaflet-filter-table td {{ padding-left: 10px; padding-right: 10px; border-bottom: 5px;}}
|
|
|
|
table.leaflet-filter-table label {{ display: inline-block; min-width: 50px; }}
|
|
|
|
.colorbar {{
|
|
width: calc({scale} * 25px);
|
|
position: relative;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
position: fixed;
|
|
top: calc(50px * {scale});
|
|
width: calc(20px * {scale});
|
|
left: calc(5px * {scale});
|
|
height: calc(100% - {scale} * 100px);
|
|
z-index: 1000;
|
|
}}
|
|
|
|
.colorbar .colors {{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0; left:0;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
}}
|
|
|
|
.colorbar .tick {{
|
|
left: 100%;
|
|
position: absolute;
|
|
width: 20%;
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width: {scale}px 0 0 0;
|
|
height: 10px;
|
|
}}
|
|
|
|
.colorbar .label {{
|
|
border-radius: calc({fontsize} / 4);
|
|
background-color: #fff;
|
|
color: #000;
|
|
left:130%;
|
|
position: absolute;
|
|
border: 0;
|
|
height: {fontsize};
|
|
margin-top: calc({fontsize} / -2);
|
|
line-height: {fontsize};
|
|
vertical-align: middle;
|
|
font-size: {fontsize};
|
|
padding: 0px 3px;
|
|
font-family: Garamond;
|
|
}}""".format(fontsize=fontsize, scale=scale)) |