Skip to content

Instantly share code, notes, and snippets.

@tilmanb

tilmanb/.block Secret

Last active October 1, 2020 20:37
Show Gist options
  • Save tilmanb/e2c00978150f1c67fdc67401e80f3625 to your computer and use it in GitHub Desktop.
Save tilmanb/e2c00978150f1c67fdc67401e80f3625 to your computer and use it in GitHub Desktop.
Download ZIP
Species markers
Raw
.block
license: mit
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// the markers are stored in a global array
var speciesMarkers = Array();
$(function() {
var map = L.map("map").setView([51.52, 11], 8);
// OSM layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}
).addTo(map);
map.on('click', function(e) {
// create marker
var m = new L.marker(e.latlng).addTo(map);
// add a species attribute
m.species = undefined;
// create and show empty popup, will be filled on popupopen
m.bindPopup("<div/>").openPopup();
// store in global speciesMarkers array
speciesMarkers.push(m);
});
map.on('popupopen', function(evt) {
// create a select dropdown menu
var selectElement = $('<select><option value="undefined">(please select)</option><option value="cow">cow</option><option value="sheep">sheep</option><option value="velociraptor">velociraptor</option></select>');
// attach event handler
selectElement.on('change', function() {
// popup._source is the marker, store the selected list value on the marker
evt.popup._source.species = selectElement.val();
});
// set the select element as the contents of the popup. The [0] gets the native DOM element, which is necessary for setContent.
evt.popup.setContent(selectElement[0]);
});
// this outputs the global markers array on button click
$(listButton).on('click', function() {
for (var i=0;i<speciesMarkers.length;i++) {
//console.log(speciesMarkers[i].getLatLng() + speciesMarkers[i].species);
$("#infopane").append($("<p>"+speciesMarkers[i].getLatLng().lat.toFixed(5) +"&nbsp;"+ speciesMarkers[i].getLatLng().lng.toFixed(5)+ ": "+ speciesMarkers[i].species + "</p>"));
}
});
});
</script>
<style type="text/css">
#map {
height: 360px;
width: 49%;
}
#infopane {
width: 49%;
float: right;
border: 0.2px solid #c0c0c0;
}
h2 {
margin-top:0.1em;
margin-left:0.1em;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="infopane">click on map
<p>
<input type="button" value="List species" id="listButton"/>
</p>
</div>
<div id="map"></div>
</body>
</html>
Raw
speciesMarkerCSV.html
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// the markers are stored in a global array
var speciesMarkers = Array();
var sepChar;
$(function() {
var map = L.map("map").setView([51.52, 11], 8);
// OSM layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}
).addTo(map);
map.on('click', function(e) {
// create marker
var m = new L.marker(e.latlng).addTo(map);
// add a species attribute
m.species = undefined;
// create and show empty popup, will be filled on popupopen
m.bindPopup("<div/>").openPopup();
// store in global speciesMarkers array
speciesMarkers.push(m);
});
map.on('popupopen', function(evt) {
// create a select dropdown menu
var selectElement = $(constructSelectElementText(evt.popup._source.species));
// attach event handler
selectElement.on('change', function() {
// popup._source is the marker, store the selected list value on the marker
evt.popup._source.species = selectElement.val();
writeCSV();
});
// set the select element as the contents of the popup. The [0] gets the native DOM element, which is necessary for setContent.
evt.popup.setContent(selectElement[0]);
});
$(datasetid).on('change', writeCSV);
$(sc).on('change',function() {
sepChar = $(sc).val();
writeCSV();
});
sepChar = $(sc).val();
}); // end $()
var writeCSV = function() {
// empty outcsv
$(outcsv).val("datasetid"+sepChar+"lat"+sepChar+"lon"+sepChar+"species\n");
for (var i=0;i<speciesMarkers.length;i++) {
//console.log(speciesMarkers[i].getLatLng() + speciesMarkers[i].species);
$(outcsv).val(
$(outcsv).val()
+ $(datasetid).val() + sepChar + speciesMarkers[i].getLatLng().lat.toFixed(5) +sepChar+ speciesMarkers[i].getLatLng().lng.toFixed(5)+ sepChar+ speciesMarkers[i].species + "\n"
);
}
}
var constructSelectElementText = function(selectedText="undefined") {
var r = "<select>";
var sp = $(possiblespecies).val().split(",");
sp.push("undefined");
for (var i=0;i<sp.length;i++) {
r += "<option value='"+sp[i]+"'"+(sp[i]==selectedText?" selected":"")+">"+sp[i]+"</option>";
}
r += "</select>";
return r;
}
</script>
<style type="text/css">
#map {
height: 360px;
width: 49%;
}
#infopane {
width: 49%;
float: right;
border: 0.2px solid #c0c0c0;
}
h2 {
margin-top:0.1em;
margin-left:0.1em;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="infopane">
Possible species, separated by comma: <input type="text" id="possiblespecies" value="sheep,cow,velociraptor,trex,elefant,another_cow" size="70"/><br/>
Dataset id: <input type="text" id="datasetid" name="datasetid" value="s1"/><br/>
Separator character: <input type="text" id="sc" name="sc" value=";" size="1"/><br/>
<textarea id="outcsv" rows="10" cols="50">
</textarea>
</div>
<div id="map"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment