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
addedby
anddescription
, or anyone with access to your spreadsheet will be able to inject arbitrary code.