Skip to content

Icon colours #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IvanSanchez wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

Icon colours #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9aa476
Implemented hue rotation for icon colours
IvanSanchez Dec 2, 2016
c96a490
Add demo for the background colour functionality
IvanSanchez Dec 2, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 127 additions & 0 deletions Leaflet.Icon.Glyph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,130 @@ L.icon.glyph = function (options) {
L.Icon.Glyph.prototype.options.iconUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAUlSURBVFjDrZdLiBxVFIb/e289uqt6kkx6zIiIoKgLRReKuMhCcaOIAUEIiCCE4CIPggZ8kBjooPgM0TiYEUUjqBGchZqAQlyYRTA+kJiJQiJGMjN5zYzT3dP1rrr3HBeTjDGTSfc8Dvyruud89Z9z6kIJdBj31763MivsJXKuZYF6dak5++2mh7NOcsXVHq6sHbhOK/24kOJJMO4AE1vKygwZhxlKSHGKiD+RSu09vOXB43OCrHz96y6T2lsh+OmKXzFdlbLne2UopSAupBhjECcZgjDMgiiSxPhcK/nCr1sfOtcWcm/tq9uEsL4rl0vdK67pKVu2jUwTMk0wBBAzpBCQAnAtiZIlwWQwPlHPglZQAFj1Y23VwVkh92zbd59U+Kanp+p2L12mooKQ5AbcpuclS6LiKoRhxOfHzhXMcs3PtVV7Z0DufXH/LSzpSG9vr1/p6kIz0dDUrvx/IYXAsrJCkWc4e/Z0Zpgf+KX26A/TkNtrXziesY9Xq8tvWNZdVfVYg7hzwKVv3O3ZiKMWj46OTrq5fdOh1x5pSADwjdzo2nbv0u6qqkca2jCIMGcZAuqRhu8vEX7ZK2V2WgMAcXdtvyeKbPS662+osCohzMycHVweniNREoShoZO5KYobpciSh23bFq7rIUgNiLFghRkBlg2v7GlpiccsCHrcryzxUk3zmsNskeYGvt/lxVH4hMWEu9xSWaQFYQ7L1B6iGZ5bBoy+zWKiHiltFHpqeIsVhWaosg1iqlgg4wAAEYEXsV3EmNppJmExMFYUxfVSuIs6E0sI5FkBBhLJzH9laQxLSjBj0WQJgSJPweDTkknvS4JGbCuxKOt7UY4lEQfNnAu9TzLxN2nUdAQTLAEw8YIlAVgAkmDCSBL75eCutSeY+GTUqqNkqUVxUbIl4qgJo4vWzecrhyQAMJldYf1MXLLl1EIsYBZgoGwpRI2zMTPtGBhYbSQAlJF9lieRzNMIriVBzPOWawvoIkYaNC0u9IcAIAHgp75NLQl8ENbPZJ6jgAU48RyFqHEuZyE+Pda/vjENAQBD5s209Y+kPJlyM4+r3lUS0AWSyVEhpHnjYu1pyO+7N4ywwPvhxHDiuwo8j1b5rkQwMZIziYHBXetPzIAAgIV8exZOSMoieI6aU5vKtgR0jqw1JtiYbZfW/R/kSN+mcWbxdtwYjn1XTd9B7cQAfNdCWB/OhBR7jvWv/3tWCAAoO3ktjyZZJ0HHbsq2AooERVQXzPKly2vOgPz29jNNBr+e1IcSz5YAM4hmFzPDtyWS+lDK4N2DfU+dbgsBAFHyd+oszE3agt/GjWcrUBEjj5sQBb96pXpXhAzueDJi4u1p41TsuQpCiFln4bkKeXMoJeadg++tG+sYAgBBXOo3RRrruAnfkWDmGfIdCeQhiiQgQbxjtlqzQk59vCZlNluL5lDiORLyMjcA4DsKeXM4AfDKxa97ThAAqPaMfaR1Nq6jOiqOAhOm5TsKJg1QZGGRedY7V6tzVcjBWk1D0JZ8cigt2RJSimkXnqOgW8MxQLUTb6wN5g0BgGPV0c9BekTH41xx5YXrQ8FkTRgdpxU7ea9djbYQ1GokmJ43wUhWtgRcS04tQjAcw9CWw29tThYOAXD03XVfMps/TTTOy30blDZgiqxFK6p7OsnvCDJ1UD9LyUjORoPDkUQyPfdHbXW+qJCjfRsOwOAoNY4z6Xz01rHq3k5zO4ZMHTabYSIhJD87MLB64f8Ys8WdG/tfBljMJedfwY+s/2P4Pv8AAAAASUVORK5CYII=';


// rgb2hsl function ripped away from https://github.com/epistemex/huewheel (which is under a MIT license)
function rgb2hsl(r, g, b){
r /= 255;
g /= 255;
b /= 255;

var maxColor = Math.max(r, g, b),
minColor = Math.min(r, g, b),
d = (maxColor - minColor),
h = 0,
s = 0,
l = (maxColor + minColor) * 0.5;

if (maxColor !== minColor){

if (l < 0.5) {
s = d / (maxColor + minColor);
} else {
s = d / (2.0 - maxColor - minColor);
}

//Calculate H:
if (r === maxColor) {
h = (g - b) / d;
} else if (g === maxColor) {
h = 2.0 + (b - r) / d;
} else {
h = 4.0 + (r - g) / d;
}
}

h *= 60;
if (h < 0.0) h += 360.0;

return { h: h, s: s, l: l }
}


// hsl2rgb function ripped away from https://github.com/epistemex/huewheel (which is under a MIT license)
// Credit: https://gist.github.com/aemkei/1325937
function hsl2rgb(h, s, l) {

h /= 60;

var c = [
l += s *= l < 0.5 ? l : 1 - l,
l - h % 1 * s * 2,
l -= s *= 2,
l,
l + h % 1 * s,
l + s
];

return validateRGB(
c[~~h % 6] * 255,
c[(h|16) % 6] * 255,
c[(h|8) % 6] * 255
);
}

// Clamps r, g, b values into [0, 255]
// validateRGB function ripped away from https://github.com/epistemex/huewheel (which is under a MIT license)
function validateRGB(r, g, b) {
return {
r: Math.max(0, Math.min(r|0, 255)),
g: Math.max(0, Math.min(g|0, 255)),
b: Math.max(0, Math.min(b|0, 255))
}
}


// Adapted from http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/
function rotateHue(src, hueShift){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;

var hsl = rgb2hsl(imgPixels.data[i], imgPixels.data[i + 1], imgPixels.data[i + 2]);
var rgb = hsl2rgb(hsl.h + hueShift, hsl.s, hsl.l);

imgPixels.data[i] = rgb.r;
imgPixels.data[i + 1] = rgb.g;
imgPixels.data[i + 2] = rgb.b;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
};

L.Icon.Glyph._precalculatedColorIcons = {};

L.Icon.Glyph.getColorIconUrl = function(color) {
if (color in L.Icon.Glyph._precalculatedColorIcons) {
return L.Icon.Glyph._precalculatedColorIcons[color];
}

var shift = 0;
switch(color) {
case 'blue': shift = 0; break;
case 'indigo': shift = 30; break;
case 'purple': shift = 60; break;
case 'pink': shift = 90; break;
case 'magenta': shift = 120; break;
case 'red': shift = 150; break;
case 'orange': shift = 180; break;
case 'yellow': shift = 210; break;
case 'lime': shift =-120; break;
case 'green': shift = -90; break;
case 'teal': shift = -60; break;
case 'cyan': shift = -30; break;
default: throw new Error('Unknown colour for getColorIconUrl()');
}

return L.Icon.Glyph._precalculatedColorIcons[color] = rotateHue(L.Icon.Glyph.prototype.options.iconUrl, shift);
};




120 changes: 120 additions & 0 deletions demo-iconcolor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet.Icon.Glyph demo</title>
<meta charset="utf-8" />

<link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet-src.js"></script>

<script type="text/javascript" src="Leaflet.Icon.Glyph.js"></script>

<style>
.map {
width:600px;
height:400px;
margin: 0;
}

.leaflet-marker-icon.sans-serif {
font-weight: bold;
font-family: Sans Serif;
}

</style>
</head>
<body>


<h1>Leaflet.Icon.Glyph</h1>

<p>This <a href='http://www.leafletjs.com'>Leaflet</a> plugin allows you to show glyphs from icon fonts in your map markers.</p>


<h2>Iconless (plain fonts)</a></h2>
<div class='map' id='sans-serif-map'></div>
<p>

If no prefix is specified, then glyphs will be interpreted as plain text. Use the <tt>cssClass</tt> property to apply some styling (e.g. custom typeface):

<code><pre>
&lt;style/>
.leaflet-marker-icon.sans-serif {
font-weight: bold;
font-family: Sans Serif;
}
&lt;/style/>

&lt;script>
L.marker([-20,-20], {icon: L.icon.glyph({ prefix: '', cssClass:'sans-serif', glyph: 'A' }) }).addTo(map);
&lt;/script>
</pre></code></p>




<script>

function fillMapPrefixless(cssClass, glyphs, bgcolors, green) {

var myCenter = new L.LatLng(0, 0);
var map = new L.Map(cssClass + '-map', {center: myCenter, zoom: 2});

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
maxZoom: 24,
maxNativeZoom: 18
}).addTo(map);

