-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgeojson-output.html
60 lines (60 loc) · 1.69 KB
/
geojson-output.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<body style="background-color: #ddd">
<table style="width: 800px">
<tr>
<td>Input</td>
<td>Output</td>
</tr>
<tr>
<td valign="top" style="width: 50%; height: 400px">
<p>
<label>Latitude:</label>
<input type="text" id="latitude" value="37.7397" />
</p>
<p>
<label>Longitude:</label>
<input type="text" id="longitude" value="-121.4252" />
</p>
<p>
<input type="text" id="propertyname1" value="date" />
<input type="text" id="propertyvalue1" value="20190509" />
</p>
<p>
<input type="text" id="propertyname2" value="foo" />
<input type="text" id="propertyvalue2" value="bar" />
</p>
<p>
<button type="button" onclick="createGeoJSON()">
Create GeoJSON
</button>
</p>
</td>
<td valign="top" style="width: 50%; height: 400px">
<textarea id="output" style="width: 100%; height: 400px"></textarea>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geojson/0.5.0/geojson.min.js"></script>
<script>
const createGeoJSON = () => {
const data = [
{
lat: document.getElementById("latitude").value,
lng: document.getElementById("longitude").value,
},
];
data[0][document.getElementById("propertyname1").value] =
document.getElementById("propertyvalue1").value;
data[0][document.getElementById("propertyname2").value] =
document.getElementById("propertyvalue2").value;
const dataGeoJSON = GeoJSON.parse(data, { Point: ["lat", "lng"] });
document.getElementById("output").value = JSON.stringify(
dataGeoJSON,
null,
4
);
};
createGeoJSON();
</script>
</body>
</html>