-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.tpl.html
121 lines (95 loc) · 3.66 KB
/
index.tpl.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
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<title>Freifunk Planung</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="static/leaflet.css" />
<link rel="stylesheet" href="static/leaflet.draw.css" />
<script src="static/jquery.js"></script>
<script src="static/leaflet.js"></script>
<script src="static/leaflet.draw.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="leaflet.css" />
</head>
<body style="height: 100%; margin: 0;">
<div id="map" style="position:fixed; width: 100%; height: 100%;"></div>
<script>
var map = L.map('map').setView([51.454121, 7.012690], 13);
var stdlayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
});
var whitelayer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>',
maxZoom: 25
});
stdlayer.addTo(map);
whitelayer.addTo(map);
var baseLayers = {
"Standard": stdlayer,
"Weiß": whitelayer
};
var overlays = {};
L.control.layers(baseLayers, overlays).addTo(map);
//L.marker([51.5, -0.09]).addTo(map).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'topleft',
polygon: {
title: 'Haus eintragen',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#ff0000'
},
showArea: false,
},
rectangle: false,
polyline: {
metric: true
},
circle: false,
marker: {
title: 'Knoten eintragen'
}
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
// Do marker specific actions
} else if (type === 'polygon') {
latlng = e.layer.toGeoJSON().geometry.coordinates[0];
latlng.pop();
for (var i=0;i<latlng.length;i++) {
tmp = latlng[i][0]
latlng[i][0] = Math.round(latlng[i][1]*1000000)/1000000;
latlng[i][1] = Math.round(tmp*1000000)/1000000;
}
console.log(JSON.stringify(latlng));
stadtteil = prompt('Stadtteil:')
title = prompt('Titel:')
$.post('/building', {'stadtteil': stadtteil, 'title': title, 'coords': JSON.stringify(latlng)})
}
// Do whatever else you need to. (save to db, add to map etc)
map.addLayer(layer);
});
/*
L.polygon([[51.460852,6.945248],[51.458285,6.957264],[51.449942,6.953487],[51.450905,6.946106]], { weight: 0, fillColor: '#ff0000', fillOpacity: 0.4 }).addTo(map).bindPopup("I am a polygon.");
*/
/* add */
/*function onMapClick(e) {
console.log('['+String(Math.round(e.latlng.lat*1000000)/1000000)+', '+String(Math.round(e.latlng.lng*1000000)/1000000)+'],');
//popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(map);
}
map.on('click', onMapClick);*/
</script>
</body>
</html>