MathematiciansLibrary/map.html at main · TeaKayB/MathematiciansLibrary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
<link rel="apple-touch-icon" href="favicon.png">

<!-- Dynamic Canonical Tag Engine (Banishes Ahrefs Duplicate Content Errors) -->
    <script>
        (function() {
            const canonicalLink = document.createElement('link');
            canonicalLink.rel = 'canonical';
            // Hardcodes the base URL to point strictly to your master tags index page
            canonicalLink.href = 'https://library.mathsy.space/map.html';
            document.head.appendChild(canonicalLink);
        })();
    </script>

    <title>The Mathematicians' Library: The Stacks Map</title>

    <!-- Official Leaflet Stylesheet & Script -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="canonical" href="https://library.mathsy.space/map">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="" defer></script>

</head>
<body>

<!-- 1. PASTE THIS SIDEBAR ELEMENT RIGHT AT THE TOP OF THE BODY: -->
    <div class="book-spine-sidebar">
        <div class="spine-text">The Mathematicians' Library</div>
    </div>

    <!-- 2. WRAP EVERYTHING ELSE INSIDE THIS MAIN CONTAINER: -->
    <div class="site-content-wrapper">

<header>
        <h1>
        The Mathematicians' Library
        <span class="stacks-subtitle">
            <!-- Elegant, gold-painted nesting symbol to show structural depth -->
            <span class="stacks-branch-symbol">§</span>
            <span>T</span>he <span>S</span>tacks
        </span>
    </h1>
    <p><i>An online companion to <span class="inline-book-title">The Mathematicians' Library</span> by Thomas K. Briggs - <a href="about.html#buy">order your copy here</a><i></i></p>
    <div class="nav-menu">
        <span class="nav-label">View books:</span>
        <a href="index.html" class="nav-btn" id="nav-chapter">by Chapter</a>
        <a href="map.html" class="nav-btn active" id="nav-map">on a Map</a>
        <a href="timeline.html" class="nav-btn" id="nav-timeline">on a Timeline</a>
        <a href="tags.html" class="nav-btn" id="nav-tags">by Theme</a>
        <a href="about.html" class="nav-btn" id="nav-about">About</a>
    </div>
</header>

<main>
    <h2>The Mathematicians' Library Map</h2>
    <p>Humanity's key mathematical works come from all over the globe: explore the geography <i>and</i> history of mathematical development in the map below! Click any location marker to find out more about a book from the history of maths that was published there.</p>
    <p>Note that the <i>exact</i> publication location for many works (especially older ones) is not necessarily known, so positional accuracy may vary between publications.</p>

    <!-- This is the box where the map renders -->
    <div id="map"></div>
    <footer></footer>
    <hr>
    <p style="font-style: italic; text-align: center;"> A <a href="https://mathsy.space" target="_blank">MathsyDotSpace</a> project by <a href="https://mathsy.space">TeaKayB</a></p>

</main>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        // Initialise the map view over global coordinates
        var map = L.map('map').setView([20.0, 0.0], 2);

        // Load the official, standardized global OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a>'
        }).addTo(map);


        const urlParams = new URLSearchParams(window.location.search);
        const focusId = urlParams.get('focus');

        // Fetch your database file
        fetch('data.json')
            .then(res => res.json())
            .then(books => {
                books.forEach(book => {
                    if (book.coords && book.coords.length === 2) {
                        const marker = L.marker(book.coords).addTo(map);

                        const popupContent = `
                            <div style="font-family:sans-serif; max-width:180px;">
                                <img src="${book.image}" alt="${book.alt_text}" style="width:100%; height:90px; object-fit:cover; border-radius:3px;">
                                <b style="color:#1c5235; display:block; margin-top:5px;">${book.title}</b>
                                <span style="font-size:11px; color:#666;">${book.display_date}</span><br>
                                <a href="${book.url}" style="color:#b84a39; font-weight:bold; text-decoration:none; font-size:12px; display:inline-block; margin-top:5px;">View Tools →</a>
                            </div>`;

                        marker.bindPopup(popupContent);

                        // Auto-zoom if linked from a specific page
                        if (focusId && book.id === focusId) {
                            map.setView(book.coords, 7);
                            setTimeout(() => marker.openPopup(), 400);
                        }
                    }
                });
            })
            .catch(err => console.error('Error fetching data.json:', err));
    });
</script>

</div>

</body>
</html>