Working with position directive

Example how to work with position directive

Source code:
		  <link rel="stylesheet" href="js/exampleposition.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 POSIZIONAMENTO -->'
        <div style="float:left; border: 1px; width: 100%; background-color:#e8e8e8;">
            <position-directive mapid="mappa1" template='js/template/cursor_position.html'></position-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);