title = "ThereAbout Client"
url = "/thereabout-client"
layout = "default"
is_hidden = 0
==
{% put styles %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<link rel="stylesheet" href="http://www.spheraware.com/spherapps/thereabout/thereabout.min.css" />
{% endput %}

<br>

<div id="map"></div>

<div id="marker-panel" class="content-panel">
	<div id="marker-selector-control" class="sphera-control">
		<div id="marker-selector-control-content">
			<i class="fa fa-map-marker" aria-hidden="true"></i>
		</div>
	</div>
	<div id="marker-panel-body">
		<div id="marker-panel-toolbox">
			<div id="marker-panel-inner-toolbox">
				<div class="marker-panel-tool" id="marker-panel-tool-new-marker">
					<i class="fa fa-map-marker" aria-hidden="true" style="font-size:1.1em;"></i>

					
					<i class="fa fa-plus" aria-hidden="true" style="
						font-size: 0.6em;
						margin-left: 0.3em;
					position: absolute;"></i>
					
					
					<font style="
						font-size: 0.6em;
						overflow: visible;
						display: block;
						margin-left: 1.75em;
						margin-top: -1.7em;
					">Add<br>Point</font>
				</div>
				<div class="marker-panel-tool" id="marker-panel-tool-remove-all">
					<i class="fa fa-map-marker" aria-hidden="true" style="
						margin-left: -0.05em;
						margin-top: 0.4em;
					"></i>
					<i class="fa fa-ban" aria-hidden="true" style="
						position: absolute;
						margin-left: -.64em;
						font-size: 1.35em;
						margin-top: 0.15em;
						color: rgba(166,46,46,0.9);		
					"></i>
						&nbsp;&nbsp;&nbsp;
					<font style="
						font-size: 0.6em;
						overflow: visible;
						display: block;
						margin-left: 1.55em;
						margin-top: -1.7em;
					">Remove<br>All</font>
				</div>
			</div>
		</div>
		<div id="marker-panel-list">
		</div>
	</div>
	
</div>

<div id="content-panel" class="content-panel">

	<div id="content-panel-control" class="sphera-control">
		<div id="content-panel-control-content">
			<i class="fa fa-info-circle" aria-hidden="true"></i>
		</div>
	</div>
	<div id="content-panel-shade" style='opacity:0;'></div>
</div>


{% put scripts %}
<script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.3/URI.min.js"></script>
<script src="http://www.spheraware.com/spherapps/thereabout/thereabout.min.js"></script>
<script src="https://use.fontawesome.com/48c6198591.js"></script>

<script>

// Load the application when the DOM is fully loaded
$(function() {	
	ThereAbout();		// this is where the magic happens
	
	$.ajax({  
        type: "POST",  
        url: "https://www.spheraware.com/log-stats",  
        data: { 
            comment: "N/A",
            fileLoaded: "Thereabout-Client",
            logfile: "stats_webapps.csv"
        }
    });
} );
	
</script>
{% endput %}