-
Notifications
You must be signed in to change notification settings - Fork 21
/
map populating form fields.html
109 lines (101 loc) · 3.37 KB
/
map populating form fields.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<title>Map populating form fields</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="lib/leaflet.css" /> <!-- original: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css -->
<style>
body {
font-family: Arial;
}
html, body, #container, #map {
padding: 0;
margin: 10;
}
#map {
height: 400px;
width: 400px;
}
</style
</head>
<body>
<table>
<tr><td>
<div id="map"></div>
</td><td>
<form>
Click a point on the map to fill the lat-long, or enter your own lat-long values and <a href="#" onClick="updateLatLng(document.getElementById('latitude').value,document.getElementById('longitude').value,1)">jump there</a>
:: <a href="#" onclick="map.zoomOut(3, {animate:true})">zoom out</a> ::
:: <a href="#" onclick="map.zoomIn(3, {animate:true})">zoom in</a>
<br><br><br>
<label for="schoolname">School Name: </label><input id="schoolname" type="text" /><br>
<label for="description">Description: </label><input id="description" type="text" /><br>
<br>
<label for="latitude">Latitude:</label>
<input id="latitude" type="text" />
<label for="longitude">Longitude:</label>
<input id="longitude" type="text" />
<br><br><input type="button" value="Create GeoJSON string" onclick="makeGeoJSON()">
<br><br><textarea id="output" rows=10 cols=50></textarea>
<br><br><input type="button" value="Push to mapbox! (not yet...)">
</form>
</td></tr></table>
<script src="lib/leaflet.js"></script> <!-- Orginal: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js -->
<script>
var tileLayer = new L.TileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> Contributors'
});
//remember last position
var rememberLat = document.getElementById('latitude').value;
var rememberLong = document.getElementById('longitude').value;
if (!rememberLat || !rememberLong) {
rememberLat = 18.53;
rememberLong = 73.85;
}
var map = new L.Map('map', {
'center': [rememberLat, rememberLong],
'zoom': 12,
'layers': [tileLayer]
});
var marker = L.marker([rememberLat, rememberLong], {
draggable: true
}).addTo(map);
marker.on('dragend', function(e) {
updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
});
map.on('click', function(e) {
marker.setLatLng(e.latlng);
updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
});
function updateLatLng(lat, lng, reverse) {
if (reverse) {
marker.setLatLng([lat, lng]);
map.panTo([lat, lng]);
} else {
document.getElementById('latitude').value = marker.getLatLng().lat;
document.getElementById('longitude').value = marker.getLatLng().lng;
map.panTo([lat, lng]);
}
}
function makeGeoJSON() {
var schoolname = document.getElementById('schoolname').value;
var description = document.getElementById('description').value;
var latitude = parseFloat(document.getElementById('latitude').value);
var longitude = parseFloat(document.getElementById('longitude').value);
var feature = {
"type": "Feature",
"properties": {
"schoolname": schoolname,
"description": description
},
"geometry": {
"type": "Point",
"coordinates": [longitude, latitude]
}
};
document.getElementById('output').value = JSON.stringify(feature, null, 2);
}
</script>
</body>
</html>