I am trying to face a little problem i have encountered with.
I am designing a map in leaflet. What i want to achieve is add a HTML label above each marker in a leaflet map, like in this photoshoped example:
Ok the code for each label to display it is:
HTML
<table>
<tr>
<td class="red"></td>
<td class="yellow"></td>
<td class="orange"></td>
<td class="blue"></td>
</tr>
</table>
CSS
table{
border-collapse: collapse;
}
td{
padding:20px;
border:5px solid black;
}
.red{
background-color:#F15E66;
}
.yellow{
background-color:#FFDB64;
}
.orange{
background-color:#F58326;
}
.blue{
background-color:#85B1DE;
}
check https://jsfiddle.net/YameenYasin/cx1ka3Ly/ for the live code.
Ok the problem comes when leaflet labels only allow to add one unique CSS entry for each label. Example:
marker.bindLabel('<table><tr><td class="red"></td><td class="yellow"></td><td class="orange"></td><td class="blue"></td></tr></table>',
{noHide: true, className: "onlyone", offset: [-10, -40] });
Notice the className: “onlyone” property. I can only put one css there and the “class” tags added in the html code are not executed (they do not work).
My conclusion is that i need to add all the CSS code in only one classname called “onlyone” so that then i can do className: “onlyone”.
Is this possible?
Regards,
2
Answers
It’s possible to add a single class to the
tr
and then target the children by ‘number’ usingnth-child
as follows.Here you are:
https://jsfiddle.net/cx1ka3Ly/2/