index.html

## index.html
<html>
    <!-- see https://www.brool.com/post/quick-and-dirty-shared-custom-maps/ for explanation -->
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
              integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
              crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
                integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
                crossorigin=""></script>
        <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="map" style="height: 100%; width: 100%"></div>
        <script>
         var map = L.map('map', {
             crs: L.CRS.Simple,
             minZoom: -1
         });
         var bounds = [[0,0], [2304,2560]];

         // this represents the "center" of the map, with +X +Y being to the lower right.
         // adjust to your own particular coordinate system

         var center = [1048, 1408];
         var image = L.imageOverlay('map.png', bounds).addTo(map);
         map.fitBounds(bounds);

         var popup = L.popup();

         function onMapClick(e) {
             var coordinates = (Math.round(e.latlng.lng) - center[0]) + "," + (center[1] - Math.round(e.latlng.lat))
             popup
                 .setLatLng(e.latlng)
                 .setContent("Coordinates: " + coordinates)
                 .openOn(map);
         }

         map.on('click', onMapClick);

         // Load up our spreadsheet
         var url = 'https://sheets.googleapis.com/v4/spreadsheets/[SPREADSHEET ID]/values/[START COL ROW i.e. A2]%3A[END COL ROW]?dateTimeRenderOption=SERIAL_NUMBER&majorDimension=DIMENSION_UNSPECIFIED&valueRenderOption=FORMATTED_VALUE&key=[API KEY]';
         $(document).ready(function () {
             jQuery.getJSON(url, function (data) {
                 for (ix = 0; ix < data.values.length; ix++) {
                     // spreadsheet is: X, Y, marker type (not used), added by (person), description (text)
                     var x = parseInt(data.values[ix][0]) + center[0];
                     var y = -parseInt(data.values[ix][1]) + center[1];
                     var marker = data.values[ix][2];
                     var addedby = data.values[ix][3];
                     // description and added by should be sanitized
                     var description = data.values[ix][4];
                     if (addedby > "") {
                         description += "<br/><i>Added by: " + addedby + "</i>";
                     }
                     console.log(x, y, marker, addedby, description);
                     var marker = L.marker([y, x]).bindPopup(description).openPopup().addTo(map);
                 }
             });
         });
        </script>
    </body>
</html>