Working with navigation tools and directives

Example how to work with tools and directives about map navigation

Source code:
		  <link rel="stylesheet" href="js/example_navigazione.css">
  <div>        
    <!--  Sezione mappa -->
    <section style="overflow: hidden; border: 1px;">
      <div>
        <!-- Sezione TOC-->
        <div ng-controller="toccontroller" style="float:left; border: 1px; width: 20%; height: 500px; padding: 10px; border-radius: 5px; margin: auto; border: 1px solid gray;">
          <toc-directive mapid="mappa1" template='js/template/toc.html'></toc-directive>
        </div>

        <!--  Sezione MAPPA -->
        <div ng-controller="maphistorycontroller" style="float:left; border: 1px; width: 80%;" >
          <map-directive  id="mappa1" center="activeCenter" width="100%" height='500' template='js/template/map.html'>
            <osm-layer-directive 
              order=0 
              classname="layerosm" 
              name="OSM"  
              opacity="0.5"
            ></osm-layer-directive>
            <geojson-layer-directive 
              order=1 name="geoJson" 
              classname="layergeojson"  
              opacity="0.7" 
              visible="true"  
              url="js/data/json/countries.json" 
              styles="js/style/geoJsonStyle.json"
            ></geojson-layer-directive>
            <wkt-layer-directive 
              order=3 
              name="Wkt" 
              classname="layerwkt"  
              url="js/data/wkt/wktData" 
              projection="EPSG:3857" 
              styles='js/style/gpxStyle.json'
            ></wkt-layer-directive>
            <gpx-layer-directive
              order=2
              name="gpxlayer" 
              classname="layergpx"  
              url="js/data/gpx/rome.gpx" 
              styles='js/style/gpxStyle.json'
            ></gpx-layer-directive>
            <kml-layer-directive 
              order=4 
              name="Kml" 
              url="js/data/kml/earthquakes.kml" 
              styles="js/style/gpxStyle.json"
            ></kml-layer-directive>
          </map-directive>          
        </div>
      </div>
    </section>

    <!--  Sezione STRUMENTI -->
    <section style="overflow: hidden; border: 1px;">
      <div style="overflow: hidden; padding: 10px;">
        <!--  Sezione NAVIGAZIONE -->'
        <div ng-controller="toolcontroller" style="float:left; width: 100%; height: 100px; background-color:#e8e8e8; border-radius: 5px; margin: auto; border: 1px solid gray;">
          <toolbar-directive mapid='mappa1' target="navigationtoolbar" template='js/template/toolbar_navigazione.html'>
            <!--Zoom-->
            <zoom-directive step="1" label="+" tiplabel="zoom in" direction='ZoomType.ZOOMIN' classname="fire_button"></zoom-directive> 
            <zoom-directive step="1" label="-" tiplabel="zoom out" direction='ZoomType.ZOOMOUT' classname="fire_button"></zoom-directive> 
            <!--Zoom Box-->
            <zoom-box-directive label="Zoom +" tiplabel="zoom box in" direction='ZoomType.ZOOMIN' exclusive=true classname="fire_button fire_button_zoom"></zoom-box-directive>
            <zoom-box-directive label="Zoom -" tiplabel="zoom box out" direction='ZoomType.ZOOMOUT' exclusive=true classname="fire_button fire_button_zoom"></zoom-box-directive>
            <!--Full screen-->
            <full-screen-directive tiplabel="full screen" target="mappa1"></full-screen-directive>
            <!--Zoom slideer-->
            <zoom-slider-directive target="mappa1"></zoom-slider-directive> 
            <!--Overview-->
            <overview-directive tiplabel="overview" target="mappa1" collapsed="true" collapsible="true"></overview-directive>
            <!--Rotate-->
            <rotate-directive label="R" tiplabel="rotate" exclusive="true" classname="fire_button"></rotate-directive>
            <!--Full extent-->
            <full-extent-directive label="FE" tiplabel="full extent" target="mappa1" classname="fire_button"></full-extent-directive>
            <!--Attribution-->
            <attribution-directive tiplabel="attribution" target="mappa1"></attribution-directive>
            <!--Pan-->
            <pan-directive label="P" tiplabel="pan" exclusive=true classname="fire_button"></pan-directive>
            <!--Scale-->
            <scale-directive target="mappa1"></scale-directive>
            <!--Zoom History-->
            <zoom-history-rewind-directive label="<<" tiplabel="zoom rewind" classname="fire_button"></zoom-history-rewind-directive>
            <zoom-history-previous-directive tiplabel="zoom previous" label="<" classname="fire_button"></zoom-history-previous-directive>
            <zoom-history-next-directive tiplabel="zoom next" label=">" classname="fire_button"></zoom-history-next-directive>
            <zoom-history-forward-directive tiplabel="zoom forward" label=">>" classname="fire_button"></zoom-history-forward-directive>
          </toolbar-directive>
        </div>
      </div>
    </section>
  </div>


var onload = function(){
};

var options = {
     modules : [fire.Modules.WIDGET]
    ,otherScripts : []
    ,mode : fire.Mode.BUILD
    ,relative: "../lib/fire/"
};
fire.require(onload, options);