tracman-server/views/map.html

{% extends 'templates/base.html' %}
{% block title %}{{super()}}{% if mapuser.name %} | {{mapuser.name}}{% endif %}{% endblock %}

{% block head %}
	{{super()}}
	<link href="/static/css/.map.min.css" rel="stylesheet">
	<style>/* These styles include values passed from to the template from the server.  Other styles are in map.css */
		{% if noHeader=='1' %} main { top:0; } {% endif %}
		
		{% if mapuser.settings.showStreetview and disp!='0' and disp!='1' %}
		/* show both */
			@media (orientation: landscape) {
					#map, #pano {
						display: inline-block;
						width: 50%;
						height: 100%;
					}
					#pano { float:right; }
				}
			@media (orientation: portrait) {
				#map, #pano {
					width: 100%;
					height: 50%;
				}
				#pano { bottom:0; }
		}
		{% elif mapuser.settings.showStreetview and disp=='1' %}
		/* show streetview */
			#map { display:none; }
			#pano {
				width: 100%;
				height: 100%;
			}
		{% else %}
		/* show map */
			#map {
				width: 100%;
				height: 100%;
			}
			#pano { display:none; }
		{% endif %}
	</style>
{% endblock %}

{% block main %}

	<div id='map'></div>
	<div id='pano'></div>
	
	<div id='notset' class='centered alert alert-warning'>
		{% if user.id == mapuser.id %}
			Your location is unset. You can click 'set' below to set it to your current position.
		{% else %}
			This user has no location set.  
		{% endif %}
	</div>
	
	{% if user.id == mapuser.id %}
		<div id='controls'>
		{% if mapuser.settings.showStreetview and disp!='0' %}
			<style>
				@media (orientation: portrait) {
					#controls { bottom:30px }
				}
			</style>
		{% endif %}
			
			<button class='btn set' onclick="setLocation()">Set</button>
			<button class='btn track' onclick="trackLocation()" data-toggle="tooltop" title="Tracking location..." data-trigger="manual"><i class='fa fa-crosshairs'></i>&emsp;Track</button>
			<button class='btn clear' onclick="clearLocation()">Clear</button>
			
		</div>
	{% endif %}
	
{% endblock %}

{% block javascript %}
{{super()}}
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js" integrity="sha256-WKvqiY0jZHWQZIohYEmr9KUC5rEaYEOFTq+ByllJK8w=" crossorigin="anonymous"></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{mapApi}}&callback=gmapsCb" async defer></script>
	<script type="text/javascript" src="/static/js/.map.min.js"></script>
	{% if user.id == mapuser.id %}<script type="text/javascript" src="/static/js/.map-controls.min.js"></script>{% endif %}
	<script> /* Variables from server */
		
		const mapuser = JSON.parse('{{mapuser |dump|safe}}'),
			noHeader = {{noHeader |dump|safe}},
			disp = {{disp |dump|safe}}; // 0=map, 1=streetview, 2=both
			
		{% if user %}
			const userid = {{user._id |dump|safe}},
				token = {{user.sk32 |dump|safe}};
		{% endif %}
		
	</script>
	
{% endblock %}