Customizing the fonts used on Micello maps can enhance readability and give the map more personality. The great news is that with a few configuration options almost any font can be displayed on a Micello map.

This tutorial will focus on using default fonts only, for information about custom fonts, see Using Custom Fonts.

The text visible on micello maps can be divided into three categories; UI Text, Map Labels, and Info Window text. Applying fonts to the first two will be covered in this tutorial while the text in info windows should be styled with HTML/CSS.

Setting the UI Font

The font to be used for the UI is defined before map initialization on the mapGUI object:

function mapInit() {
    mapControl = new micello.maps.MapControl('mapElement');
    mapGUI = mapControl.getMapGUI(); // get the mapGUI object
    mapGUI.UI_FONT = "Verdana"; // specify font(s)
    mapData = mapControl.getMapData();
    mapData.loadCommunity(15);   
}

The UI elements that will display in the specified font are the community name, drawings menu, level selector and the geo indicators.

The font value entered will eventually be assigned as a CSS property, so several fallback fonts can be provided as a comma separated string, ex: 'Comic Sans MS, Cooper, Arial'.

The default and absolute last-case fallback font is Arial. See below for a list of fonts.

Setting the Map Font

The font to be used for the map labels is also defined before map initialization, in this case on the mapCanvas object:

function mapInit() {
    mapControl = new micello.maps.MapControl('mapElement');
    mapCanvas = mapControl.getMapCanvas(); // get the mapCanvas object
    mapCanvas.MAP_FONT = "Impact"; // specify font(s)
    mapData = mapControl.getMapData();
    mapData.loadCommunity(15);   
}

Setting Map Capitalization

The map labels can be set to all capital characters by setting MAP_FONT_CAPS to true:

function mapInit() {
    mapControl = new micello.maps.MapControl('mapElement');
    mapCanvas = mapControl.getMapCanvas();
    mapCanvas.MAP_FONT_CAPS = true; // true = ALL CAPS
    mapData = mapControl.getMapData();
    mapData.loadCommunity(15);   
}

Setting Map Font Size

Previously, the size of map labels were defined as ratios. In an effort to make the values more relevant to designers, map labels can now be defined in pixel values.

function mapInit() {
    mapControl = new micello.maps.MapControl('mapElement');
    mapCanvas = mapControl.getMapCanvas(); // get the mapCanvas object
    mapCanvas.MAP_FONT_MIN = "8px"; // set the font in pixels
    mapCanvas.MAP_FONT_MAX = 28; // or as an integer of pixels   
    mapData = mapControl.getMapData();
    mapData.loadCommunity(15);
}

A MAP_FONT_MIN size indicates the minimum size of text that will appear on the map, while MAP_FONT_MAX is the largest that text will display.

Here are two quick examples to drive this concept home. In this first example the MAP_FONT_MIN will be set to 0px, meaning that the labels will show on every geometry no matter how small. The MAP_FONT_MAX will be set to 1000px, allowing the font to grow to an (almost) unlimited size as it's geometry enlarges.

...
    mapCanvas.MAP_FONT_MIN = 0; // or "0px"
    mapCanvas.MAP_FONT_MAX = 1000;
...


In this second example both MAP_FONT_MIN and MAP_FONT_MAX are set to 16px. This means that all labels will display at 16px as long as there is enough room within their geometry.

...
    mapCanvas.MAP_FONT_MIN = 16;
    mapCanvas.MAP_FONT_MAX = 16;
...


The default font sizes are 8px minimum and 28px maximum.

Available Fonts

The following is a list of fonts commonly available on desktop PCs and Macs:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Lucida Console
Lucida Sans Unicode
Palatino Linotype
Tahoma
Times New Roman
Trebuchet MS
Verdana
MS Sans Serif
MS Serif

Unfortunately, these fonts are not available on the Android OS. The available Android fonts are Droid Sans, Droid Sans Mono, and Droid Serif. Droid Sans is the default. Try to specify one of the Android fonts as a fallback to maintain consistency across devices, ex: "Times New Roman, Droid Serif".

Using Custom Fonts ( & WebFonts )

Using your own font on a Micello map is entirely possible. To load a custom font, see the Using Custom Fonts tutorial.

Experiment with some default fonts. Select a new font to reload the map.