var c = L.Icon.Glyph.getColorIconUrl;

L.marker([ 20,-20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[0] , iconUrl: c(bgcolors[0] )}) }).addTo(map);
L.marker([ 20,-10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[1] , iconUrl: c(bgcolors[1] )}) }).addTo(map);
L.marker([ 20, 0], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[2] , iconUrl: c(bgcolors[2] )}) }).addTo(map);
L.marker([ 20, 10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[3] , iconUrl: c(bgcolors[3] )}) }).addTo(map);
L.marker([ 20, 20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[4] , iconUrl: c(bgcolors[4] )}) }).addTo(map);

L.marker([ 10,-20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[5] , iconUrl: c(bgcolors[5] )}) }).addTo(map);
L.marker([ 10,-10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[6] , iconUrl: c(bgcolors[6] )}) }).addTo(map);
L.marker([ 10, 0], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[7] , iconUrl: c(bgcolors[7] )}) }).addTo(map);
L.marker([ 10, 10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[8] , iconUrl: c(bgcolors[8] )}) }).addTo(map);
L.marker([ 10, 20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[9] , iconUrl: c(bgcolors[9] )}) }).addTo(map);

L.marker([ 0,-20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[10], iconUrl: c(bgcolors[10]) }) }).addTo(map);
L.marker([ 0,-10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[11], iconUrl: c(bgcolors[11]) }) }).addTo(map);
L.marker([ 0, 0], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[12], iconUrl: c(bgcolors[12]), glyphColor: green ? '#9BFF8C' : 'white' }) }).addTo(map);
L.marker([ 0, 10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[13], iconUrl: c(bgcolors[13]) }) }).addTo(map);
L.marker([ 0, 20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[14], iconUrl: c(bgcolors[14]) }) }).addTo(map);

