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-08-22 17:32:25 -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-08-22 17:32:25 -06:00
{% if noHeader!='0' %} main { top: 0; } {% endif %}
2018-02-01 09:02:12 -07:00
2017-09-27 12:11:49 -06:00
{% if mapuser.settings.showStreetview and disp=='2' %}
2016-03-31 17:06:21 -06:00
/* show both */
2016-05-31 21:54:21 -06:00
@media (orientation: landscape) {
2017-09-16 20:33:27 -06:00
#map, #view {
2017-04-14 18:18:20 -06:00
display: inline-block;
width: 50%;
height: 100%;
}
2017-09-16 20:33:27 -06:00
#view { float:right; }
2016-03-31 17:06:21 -06:00
}
@media (orientation: portrait) {
2017-09-16 20:33:27 -06:00
#map, #view {
2017-04-14 18:18:20 -06:00
width: 100%;
height: 50%;
2016-03-31 17:06:21 -06:00
}
2017-09-16 20:33:27 -06:00
#view { 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; }
2017-09-16 20:33:27 -06:00
#view {
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%;
}
2017-09-16 20:33:27 -06:00
#view { display:none; }
2016-03-31 17:06:21 -06:00
{% endif %}
< / style >
{% endblock %}
{% block main %}
2018-03-12 18:45:13 -06:00
< div id = 'inactive-mask' class = 'page-mask' > < / div >
< div id = 'inactive-message' class = 'popup' style = "display:none" >
< p > The map has been deactivated due to inactivity. Move the mouse around the page to reactivate the map. < / p >
< / div >
2016-06-04 04:54:57 -06:00
2018-02-01 09:02:12 -07:00
{% if user and user.isNewUser %}
2018-03-12 18:45:13 -06:00
< div id = 'welcome-mask' class = 'page-mask' style = "display:block" > < / div >
2017-05-19 16:45:18 -06:00
< div id = 'welcome' class = 'popup' >
2018-02-01 09:02:12 -07:00
2017-05-19 18:21:49 -06:00
< div class = 'topbar' >
< h2 > Welcome!< / h2 >
2018-03-12 18:45:13 -06:00
< div class = 'close' onclick = "$('#welcome').hide();$('#welcome-mask').hide();" > ✖️< / div >
2017-05-19 18:21:49 -06:00
< / div >
2018-02-01 09:02:12 -07:00
2017-05-19 18:21:49 -06:00
< 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 >
2018-02-01 09:02:12 -07:00
2017-05-19 18:21:49 -06:00
< div class = 'buttons' >
2018-03-12 18:45:13 -06:00
< a class = 'btn main' onclick = "$('#welcome').hide();$('#welcome-mask').hide();" > Got it!< / a >
2017-05-19 18:21:49 -06:00
< / div >
2018-02-01 09:02:12 -07:00
2017-05-08 18:12:58 -06:00
< / div >
{% endif %}
2018-02-01 09:02:12 -07:00
2017-09-27 12:11:49 -06:00
<!-- Map -->
{% if disp!='1' %}
< div id = 'map' > < / div >
{% endif %}
2018-02-01 09:02:12 -07:00
2017-09-27 12:11:49 -06:00
<!-- Streetview -->
2017-09-27 21:03:39 -06:00
{% if mapuser.settings.showStreetview and disp!='0' %}
2017-09-27 12:11:49 -06:00
< div id = 'view' > < img id = 'viewImg' alt = "Streetview image" / > < / div >
{% endif %}
2018-02-01 09:02:12 -07: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 %}
2018-02-01 09:02:12 -07:00
This user has no location set.
2016-05-31 21:54:21 -06:00
{% endif %}
2016-03-31 17:06:21 -06:00
< / div >
2018-02-01 09:02:12 -07:00
2017-06-27 11:49:36 -06:00
{% if user.id == mapuser.id and mapuser._id != 'demo' %}
2017-08-22 17:32:25 -06:00
< link rel = "stylesheet" type = "text/css" href = "/static/css/.controls.min.css" >
2017-04-14 18:18:20 -06:00
< div id = 'controls' >
{% if mapuser.settings.showStreetview and disp!='0' %}
< style >
@media (orientation: portrait) {
#controls { bottom:30px }
}
< / style >
{% endif %}
2018-02-01 09:02:12 -07: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 >
2018-02-01 09:02:12 -07:00
2017-04-14 18:18:20 -06:00
< / div >
{% endif %}
2018-02-01 09:02:12 -07:00
2017-04-14 18:18:20 -06:00
{% endblock %}
{% block javascript %}
{{super()}}
2017-06-23 12:33:17 -06:00
2017-06-23 09:54:33 -06:00
<!-- Variables from server - side -->
2018-03-04 23:50:12 -07:00
<!-- TODO: Move to own script file, maybe with https://github.com/brooklynDev/JShare -->
2017-06-23 09:54:33 -06:00
< script >
2018-03-08 19:19:48 -07:00
const mapuser = JSON.parse('{{mapuser |dump|safe}}')
const mapKey = '{{mapKey|safe}}'
const noHeader = "{{noHeader |safe}}"
const disp = "{{disp |safe}}" // 0=map, 1=streetview, 2=both
const userid = "{{user._id |safe}}"
const token = "{{user.sk32 |safe}}"
2016-03-31 17:06:21 -06:00
< / script >
2018-02-01 09:02:12 -07:00
2018-03-08 14:26:41 -07:00
<!-- Imports -->
2018-03-08 19:19:48 -07:00
< script type = "application/javascript" src = "https://maps.googleapis.com/maps/api/js?key={{mapKey|safe}}&callback=initMap"
2018-03-08 14:26:41 -07:00
async defer>< / script >
< script type = "application/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.slim.js" integrity = "sha256-jniDwC1PC9OmGoyPxA9VpGvgwDYyxsMqu5Q4OrF5wNY=" crossorigin = "anonymous" > < / script >
2018-03-08 14:29:55 -07:00
< script type = "application/javascript" src = "/static/js/.map.min.js" > < / script >
2018-02-01 09:02:12 -07:00
2017-08-22 17:32:25 -06:00
{% endblock %}