The code is here on Github.
These markers use font glyphs as icons. This lets you display markers at any size without degradation of quality. You don't need to worry about the resolution of the display, retina displays work as well as any other, and you can adjust the size of the marker to the map level being displayed.
.The demo shows the font markers using two fonts, Iconic and Font Awesome. The Font Awesome markers are to the right of the Iconic markers and slightly darker.
The features displayed by the demo include:
In order to show font markers you need to include the cilogi-marker.css
file in the header
of your page, as well at the cilogi-marker.min.js
JavaScript file. This file needs to be
included after the JavaScript for the Leaflet library. There are no other dependencies.
You create a new marker as follows:
new cilogi.L.Marker(latLng, {
<options>
});
The options are:
fontIconSize
. The font-size of the glyph in ems. The size of
an em will be specified in a parent element. If you wish the size of the marker
to vary with level it is usual to have a function which computes the size at each level and
to pass in the value of this function at the current map level. The function used in this demo is:
function computeSizeFromZoom() {
var max = map.getMaxZoom(),
zoom = map.getZoom(),
diff = max - zoom,
table = [2, 1, 0.5];.
return (diff < table.length) ? table[diff] : 0.5;
}
The table
variable specifies a font size of 2 at the maximum zoom level of the map,
a font size of 1 at the next lower level, and 0.5 thereafter. By default a value of 0.5 or lower will
show a pin glyph without bubble.
fontIconFont
. The name of the font to which the glyph belongs.
The default is iconic, which is supplied in the distribution.fontIconColor
. The base color of the bubble, or of the glyph is there is no bubble. The default is blue.
In addition to color names you can also supply colors of the form #rrggbb.fontIconName
. The character value of the font glyph when showing a bubble. The default is a map pin for iconic
and awesome and an error value for other fonts. If the fontIconName is the same as the altIconName
then a glyph-only marker is shown at all sizes.altIconName
. The glyph to be shown for glyph-only display, when the map level is low (i.e. a large area shown. The
default for the iconic and awesome fonts is a map pin.altThresh
. The font size threshold at which the glyph-only version of the marker is shown. This will
show the altIconName glyph when fontIconSize is at or below this threshold.