map-chat/index.html at main · aronsommer/map-chat · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Map Chat - Chat with people around the world</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="Aron Sommer"> <!-- aronsommer@gmail.com -->
    <meta name="description" content="This map lets you chat with all visitors on the website while seeing their location">
    <meta name="keywords" content="map, realtime, location">

    <!-- leaflet css  -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.1/dist/leaflet.css">

    <!-- leaflet js  -->
    <script src="https://unpkg.com/leaflet@1.9.1/dist/leaflet.js"></script>

    <!-- style css  -->
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <div id="map"></div>
    <!-- <div id="credits"><a href="https://www.aronsommer.com/">AS</a></div> -->
    <button id="buttonZoomIn">&plus;</button>
    <button id="buttonZoomOut">&minus;</button>
    <button id="buttonChangeAccuracy" onclick="changeAcc()">Accuracy Low</button>
    <button id="buttonZoomToMarkers" class="buttonZoomToMarkers" onclick="zoomToMarkers()">Show All Users (0)</button>
    <button id="buttonZoomToMyMarker" onclick="zoomToMe()">Show Me</button>
    <div id="formDiv">
        <input type="text" id="formInput" placeholder="Type a message" value="" maxlength="100"><button
            id="formButton" onclick="submitText()">Submit</button>
    </div>
    <div id="startInfo" data-nosnippet>
        <div id="startInfoInner">
            This map will show your location to all other visitors currently on this website.
            <br><br>Your data will be deleted from the database when you leave this website.
            <br><br><button id="startInfoButton" onclick="startAuth()">OK</button>
        </div>
    </div>

    <!-- map js  -->
    <script type="module" src="./map.js"></script>

    <!-- database js -->
    <script type="module" src="./database.js"></script>

    <!-- scripts -->
    <script type="module">
        // Disable console.log
        window.console.log = function () {};
        // Start authentication when user has read the start info
        import { startAuthentication } from './database.js';
        window.startAuth = () => {
            document.getElementById("startInfo").style.display = "none";
            startAuthentication();
        };
        // Delete user if he closes the page
        import { deleteMe } from './database.js';
        window.onbeforeunload = function (e) {
            deleteMe();
            //return "Please stay on this page and we will give you candy";
        };
        // Delete user if he closes the page on iOS
        window.onpagehide = function (e) {
            deleteMe();
        };
        // Change accuracy
        import { changeAccuracy } from './map.js';
        window.changeAcc = () => {
            changeAccuracy();
        };
        // Fit view to show all markers
        import { zoomToFitAllMarkers } from './map.js';
        window.zoomToMarkers = () => {
            zoomToFitAllMarkers();
        };
        // Fit view to show my marker
        import { zoomToMyMarker } from './map.js';
        window.zoomToMe = () => {
            zoomToMyMarker();
        };
        // Write new text
        import { writeUserText, createdMyUserEntry } from './database.js';
        window.submitText = () => {
            if (createdMyUserEntry == false) { console.log("Can not submit text"); }
            if (createdMyUserEntry == true) {
                var value = document.getElementById('formInput').value;
                writeUserText(value);
                document.getElementById('formInput').value = '';
            }
        };
        // Write new text when the user presses the "Enter" key on the keyboard
        var input = document.getElementById("formInput");
        input.addEventListener("keypress", function (event) {
            if (event.key === "Enter") {
                submitText();
            }
        });
    </script>
</body>

</html>