Custom icon for Leaflet with dynamic text
Adapted from: https://gist.github.com/comp615/2288108
Install with bower: bower install Leaflet.TextIcon
Link script and css into html (or use wiredep):
<link rel="stylesheet" href="bower_components/Leaflet.TextIcon/leaflet-text-icon.css" />
<script src="bower_components/Leaflet.TextIcon/leaflet-text-icon.js"></script>
Create marker with L.TextIcon:
var icon = new L.TextIcon({ text: '12', color: 'red' });
var marker = L.marker([lat, lng], { icon: icon }).addTo(map);
- color base color of icon; available values:
blue(default),green,red - text text to display inside marker icon; alhough not restricted, should not be longer than 2 characters
- other leaflet icon options; icon and shadow URLs are ignored
- setColor(color) change icon base color; one of
blue,green,red - setText(text) change icon text
marker.options.icon.setColor('green');
marker.options.icon.setText('21');