Source code:
<link rel="stylesheet" href="js/example_logger.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 LOGGER -->
<section style="overflow: hidden; border: 1px;">
<div style="overflow: hidden; padding: 10px;">
<fire-logger-directive template="js/template/logMessage.html"></fire-logger-directive>
<fire-log-viewer-directive mapid="mappa1" layer="gpxlayer" minlevel="fire.widget.directive.log.LEVEL.FATAL" template="js/template/logConsole.html"></fire-log-viewer-directive>
</div>
</section>
</div>
var onload = function(){
};
var options = {
modules : [fire.Modules.WIDGET]
,otherScripts : []
,mode : fire.Mode.BUILD
,relative: "../lib/fire/"
};
fire.require(onload, options);
//******************EXAMPLE*************
var exampleJson = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[1134908.4594877376,5483055.791204744]},"properties":null},{"type":"Feature","geometry":{"type":"Point","coordinates":[1169152.2481594966,5321620.7874664515]},"properties":null},{"type":"Feature","geometry":{"type":"Point","coordinates":[1350155.1311387946,5140617.904487154]},"properties":null},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[944121.6368879382,5453703.972343236],[1100664.6708159787,5189537.602589667],[1315911.3424670356,5238457.30069218],[1312498.2662075984,5364741.122291358],[1311019.3726567845,5419460.183671477]]},"properties":null},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[1361166.5324871414,5366056.480839454],[1551953.3550869417,5092106.171465382],[1850363.51351227,5092106.171465382],[1561737.294707444,5473679.816664982],[1361166.5324871414,5366056.480839454]]]},"properties":null}]};
//*********************************************