116 lines
3.5 KiB
HTML
116 lines
3.5 KiB
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!='0' %} main { top: 0; } {% endif %}
|
|
|
|
{% if mapuser.settings.showStreetview and disp!='0' and disp!='1' %}
|
|
/* show both */
|
|
@media (orientation: landscape) {
|
|
#map, #view {
|
|
display: inline-block;
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
#view { float:right; }
|
|
}
|
|
@media (orientation: portrait) {
|
|
#map, #view {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
#view { bottom:0; }
|
|
}
|
|
{% elif mapuser.settings.showStreetview and disp=='1' %}
|
|
/* show streetview */
|
|
#map { display:none; }
|
|
#view {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
{% else %}
|
|
/* show map */
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#view { display:none; }
|
|
{% endif %}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
|
|
{% if user and newuserurl %}
|
|
<div class='page-mask'></div>
|
|
<div id='welcome' class='popup'>
|
|
|
|
<div class='topbar'>
|
|
<h2>Welcome!</h2>
|
|
<div class='close' onclick="$('#welcome').hide();$('.page-mask').hide();">✖️</div>
|
|
</div>
|
|
|
|
<p>This is your map. It's publicly avaliable at <a href="{{newuserurl}}">{{newuserurl}}</a>. You can change that URL and other settings in <b><a href="/settings">settings</a></b>. Set your location by clicking <b>set</b> below. Clear it by clicking <b>clear</b>. To track your location, click <b>track</b> or download the <a href="/android">android app</a>. For more information, see the <b><a href="/help">help</a></b> page. </p>
|
|
|
|
<div class='buttons'>
|
|
<a class='btn main' onclick="$('#welcome').hide();$('.page-mask').hide();">Got it!</a>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div id='map'></div>
|
|
<div id='view'><img id='viewImg' alt="Streetview image"></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 and mapuser._id != 'demo' %}
|
|
<link rel="stylesheet" type="text/css" href="/static/css/.controls.min.css">
|
|
<div id='controls'>
|
|
{% if mapuser.settings.showStreetview and disp!='0' %}
|
|
<style>
|
|
@media (orientation: portrait) {
|
|
#controls { bottom:30px }
|
|
}
|
|
</style>
|
|
{% endif %}
|
|
|
|
<button id='set-loc' class='btn set' title="Click here to set your location">Set</button>
|
|
<button id='track-loc' class='btn track' title="Click here to track your location"><i class='fa fa-crosshairs'></i>Track</button>
|
|
<button id='clear-loc' class='btn clear' title="Click here to clear your location">Clear</button>
|
|
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block javascript %}
|
|
{{super()}}
|
|
|
|
<!-- Variables from server-side -->
|
|
<script>
|
|
const mapuser = JSON.parse('{{mapuser |dump|safe}}'),
|
|
mapKey = "{{mapApi |safe}}",
|
|
noHeader = "{{noHeader |safe}}",
|
|
disp = "{{disp |safe}}", // 0=map, 1=streetview, 2=both
|
|
userid = "{{user._id |safe}}",
|
|
token = "{{user.sk32 |safe}}";
|
|
</script>
|
|
|
|
<!-- Webpacked bundles -->
|
|
<script type="application/javascript" src="/static/js/.map.bun.js"></script>
|
|
{% if user.id == mapuser.id %}
|
|
<script type="application/javascript" src="/static/js/.controls.bun.js"></script>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|