Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<title>Convert CSV to JSOM xml</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xml-formatter@3.3.2/dist/browser/xml-formatter-singleton.js"></script>
</head>
<body>
​
<div>
  <span>Input 1 - </span>
  <span class="title">CSV/TSV:</span>
  <textarea id="csv" placeholder="Here goes CSV content" >element;id;amenity;opening_hours;fountain;created_by
node;2351682414;drinking_water;24/7;;
node;1168549494;drinking_water;24/7;;
node;257475935;drinking_water;24/7;;!delete
node;2351682289;drinking_water;24/7;nasone;</textarea>
</div>
​
<div id="action">
  <label class="cbcontainer">Get OSM data from Overpass API
  <input id="cb" type="checkbox" checked><span class="checkmark"></span>
  </label>
​
  <a class="button" href="#" id="convert">Convert CSV to JOSM xml</a>
</div>
​
<div id="toggle">
  <span>Input 2 - </span>
  <span class="title">OSM xml:</span>
  <textarea id="osmxml" placeholder="Here goes OSM xml content"></textarea>
</div>
​
<div>
  <span>Output - </span>
  <span class="title">JOSM xml:</span>
  <textarea id="out" readonly="readonly"></textarea>
</div>
​
<div id="stats"></div>
​
</body>
</html>
 
html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}
​
body {
   background: white;
   font-family: "Helvetica Neue", sans-serif;
   width: 960px;
   margin: 30px auto;
   color: #111;
}
​
a { color: black; }
​
textarea, input {
  outline: none;
  margin: 10px 0;
  
}
​
div {
  font-size: 18px;
  clear: both;
  width: 100%;
  text-align: left;
  margin: 30px;
}
​
#action {
  text-align: center;
}
​
.title {
  font-weight: bold;
  margin-top: 150px;
}
​
#osmxml, #csv, #out {
  width: 100%;
  border: 1px solid lightgray;
  height: 250px;
  overflow: auto;
}
​
#stats {
  z-index: 2;
  display: block;
  position: fixed;
  margin: 0;
  bottom: 0;
  right: 0;
  width: auto;
  text-align: right;
  padding: .1em .7em;
  font-size: 12px;
  line-height: 1.5;
  background-color: whitesmoke;
  opacity: .8;
  border: 1px solid silver;
}
​
.red {
  font-size: 14px;
  color: crimson;
  font-weight: bold;
}
​
#toggle {
  display: none;
}
​
#toggle.active {
  display: block;
}
​
.button {
  display: inline-block;
  font-size: 15px;
  line-height: 1.7;
  color: white;
  background: orangered;
  padding: 10px 15px;
  font-weight: bold;
  text-decoration: none;
  width: 260px;
  margin: 0 20px 0 20px;
}
​
textarea {
  font-size: 12px;
  line-height: 1.5em;
  padding: 10px;
}
​
.cbcontainer {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
​
.cbcontainer input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
​
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: lightgray;
}
​
.cbcontainer input:checked ~ .checkmark {
  background-color: orangered;
}
​
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
​
.cbcontainer input:checked ~ .checkmark:after {
  display: block;
}
​
.cbcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
digitalgarbagepro
0viewers