Skip to content

Commit a705b83

Browse files
RobertOrthoferRobertOrthofer
committed
added option to select x- and y-column when dropping coordinates as .csv
1 parent 6210899 commit a705b83

File tree

3 files changed

+164
-31
lines changed

3 files changed

+164
-31
lines changed

‎index.html

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,23 @@
3535
<button type="button" onclick="showCoordsSelection()" id="hideCoordSelection" class="hideSelectionButton">&#9661;</button>
3636
<button type="button" onclick="showDateSelection()" id="hideDataSelection" class="hideSelectionButton">&#9661;</button>
3737
</div>
38+
3839
<div id="choseFieldDiv1" class="choseFieldDiv no-flickr">
3940
<div id ="choseIDDiv" class="single_selection">
4041
<div id="ID-Text1" class="fieldText">Match-ID</div>
4142
<select id="coordIDSelect" class="styled-select"></select>
4243
</div>
44+
45+
<div id="chooseCoordDiv" class="single_selection">
46+
<div id="ID-Text2" class="fieldText">X-Coordinate</div>
47+
<select id="xSelect" class="styled-select"></select>
48+
</div>
49+
4350
<div id="chooseCoordDiv" class="single_selection">
44-
<div id="ID-Text2" class="fieldText">Coordinates</div>
45-
<select id="coordSelect" class="styled-select"></select>
51+
<div id="ID-Text3" class="fieldText">Y-Coordinate</div>
52+
<select id="ySelect" class="styled-select"></select>
4653
</div>
54+
4755
<div id="chooseCoordDiv" class="single_selection">
4856
<div id="ID-Text3" class="fieldText">EPSG</div>
4957
<input id="epsgInput" type="text" name="epsg" placeholder="4326">

‎zaehlstellen.css

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@ button::-moz-focus-inner {
199199
width: 27%;
200200
text-align: right;
201201
padding-right: 3%;
202+
padding-left: 7%;
202203
font-size: 12px;
203204
}
204205

@@ -208,10 +209,10 @@ button::-moz-focus-inner {
208209
margin-top: 5px;
209210
border: 0px;
210211
padding: 0px;
211-
width: 60%;
212+
width: 55%;
212213
height: 30px;
213214
overflow: hidden;
214-
margin-right: 10%;
215+
margin-right: 5%;
215216
background: #f0f6fb;
216217
}
217218

@@ -228,16 +229,16 @@ button::-moz-focus-inner {
228229
}
229230

230231
#epsgInput{
231-
float: left;
232+
float: right;
232233
margin: 0px;
233234
margin-top: 5px;
234235
border: 0px;
235236
padding: 0px;
236237
padding-left: 5px;
237-
width: 30%;
238+
width: 25%;
238239
height: 30px;
239240
overflow: hidden;
240-
margin-right: 10%;
241+
margin-right: calc(35% - 5px);
241242
background: #f0f6fb;
242243
}
243244

‎zaehlstellen.js

Lines changed: 148 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,19 @@ function add_zaehlstellen(coords_json)
7575

7676
//remove current coordinates, if existing
7777

78-
7978
// save the current Selection to global variable selectedOptions, so they can only be changed with the apply button
8079
var idField = document.getElementById("coordIDSelect").value.split(","); // array, because it might be nested
81-
var coordsField = document.getElementById("coordSelect").value.split(","); // array, because it might be nested
80+
var coordsField = document.getElementById("xSelect").value.split(","); // array, because it might be nested
8281
var epsgField = document.getElementById("epsgInput").value;
8382
selectedOptions.coordID = idField;
8483
selectedOptions.coordField = coordsField;
8584
selectedOptions.epsg = epsgField;
8685

