Micello Javascript SDK offers a wealth of configuration options for styling the user interface of Micello maps. Additional mouse and keyboard functionality has also been added.

Mouse and Keyboard Support

Scroll wheel - The mouse scroll wheel is now tied to the map's zoom in/out function. When zooming with the mouse wheel the mouse position is used as the center of the zoom.
Keyboard Zoom - The '+' and '-' keys at the top of the keyboard now control the zoom as well.
Arrow Keys - The keyboard arrow keys now reposition the map within its container.
 
Customizing the UI

The main components of the Micello UI are the Community Name, Drawing Selector, Level Selector, Zoom Control, and Micello Attribution.  This tutorial will address all configuration options for each component, then discuss some of the most common configurations.

To get started styling the GUI, the first step is to get the MapGUI object during map initialization.  This is most easily done in this manner:

function  mapInit  ()  {
    mapControl  =  new  micello.maps.MapControl('mapElement');
    mapGui  =  mapControl.getMapGUI();  //  get  the  MapGUI  object
    //   configuration  of  the  GUI  will  go  here
    mapData.loadCommunity(15);
}

The variable mapGui is now ready to accept configuration options.

Terms:
"conditional" - When a UI component's VIEW  setting is set to "conditional" it will disappear after several seconds of inactivity and reappear when user interaction is detected.
"position" - The positions of each component are defined by region.  Not all positions are allowed for each component.  The position names are:
 
left top
left center
left bottom
right top
right center
right bottom
center top
center bottom

NAME: The Community Name

The NAME_ configuration options style the Community Name which appears at the top of all Micello maps.  It can be configured by including the following lines in the area identified in the previous code example. There are three configuration options pertaining to NAME:
 
mapGui.NAME_VIEW - Controls the display of the Community Name.
mapGui.NAME_POSITION - The name of the position to place the name.
mapGui.NAME_COLOR - The text color of the name.

DRAWING: The Drawing Selector

The drawing selector's position is dependent on the position of the community name. If the name is in the left top the drawing selector will appear to the left of the name. If the name is aligned to the right, the drawing selector will appear to the right.
 
mapGui.DRAWING_BG - The background color of the drawing selector menu.
mapGui.DRAWING_ACTIVE_BG - The background color of the currently selected drawing.
mapGui.DRAWING_HOVER_BG - The background color when hovered ( mouse ).
mapGui.DRAWING_COLOR - The text color for drawing names.
mapGui.DRAWING_HOVER_COLOR - The text color for drawing names when hovered.

 

ZOOM: The Zoom Control

mapGui.ZOOM_VIEW - Controls the display of the zoom control.
mapGui.ZOOM_POSITION - The name of the position for the zoom control.
mapGui.ZOOM_DISPLAY - Specifies whether the zoom control is horizontal or vertical.
mapGui.ZOOM_COLOR - The color of the '+' and '-' on the zoom control.
mapGui.ZOOM_BG - The background color of the zoom control.
mapGui.ZOOM_BG_ACTIVE - The background color after a click. ( click indication )
 
mapGui.ZOOM_HOVER_COLOR - The mouse hover color of the '+' and '-'
mapGui.ZOOM_HOVER_BG_COLOR - The mouse hover color of the zoom control background

 

LEVELS:  The Level Selector

mapGui.LEVELS_VIEW - Controls the display of the level selector.
mapGui.LEVELS_POSITION - The name of the position for the level selector.
mapGui.LEVELS_COLOR - The text color for the level selector.
mapGui.LEVELS_ACTIVE_COLOR - The text color of the currently selected level.
mapGui.LEVELS_BG - The background color of the level selector.
mapGui.LEVELS_BG_ACTIVE - The background color of the currently selected level.

 

ATTRIBUTION:  Micello attribution

mapGui.ATTRIBUTION_POSITION - The name of the position where attribution will go.

 

GEO INDICATORS:  Map Scale and Orientation

The 'GEO indicators' UI element contains a map scale indicator and a compass that points to the North. Both elements have a toggle effect when clicked. Clicking the map scale will change the units between standard and metric, while clicking the compass will toggle between 'north-top' and 'default' orientations. These toggle behaviors are configurable.
 
mapGui.GEO_VIEW - Controls the display of the geo indicators.
mapGui.GEO_UNITS - Defines the units of measure used for the scale on initial loading. (standard/metric)
mapGui.GEO_UNITS_TOGGLE - Enables toggling of units used for the map scale between standard and metric.
mapGui.GEO_ORIENT_TOGGLE - Enables toggling of the map orientation between 'north-top' and 'default'.
mapGui.GEO_POSITION - The name of the position where the geo indicators will go.

Note: - If a custom angle of rotation is specified using mapView.setBaseAngRad(), the compass element will not appear.
 
Common Configurations

The default configuration is pictured at the top of this tutorial. The name, drawing selector ( if applicable ), and level selector appear in the upper left, the zoom at center bottom and the Micello attribution in the lower left.

To move the zoom control back to where it used to be in the upper-right, simply configure like this:

function  mapInit  ()  {
    mapControl  =  new  micello.maps.MapControl('mapElement');
    mapGui  =  mapControl.getMapGUI();
    mapGui.ZOOM_POSITION  =  'right  top';
    mapData.loadCommunity(15);
}

To change all uses of 'Micello blue' to another color:

function  mapInit  ()  {
    mapControl  =  new  micello.maps.MapControl('mapElement');
    mapGui  =  mapControl.getMapGUI();
    mapGui.DRAWING_ACTIVE_BG  =  '#008822';  //  green
    mapGui.ZOOM_BG_ACTIVE  =  '#008822';
    mapGui.LEVELS_BG_ACTIVE  =  '#008822';
    mapData.loadCommunity(15);
}