Font icons for Leaflet markers

The code is here on Github.

Motivation

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.

.

This demo

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:

  • At low map levels the marker is displayed using just a glyph (pin by default), to save space.
  • At higher levels, where the separation between markers is higher, a bubble icon is used, styled with CSS
  • The marker size can vary depending on the map level being displayed.
  • Any suitable icon font can be used as a source of glyphs.

Usage

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.