friendsmap/map/templates/map/map.html

48 lines
1.9 KiB
HTML

{% extends 'map/base.html' %}
{% load static %}
{% block add-head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
{% endblock %}
{% block title %}Map{% endblock %}
{% block content %}
{% if not friend.shares_location_to.all %}
<div class="alert alert-warning">
<h4 class="alert-heading">You're not sharing</h4>
<div>
You're not sharing your location with anyone.<br>
{{ friend.is_shared_location_by.count }} user(s) are sharing their location with you.
</div>
</div>
{% endif %}
<div id="map"></div>
{% endblock %}
{% block js %}
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<script type="application/javascript">
let map = L.map('map').setView([47.06121, 2.41319], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let marker = null;
{% for relative in friend.is_shared_location_by.all %}
{% with relative.location as location %}
marker = L.marker([{{ location.latitude_str }}, {{ location.longitude_str }}]).addTo(map);
marker.bindPopup("{{ location.safe_html|safe }}");
{% endwith %}
{% endfor %}
{% with friend.location as location %}
marker = L.marker([{{ location.latitude_str }}, {{ location.longitude_str }}]).addTo(map);
marker.bindPopup("{{ location.safe_html|safe }}");
{% endwith %}
</script>
{% endblock %}