Example of custom map with marker data read from Google spreadsheets
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Simple example from https://www.brool.com/post/quick-and-dirty-shared-custom-maps/
Be sure to clean up
addedbyanddescription, or anyone with access to your spreadsheet will be able to inject arbitrary code.