86+
// if coordinates are csv, make an aproppriate JSON with selected x and y coordinates and Match-ID as property
87+
if(currentFiles.CoordsFileType === "csv"){
88+
coords_json = csvToGeoJSON(window.csv);
89+
}
90+
8791
// If EPSG is not empty or 4326, the data has to be reprojected. get the .wkt from epsg.io api
8892
var responseString = "";
8993
if(epsgField !=="4326" && epsgField !== "")
@@ -107,10 +111,10 @@ function add_zaehlstellen(coords_json)
107111
xhttp.send();
108112
}
109113
//eval(responseString);
110-
114+
console.log(ol.proj.get('EPSG:' + epsgField));
111115
ZaehlstellenPoints = new ol.layer.Vector({
112116
source: new ol.source.Vector({
113-
features: (new ol.format.GeoJSON()).readFeatures(coords_json, {
117+
features: (new ol.format.GeoJSON({ defaultDataProjection: 'EPSG:4326'})).readFeatures(coords_json, {
114118
//dataProjection: proj4('EPSG:' + epsgField), //e.g.: proj4('EPSG:32633');
115119
dataProjection: ol.proj.get('EPSG:' + epsgField), //e.g.: proj4('EPSG:32633');
116120
//dataProjection: ol.proj.ProjectionLike('EPSG:' + epsgField), //e.g.: proj4('EPSG:32633');
@@ -161,7 +165,7 @@ function add_zaehlstellen(coords_json)
161165
if(typeof(selectedOptions.dateField) !== "undefined"){ updateInput(0, false, false); };
162166
document.getElementById("sliderDiv").style.display= 'inline-block';
163167
}
164-
addPopups() // add eventhandler for clicks to show popups
168+
// addPopups() // add eventhandler for clicks to show popups
165169
}
166170

167171

@@ -237,12 +241,14 @@ function add_zaehlstellen(coords_json)
237241
if(r == true){
238242
console.log("Override File");
239243
// now clear all old options from Coords- and Match-ID-Selection
240-
var select = document.getElementById("coordSelect");
244+
var select = document.getElementById("xSelect");
241245
var select2 = document.getElementById("coordIDSelect");
246+
var select3 = document.getElementById("ySelect");
242247
var length = select.options.length; // the 2 selects should have same options
243248
for (i = 0; i < length; i++) {
244249
select.options[0] = null;
245250
select2.options[0] = null;
251+
select3.options[0] = null;
246252
}
247253
}
248254
else{
@@ -262,18 +268,28 @@ function add_zaehlstellen(coords_json)
262268
coords_json ={};
263269
var reader = new FileReader(); // to read the FileList object
264270
reader.onload = function(event){ // Reader ist asynchron, wenn reader mit operation fertig ist, soll das hier (JSON.parse) ausgeführt werden, sonst ist es noch null
271+
var columnNames = [];
265272
if (f.name.substr(f.name.length - 3) ==="csv"){ // check if filetiype is csv
266-
coords_json = csvToGeoJSON(reader.result);
273+
currentFiles.CoordsFileType = "csv";
274+
columnNames = getColumnNames(reader.result);
275+
window.csv = reader.result; // temporary save reader.result into global variable, until geoJSON can be created with user-inputs
276+
askFields2(columnNames, 1);
267277
}
268-
else {
278+
else if (f.name.substr(f.name.length - 4) ==="json"){
279+
currentFiles.CoordsFileType = "JSON";
269280
coords_json = JSON.parse(reader.result);
281+
askFields2(columnNames, 1);
282+
}
283+
else {
284+
alert("Unrecognized Filetype. Please Check your input (only .csv or .json allowed)");
270285
}
286+
271287
document.getElementById("hideCoordSelection").style.visibility = "visible";
272288
document.getElementById("choseFieldDiv1").style.visibility = "visible";
273289
document.getElementById("renderCoordinatesButton").style.visibility = "visible";
274290
document.getElementById("hideSelectionHolder").style.visibility = "visible";
275291

276-
askFields(coords_json.features[0], 1); // only first feature is needed for property names
292+
//askFields(coords_json.features[0], 1); // only first feature is needed for property names
277293
document.getElementById("renderCoordinatesButton").addEventListener('click', function(){add_zaehlstellen(coords_json);}, false);
278294
//console.log('added Event Listener to apply button');
279295
//add_zaehlstellen(coords_json);
@@ -283,12 +299,23 @@ function add_zaehlstellen(coords_json)
283299
document.getElementById('list_coords').innerHTML = '<ul style="margin: 0px;">' + output.join('') + '</ul>';
284300
}
285301

302+
function getColumnNames(csv){
303+
var lines=csv.split(/\r|\n/);
304+
return lines[0].split(","); //returns array with column names
305+
}
306+
286307
// convert .csv to geoJSON
287308
function csvToGeoJSON(csv){ //csv = reader.result
288-
var lines=csv.split(/\r|\n/);
289-
//line = lines.split("");
290-
//var result = [];
291-
var headers=lines[0].split(",");
309+
var lines=csv.split(/[\r\n]+/); // split for windows and mac csv (newline or carriage return)
310+
var headers=lines[0].split(","); //not needed?
311+
var matchID = document.getElementById("coordIDSelect").value;
312+
var xColumn = document.getElementById("xSelect").value;
313+
var yColumn = document.getElementById("ySelect").value;
314+
315+
// get the positions of the seleted columns in the header
316+
var positionMatchID = headers.indexOf(matchID);
317+
var positionX = headers.indexOf(xColumn);
318+
var positionY = headers.indexOf(yColumn);
292319

293320
var obj_array = []
294321
for(var i=1;i<lines.length;i++){
@@ -297,9 +324,9 @@ function add_zaehlstellen(coords_json)
297324
//for(var j=0;j<headers.length;j++){
298325
json_obj["geometry"] = {
299326
"type" : "Point",
300-
"coordinates" : [currentline[1], currentline[2]]};
327+
"coordinates" : [currentline[positionX], currentline[positionY]]};
301328
json_obj["properties"] = {};
302-
json_obj["properties"][headers[0]] = currentline[0]; // get the name of zaehlstellen variable
329+
json_obj["properties"][matchID] = currentline[positionMatchID]; // get the name of zaehlstellen variable
303330
obj_array.push(json_obj);
304331
};
305332

@@ -357,7 +384,7 @@ function add_zaehlstellen(coords_json)
357384
document.getElementById("choseFieldDiv2").style.visibility = "visible";
358385
document.getElementById("hideSelectionHolder").style.visibility = "visible";
359386

360-
askFields(zaehlstellen_data[0], 2); // only first feature is needed for property names
387+
askFields2(zaehlstellen_data[0], 2); // only first feature is needed for property names
361388
document.getElementById("renderDataButton").addEventListener('click', function(){applyDate();}, false);
362389
};
363390
reader.readAsText(f);
@@ -912,14 +939,109 @@ function autoPlay(){
912939
};
913940

914941
//----------Populating Selections for ID and Coordinates after Drag&Drop--------------------------------------------------
915-
function askFields(first_feature, option){
942+
function askFields2(columnNames, option){
943+
// @columnNames: Array with column Names as Strings
916944
// @option:
917945
// 1: Coordinates
918946
// 2: Data
947+
948+
919949
if(option == 1){ // if Coordinates, then show/hide Coordinates, else Data selection
920950
if (selectionStatus.coords == false){ // only show/hide when not already shown, happens when re-dragging data into drop-field
921951
showCoordsSelection();
922952
}
953+
}
954+
else{
955+
if (selectionStatus.date == false){
956+
showDateSelection();
957+
}
958+
}
959+
960+
switch(option)
961+
{
962+
case 1: // = coordinates
963+
{
964+
if(currentFiles.CoordsFileType === "csv"){
965+
var coordIDSelection = document.getElementById('coordIDSelect');
966+
var coordXSelection = document.getElementById('xSelect');
967+
var coordYSelection = document.getElementById('ySelect');
968+
969+
// clear all existing options
970+
coordIDSelection.options.length = 0;
971+
coordXSelection.options.length = 0;
972+
coordYSelection.options.length = 0;
973+
974+
coordXSelection.disabled=false; // enable x- and y-coordinate Selection, if it got deselected before
975+
coordYSelection.disabled=false;
976+
977+
var headerLength = columnNames.length;
978+
for (i=0; i < headerLength; i++){
979+
var opt = document.createElement("option");
980+
opt.value= columnNames[i];
981+
opt.innerHTML = columnNames[i];
982+
coordIDSelection.appendChild(opt);
983+
var opt2 = opt.cloneNode(true); // clone Options for other Selection
984+
coordXSelection.appendChild(opt2);
985+
var opt3 = opt.cloneNode(true); // clone Options for other Selection
986+
coordYSelection.appendChild(opt3);
987+
}
988+
}
989+
else if (currentFiles.CoordsFileType === "JSON"){
990+
991+
var propertyNames = Object.getOwnPropertyNames(coords_json.features[0].properties) // array of properties of GeoJSON
992+
var coordIDSelection = document.getElementById('coordIDSelect');
993+
994+
// clear all existing options
995+
coordIDSelection.options.length = 0;
996+
997+
var propertyNamesLength = propertyNames.length;
998+
for (i=0; i < propertyNamesLength; i++){
999+
var opt = document.createElement("option");
1000+
opt.value= propertyNames[i];
1001+
opt.innerHTML = propertyNames[i];
1002+
coordIDSelection.appendChild(opt);
1003+
}
1004+
document.getElementById("xSelect").disabled=true; // disable x- and y-coordinate Selection, because geometry-property is standardized
1005+
document.getElementById("ySelect").disabled=true;
1006+
}
1007+
// Behavior of sliding Div and show/hide-Buttons depending on option
1008+
document.getElementById("hideCoordSelection").style.display="inline-block";
1009+
document.getElementById("hideCoordSelection").innerHTML = "△";
1010+
} // end of case 1 (=coordinates-Json)
1011+
break;
1012+
1013+
case 2: //(= Data file)
1014+
{
1015+
var propertyNames = Object.getOwnPropertyNames(zaehlstellen_data[0]) // array of properties of GeoJSON
1016+
var dateSelection = document.getElementById('dateSelect');
1017+
1018+
// clear all existing options
1019+
dateSelection.options.length = 0;
1020+
1021+
for (i=0; i < propertyNames.length; i++){
1022+
var opt = document.createElement("option");
1023+
opt.value= propertyNames[i];
1024+
opt.innerHTML = propertyNames[i];
1025+
dateSelection.appendChild(opt);
1026+
}
1027+
1028+
document.getElementById("hideDataSelection").style.display="inline-block";
1029+
document.getElementById("hideDataSelection").innerHTML = "△";
1030+
} // end of case 2 (=Data-json)
1031+
break;
1032+
1033+
}// end of switch
1034+
}
1035+
1036+
//----------Populating Selections for ID and Coordinates after Drag&Drop--------------------------------------------------
1037+
function askFields(first_feature, option){
1038+
// @option:
1039+
// 1: Coordinates
1040+
// 2: Data
1041+
if(option == 1){ // if Coordinates, then show/hide Coordinates, else Data selection
1042+
if (selectionStatus.coords == false){ // only show/hide when not already shown, happens when re-dragging data into drop-field
1043+
showCoordsSelection();
1044+
}
9231045
}
9241046
else{
9251047
if (selectionStatus.date == false){
@@ -932,7 +1054,7 @@ function askFields(first_feature, option){
9321054
case 1: // = coordinates-json
9331055
{
9341056
var coordIDSelection = document.getElementById('coordIDSelect');
935-
var coordSelection = document.getElementById('coordSelect');
1057+
var coordSelection = document.getElementById('xSelect');
9361058
index = 0;
9371059
Object.keys(first_feature).forEach(function(prop) { // prop = property name
9381060
//console.log(prop);
@@ -1021,8 +1143,8 @@ function showCoordsSelection(){
10211143
else {
10221144
document.getElementById("hideCoordSelection").innerHTML = "▽";
10231145
document.getElementById("hideCoordSelection").style.backgroundColor ="#A4C4E8";
1024-
document.getElementById('choseFieldDiv1').style.transform = "translateY(-45px)";
1025-
document.getElementById("menuBelowSelection").style.transform = "translateY(-210px)";
1146+
document.getElementById('choseFieldDiv1').style.transform = "translateY(-83px)";
1147+
document.getElementById("menuBelowSelection").style.transform = "translateY(-248px)";
10261148
selectionStatus.coords = false;
10271149
}
10281150
}
@@ -1039,15 +1161,17 @@ function showDateSelection(){
10391161
if (selectionStatus.date == false){
10401162
document.getElementById("hideDataSelection").innerHTML = "△";
10411163
document.getElementById("hideDataSelection").style.backgroundColor ="#4A74AA";
1042-
document.getElementById('choseFieldDiv2').style.transform = "translateY(23px)";
1043-
document.getElementById("menuBelowSelection").style.transform = "translateY(-140px)";
1164+
//document.getElementById('choseFieldDiv2').style.transform = "translateY(23px)";
1165+
//document.getElementById("menuBelowSelection").style.transform = "translateY(-140px)";
1166+
document.getElementById('choseFieldDiv2').style.transform = "translateY(-17px)";
1167+
document.getElementById("menuBelowSelection").style.transform = "translateY(-180px)";
10441168
selectionStatus.date = true;
10451169
}
10461170
else {
10471171
document.getElementById("hideDataSelection").innerHTML = "▽";
10481172
document.getElementById("hideDataSelection").style.backgroundColor ="#A4C4E8";
1049-
document.getElementById('choseFieldDiv2').style.transform = "translateY(-45px)";
1050-
document.getElementById("menuBelowSelection").style.transform = "translateY(-205px)";
1173+
document.getElementById('choseFieldDiv2').style.transform = "translateY(-84px)";
1174+
document.getElementById("menuBelowSelection").style.transform = "translateY(-247px)";
10511175
selectionStatus.date = false;
10521176
}
10531177
}

0 commit comments

Comments
 (0)