friendsmap/map/templates/map/map.html

30 lines
1.2 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 content %}
<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.0832, 2.3785], 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 location in locations %}
marker = L.marker([{{ location.latitude_str }}, {{ location.longitude_str }}]).addTo(map);
marker.bindPopup("{{ location.safe_html|safe }}");
{% endfor %}
</script>
{% endblock %}