+{% extends "base.html" %}
+{% load cache %}
+{% load static %}
{% load l10n %}
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
- integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
- crossorigin=""/>
- <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
- integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
- crossorigin=""></script>
-
-<div id="map" style="height: 100%"></div>
-<script>
- var map = L.map('map').setView([51.505, -0.09], 8);
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
- }).addTo(map);
-
- {% localize off %}
- {% for e in entities %}
- L.marker(
- [{{ e.lat }}, {{ e.lon }}],
- {
- title: "{{ e.label }}",
- alt: "{{ e.label }}",
- }
- ).bindPopup("\
-<h1>{{ e.label }}</h1>\
-{% for ref in e.reference_set.all %}\
-<a href='/katalog/lektura/{{ ref.book.slug }}.html#{{ ref.first_section }}'>\
- {{ ref.book.title }}\
-</a>\
-{% endfor %}\
- ").addTo(map);
- {% endfor %}
- {% endlocalize %}
-</script>
+{% block global-content %}
+
+ <div id="references-map"></div>
+
+{% endblock %}
+
+
+{% block extrahead %}
+ <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet-1.9.4/leaflet.css' %}">
+ <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet.markercluster-1.4.1/MarkerCluster.css' %}">
+ <link rel="stylesheet" type="text/css" media="all" href="{% static 'contrib/leaflet.markercluster-1.4.1/MarkerCluster.Default.css' %}">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="Mapa Wolnych Lektur">
+ <meta property="og:image" content="{% static 'references/preview.png' %}">
+ <meta property="og:image:alt" content="Mapa miejsc w książkach na Wolnych Lekturach">
+ <meta property="og:image:width" content="1200">
+ <meta property="og:image:height" content="630">
+
+{% endblock %}
+
+
+{% block extrabody %}
+ <script src="{% static 'contrib/leaflet-1.9.4/leaflet.js' %}"></script>
+ <script src="{% static 'contrib/leaflet.markercluster-1.4.1/leaflet.markercluster.js' %}"></script>
+ <script>
+ var map = L.map('references-map').setView([52, 20], 7);
+ L.Icon.Default.imagePath='{{ STATIC_URL }}contrib/leaflet-1.9.4/images/'
+
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(function(position) {
+ map.setView(
+ [position.coords.latitude, position.coords.longitude], 8,
+ {
+ animate: true,
+ }
+ );
+ });
+ }
+
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+ }).addTo(map);
+ var markers = L.markerClusterGroup();
+
+ function showMarker(m) {
+ $.get(
+ '/mapa/popup/' + m.target.options.mid,
+ function(data) {
+ let p = L.popup({minWidth: 340}).setLatLng(m.latlng).setContent(data);
+ map.openPopup(p);
+ }
+ );
+ }
+
+ {% cache 60 references-map %}
+ {% localize off %}
+ {% for e in entities %}
+ L.marker(
+ [{{ e.lat }}, {{ e.lon }}],
+ {
+ title: "{{ e.label }}",
+ alt: "{{ e.label }}",
+ mid: {{ e.pk }},
+ }
+ ).on('click', showMarker).addTo(markers);
+ {% endfor %}
+ {% endlocalize %}
+ {% endcache %}
+
+ map.addLayer(markers);
+
+ </script>
+{% endblock %}
+
+
+{% block footer %}
+{% endblock %}