The-Hunt/app/templates/game_player.html

{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/leaflet/leaflet.css') }}" />
<script src="{{ url_for('static', filename='assets/leaflet/leaflet.js') }}"></script>
{% endblock %}

{% block app_content %}
<h1>Player: {{ user.name }}</h1>
<hr>
<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-8">
        <div class="row">
            <form action="" method="post" class="form" role="form">
                {{ form.hidden_tag() }}
                {% for gameplayer in user.user_games if gameplayer.game == game %}
                    {{ wtf.form_field(form.role, class='form-control') }}
                {% endfor  %}
                {{ wtf.form_field(form.submit, class='btn btn-primary', value='Update') }}
            </form>
        </div>
        {% if user.auth_hash %}
            <div class="row">
                <img src="{{ url_for('main.user_qrcode', auth_hash=user.auth_hash) }}" alt="qr_code_failed", width="100%">
            </div>
        {% endif %}
    </div>
    <div id="map" style=" height: 600px; border-radius: 10px; " class="col-md-6 col-xs-12"></div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
<script type="text/javascript", crossorigin="anonymous">
    // Leaflet Map
    '{% set last_location = user.last_location(game) %}'
    var map = L.map( 'map', {
        center: ['{{ last_location.latitude or 52.2 }}', '{{ last_location.longitude or 5.3 }}'],
        minZoom: 6,
        maxZoom: 19,
        bounds: [[50.5, 3.25], [54, 7.6]],
        zoom: 9
    });
    L.control.scale().addTo(map);

    L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
        attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
    }).addTo( map );

    var greenIcon = new L.Icon({
        iconUrl: "{{ url_for('static', filename='assets/leaflet/images/marker-icon-2x-green.png') }}",
        shadowUrl: "{{ url_for('static', filename='assets/leaflet/images/marker-shadow.png') }}",
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });
    
    var locations = JSON.parse('{{ json.dumps(user.locations_during_game(game)), cls=location_encoder)|safe }}')
    for (var i = 0; i < locations.length; i++){
        var playerMarker = L.marker([
            locations[i]['latitude'],
            locations[i]['longitude']
        ], {icon: greenIcon}).addTo(map);
        var timestamp_utc = moment.utc(locations[i]['timestamp_utc']).toDate()
        var timestamp_local = moment(timestamp_utc).local().format('YYYY-MM-DD HH:mm');
        playerMarker.bindTooltip(`<b>${locations[i]['username']}</b><br>
                                    ${timestamp_local}`).openPopup();
    }

    var latlngs = [
    [[45.51, -122.68],
     [37.77, -122.43],
     [34.04, -118.2]],
    [[40.78, -73.91],
     [41.83, -87.62],
     [32.76, -96.72]]
    ];
    var polyline = L.polyline(locations.map(l => [l.latitude, l.longitude]), {color: 'red'}).addTo(map);
    // zoom the map to the polyline
    map.fitBounds(polyline.getBounds());

</script>
{% endblock %}