2016-03-31 17:06:21 -06:00
{% extends 'templates/base.html' %}
2017-04-13 22:45:25 -06:00
{% block title %}{{super()}}{% if mapuser.name %} | {{mapuser.name}}{% endif %}{% endblock %}
2016-03-31 17:06:21 -06:00
{% block head %}
2016-06-04 04:54:57 -06:00
{{super()}}
2017-04-12 18:38:06 -06:00
< link href = "/static/css/.map.min.css" rel = "stylesheet" >
2017-04-14 18:18:20 -06:00
< style > / * T h e s e s t y l e s i n c l u d e v a l u e s p a s s e d f r o m t o t h e t e m p l a t e f r o m t h e s e r v e r . O t h e r s t y l e s a r e i n m a p . c s s * /
2017-04-25 11:44:11 -06:00
{% if noHeader!='0' %} main { top:0; } {% endif %}
2016-03-31 17:06:21 -06:00
2016-05-31 21:54:21 -06:00
{% if mapuser.settings.showStreetview and disp!='0' and disp!='1' %}
2016-03-31 17:06:21 -06:00
/* show both */
2016-05-31 21:54:21 -06:00
@media (orientation: landscape) {
#map, #pano {
2017-04-14 18:18:20 -06:00
display: inline-block;
width: 50%;
height: 100%;
}
2016-05-31 21:54:21 -06:00
#pano { float:right; }
2016-03-31 17:06:21 -06:00
}
@media (orientation: portrait) {
#map, #pano {
2017-04-14 18:18:20 -06:00
width: 100%;
height: 50%;
2016-03-31 17:06:21 -06:00
}
#pano { bottom:0; }
2016-06-04 04:54:57 -06:00
}
2016-05-31 21:54:21 -06:00
{% elif mapuser.settings.showStreetview and disp=='1' %}
2016-03-31 17:06:21 -06:00
/* show streetview */
2017-04-14 18:18:20 -06:00
#map { display:none; }
2016-03-31 17:06:21 -06:00
#pano {
2017-04-14 18:18:20 -06:00
width: 100%;
height: 100%;
}
2016-03-31 17:06:21 -06:00
{% else %}
/* show map */
#map {
2017-04-14 18:18:20 -06:00
width: 100%;
height: 100%;
}
#pano { display:none; }
2016-03-31 17:06:21 -06:00
{% endif %}
< / style >
{% endblock %}
{% block main %}
2016-06-04 04:54:57 -06:00
2017-05-08 18:12:58 -06:00
{% if user and newuserurl %}
< div id = 'welcome' >
< style >
#welcome {
background: #111;
padding: 3vw;
border-radius: 2vw;
z-index: 50;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#welcome h1 {
display: inline-block;
}
#welcome p {
margin: 0;
}
#welcome .close {
cursor: pointer;
float: right;
}
< / style >
< h1 > Welcome!< / h1 >
< span class = 'close' onclick = "$('#welcome').hide();" > ✖️< / span >
< p > This is your map. It's avaliable at < a href = "{{newuserurl}}" > {{newuserurl}}< / a > . You can change that 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 < a href = "/help" > the help page< / a > . < / p >
< / div >
{% endif %}
2017-04-14 18:18:20 -06:00
< div id = 'map' > < / div >
< div id = 'pano' > < / div >
2016-06-04 04:54:57 -06:00
2017-04-14 18:18:20 -06:00
< div id = 'notset' class = 'centered alert alert-warning' >
2016-05-31 21:54:21 -06:00
{% if user.id == mapuser.id %}
2017-04-14 18:18:20 -06:00
Your location is unset. You can click 'set' below to set it to your current position.
{% else %}
This user has no location set.
2016-05-31 21:54:21 -06:00
{% endif %}
2016-03-31 17:06:21 -06:00
< / div >
2017-04-14 18:18:20 -06:00
{% if user.id == mapuser.id %}
< div id = 'controls' >
{% if mapuser.settings.showStreetview and disp!='0' %}
< style >
@media (orientation: portrait) {
#controls { bottom:30px }
}
< / style >
{% endif %}
2017-03-13 23:52:54 -06:00
2017-04-17 23:05:54 -06:00
< button id = 'set-loc' class = 'btn set' title = "Click here to set your location" > Set< / button >
2017-04-26 22:49:11 -06:00
< button id = 'track-loc' class = 'btn track' title = "Click here to track your location" > < i class = 'fa fa-crosshairs' > < / i > Track< / button >
2017-04-17 23:05:54 -06:00
< button id = 'clear-loc' class = 'btn clear' title = "Click here to clear your location" > Clear< / button >
2017-04-13 22:45:25 -06:00
2017-04-14 18:18:20 -06:00
< / div >
{% endif %}
{% endblock %}
{% block javascript %}
{{super()}}
2017-05-06 12:51:02 -06:00
< script type = "application/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 = "application/javascript" src = "https://maps.googleapis.com/maps/api/js?key={{mapApi}}&callback=gmapsCb" async defer > < / script >
< script type = "application/javascript" src = "/static/js/.map.min.js" > < / script >
{% if user.id == mapuser.id %}< script type = "application/javascript" src = "/static/js/.map-controls.min.js" > < / script > {% endif %}
2017-04-14 18:18:20 -06:00
< script > / * V a r i a b l e s f r o m s e r v e r * /
2016-05-05 19:13:01 -06:00
2017-04-14 18:18:20 -06:00
const mapuser = JSON.parse('{{mapuser |dump|safe}}'),
2017-04-25 11:44:11 -06:00
noHeader = "{{noHeader |safe}}",
disp = "{{disp |safe}}", // 0=map, 1=streetview, 2=both
userid = "{{user._id |safe}}",
token = "{{user.sk32 |safe}}";
2016-06-04 04:54:57 -06:00
2016-03-31 17:06:21 -06:00
< / script >
2016-06-12 18:18:34 -06:00
2017-04-14 18:18:20 -06:00
{% endblock %}