[PATCH 1/1] Add Leaflet-Map Position selector

Fr Jan 22 13:33:01 CET 2016

Signed-off-by: Dominik Heidler <dominik at heidler.eu>
---
 src/packages/fff/fff-web/files/www/ssl/map.html    | 82 ++++++++++++++++++++++
 src/packages/fff/fff-web/files/www/ssl/settings.js |  7 ++
 2 files changed, 89 insertions(+)
 create mode 100644 src/packages/fff/fff-web/files/www/ssl/map.html

diff --git a/src/packages/fff/fff-web/files/www/ssl/map.html b/src/packages/fff/fff-web/files/www/ssl/map.html
new file mode 100644
index 0000000..e9bb127
--- /dev/null
+++ b/src/packages/fff/fff-web/files/www/ssl/map.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<title>Router Position auswählen</title>
+<meta charset="utf-8"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
+<style type="text/css">
+html, body, #map {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+}
+</style>
+<script type="text/javascript">
+var router_blue_svg = "data:image/svg+xml;base64," +
+	"PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0" +
+	"PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0xMDM4" +
+	"LjM2MikiPjxjaXJjbGUgY3g9IjciIGN5PSIxMDQ1LjM2MiIgcj0iNi42MTIiIGZpbGw9IiMxMjNj" +
+	"ZmYiLz48Y2lyY2xlIGN4PSI3IiBjeT0iMTA0NS4zNjIiIHI9IjIuMDc4Ii8+PC9nPjwvc3ZnPgo=";
+
+var map;
+var marker;
+
+function oebn0(name) {
+	var f = window.opener.uci['system'];
+	var i = window.opener.firstSectionID(f, "system");
+	return window.opener.document.getElementsByName(['system', i, name].join('#'))[0];
+}
+
+function add_marker(pos) {
+	marker = L.marker(pos, {icon: L.icon({iconUrl: router_blue_svg, iconSize: [14, 14]}), draggable: true}).addTo(map);
+	marker.on('dragend', function(e) {
+		report_marker_pos();
+	});
+}
+
+function handle_map_click(e) {
+	if (marker) {
+		marker.setLatLng(e.latlng);
+	}
+	else {
+		add_marker(e.latlng);
+	}
+	report_marker_pos();
+}
+
+function report_marker_pos() {
+	var pos = marker.getLatLng();
+	oebn0('latitude').value = pos.lat.toFixed(8);
+	oebn0('longitude').value = pos.lng.toFixed(8);
+}
+
+function init_map() {
+	map = L.map('map');
+	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		attribution: 'Map data © <a href="https://openstreetmap.org">OSM</a> contributors, ' +
+		             '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+		maxNativeZoom: 19,
+		maxZoom: 22
+	}).addTo(map);
+
+	var lat = oebn0('latitude').value;
+	var lng = oebn0('longitude').value;
+
+	if (lat != "" && lng != "") {
+		add_marker([lat, lng]);
+		map.setView([lat, lng], 18);
+	}
+	else {
+		map.setView([49.46, 11.07], 10);
+	}
+
+	map.on('click', handle_map_click);
+}
+</script>
+</head>
+<body onload="init_map();">
+<div id="map"></div>
+</body>
+</html>
diff --git a/src/packages/fff/fff-web/files/www/ssl/settings.js b/src/packages/fff/fff-web/files/www/ssl/settings.js
index 00cc0aa..34e588a 100644
--- a/src/packages/fff/fff-web/files/www/ssl/settings.js
+++ b/src/packages/fff/fff-web/files/www/ssl/settings.js
@@ -57,6 +57,13 @@ function appendSetting(p, path, value, mode)
 		b.lastChild.placeholder = "52.02713078";
 		addInputCheck(b.lastChild, /^$|^\d{1,3}\.\d{1,8}$/, "Ung\xfcltige Eingabe. Bitte nur maximal 8 Nachkommastellen und keine Kommas verwenden.");
 		addHelpText(b, "Die Latitude Koordinate dieses Knotens auf der Freifunk-Karte (z.B. \"52.02713078\").");
+		var map_button = append_button(b, "Position auf Karte anzeigen / setzen", function() {
+			window.open('/map.html', '_blank', 'location=0,status=0,scrollbars=1,width=400,height=300')
+		});
+		b.style["position"] = "relative";
+		map_button.style["position"] = "absolute";
+		map_button.style["height"] = "44px";
+		map_button.style["margin-left"] = "5px";
 		break;
 	case "longitude":
 		b = append_input(p, "GPS-Koordinaten Longitude", id, value);
-- 
2.6.4