L.marker([-10,-20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[15], iconUrl: c(bgcolors[15]) }) }).addTo(map);
L.marker([-10,-10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[16], iconUrl: c(bgcolors[16]) }) }).addTo(map);
L.marker([-10, 0], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[17], iconUrl: c(bgcolors[17]) }) }).addTo(map);
L.marker([-10, 10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[18], iconUrl: c(bgcolors[18]) }) }).addTo(map);
L.marker([-10, 20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[19], iconUrl: c(bgcolors[19]) }) }).addTo(map);

L.marker([-20,-20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[20], iconUrl: c(bgcolors[20]) }) }).addTo(map);
L.marker([-20,-10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[21], iconUrl: c(bgcolors[21]) }) }).addTo(map);
L.marker([-20, 0], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[22], iconUrl: c(bgcolors[22]) }) }).addTo(map);
L.marker([-20, 10], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[23], iconUrl: c(bgcolors[23]) }) }).addTo(map);
L.marker([-20, 20], {icon: L.icon.glyph({ className: cssClass, glyph: glyphs[24], iconUrl: c(bgcolors[24]) }) }).addTo(map);

}

// Sans-serif plain font
fillMapPrefixless('sans-serif',[
'A' , 'B' , 'C' , 'D' , 'E' ,
'F' , 'G' , 'H' , 'I' , 'J' ,
'1' , '2' , '3' , '4' , '5' ,
'!' , '@' , '#' , '$' , '£' ,
'+' , '-' , '*' , '/' , ':'
], [
'blue' , 'indigo' , 'purple' , 'pink' , 'magenta' ,
'green' , 'lime' , 'yellow' , 'orange' , 'red' ,
'teal' , 'cyan' , 'blue' , 'indigo' , 'purple' ,
'yellow' , 'orange' , 'red' , 'magenta' , 'pink' ,
'lime' , 'green' , 'teal' , 'cyan' , 'blue'
], false);

</script>
</body>
</html>