The main components of the Micello UI are the Community Name, Drawing Selector, Level Selector, Zoom Control, and Micello Attribution. This will show a quick example of how to move some of the most common UI Elements around the Map. For a more in depth description, refer to the full documentation guide

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  options for the  GUI  will  go  here
         mapData.loadCommunity(15);
}

Once established, the MapGUI configuration options are added to the example to move the elements to specified locations on the screen (left top, right top, center bottom, etc). A simple example is to move the Zoom to the upper right portion of the map:

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

Toggle to move the zoom position in below example.