Add first draft of the MateMashup(TM)

1 files changed, 181 insertions, 0 deletions

diff --git a/template/pages/mate/content.html b/template/pages/mate/content.html
new file mode 100644
index 0000000..39476fc
--- /dev/null
+++ b/template/pages/mate/content.html
@@ -0,0 +1,181 @@
+<h2>
+	[ Mate ]
+</h2>
+<p>
+	Diese Karte markiert alle Orte in Leipzig an denen Club Mate zu haben ist und die bei
+	OpenStreetMap mit dem Tag <i>drink:club-mate:*</i> versehen wurden.
+</p>
+<div id="spacer" style="margin-left: 20px;">
+<div id="mapdiv"></div>
+</div>
+<p style="font-size: 10px;">Map data <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> 2011 <a href="http://www.openstreetmap.org">OpenStreetMap</a> contributors</p>.
+
+<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
+<script defer="defer" type="text/javascript">
+<!--
+
+var obj, map, pois, styleMap, selectControl, selectedFeature, loadingPopup;
+var numDots = 3;
+
+function resizeMap() {
+	document.getElementById("mapdiv").style.width = "100px"
+	document.getElementById("mapdiv").style.height = "100px";
+	var c = document.getElementsByClassName("content")[0];
+	var w = c.offsetWidth;
+	var h = c.offsetHeight;
+	w = Math.round(w * 0.90);
+	document.getElementById("mapdiv").style.width = w + "px"
+	document.getElementById("mapdiv").style.height = "500px";
+}
+
+function onPopupClose(evt) {
+	// 'this' is the popup.
+	selectControl.unselect(this.feature);
+}
+
+// Pretty-print an amenity tag (and others actually)
+function amenityPp(amenity) {
+	var words = amenity.split("_");
+	var result = "";
+	for (w in words) {
+		if (result != "") {
+			result += " ";
+		}
+		result += words[w].charAt(0).toUpperCase() + words[w].slice(1);
+	}
+	return result;
+}
+
+function popupText(feature) {
+	var title = "";
+	if ("name" in feature.attributes) {
+		title = feature.attributes["name"];
+	}
+	else {
+		title = "*no name*";
+	}
+	if ("website" in feature.attributes) {
+		title = '<a href="' + feature.attributes["website"] + '" rel="external">' + title + '</a>';
+	}
+	
+	var desc = "";
+	if ("amenity" in feature.attributes) {
+		desc = '<p style="font-size: smaller">' + amenityPp(feature.attributes["amenity"]) + '</p>';
+	}
+	else if ("leisure" in feature.attributes) {
+		desc = '<p style="font-size: smaller">' + amenityPp(feature.attributes["leisure"]) + '</p>';
+	}
+	else if ("shop" in feature.attributes) {
+		desc = '<p style="font-size: smaller">' + amenityPp(feature.attributes["shop"]) + '</p>';
+	}
+	
+	var addr = "";
+	if ("addr:street" in feature.attributes) {
+		addr += feature.attributes["addr:street"]
+		if ("addr:housenumber" in feature.attributes) {
+			addr += " " + feature.attributes["addr:housenumber"];
+		}
+		addr += "</br>";
+	}
+	if ("addr:city" in feature.attributes) {
+		if ("addr:postcode" in feature.attributes) {
+			addr += feature.attributes["addr:postcode"] + " ";
+		}
+		addr += feature.attributes["addr:city"];
+	}
+
+	var open = "";
+	if ("opening_hours" in feature.attributes) {
+		open += '<p style="font-size: smaller">Open: ' + feature.attributes["opening_hours"] + '</p>';
+	}
+
+	return "<h2>" + title + "</h2>" + desc + "<p>" + addr + "</p>" + open;
+}
+
+function onFeatureSelect(feature) {
+	var lst = "";
+	for (var prop in feature.attributes) {
+		lst += prop + " ";
+	}
+	popup = new OpenLayers.Popup.FramedCloud(
+			"featurePopup",
+			feature.geometry.getBounds().getCenterLonLat(),
+			new OpenLayers.Size(100,100),
+			popupText(feature),
+			null, true, onPopupClose
+	);
+	feature.popup = popup;
+	popup.feature = feature;
+	map.addPopup(popup);
+}
+function onFeatureUnselect(feature) {
+	if (feature.popup) {
+		popup.feature = null;
+		map.removePopup(feature.popup);
+		feature.popup.destroy();
+		feature.popup = null;
+	}
+}
+
+function dataCallback() {
+	map.removePopup(loadingPopup);
+}
+
+resizeMap();
+window.onresize = resizeMap;
+
+map = new OpenLayers.Map("mapdiv");
+layer = new OpenLayers.Layer.OSM();
+layer.attribution = 0;
+
+
+var styleMap = new OpenLayers.Style({
+	externalGraphic: '/inc/mate_icon.png',
+	graphicWidth: 32,
+	graphicHeight: 32,
+	graphicXOffset: 0,
+	graphicYOffset: -32
+});
+
+var pois = new OpenLayers.Layer.Vector("Marker", { 
+	styleMap: styleMap,
+	eventListeners: {"featuresadded": dataCallback },
+	strategies: [new OpenLayers.Strategy.Fixed],
+	projection:map.displayProjection,
+	protocol: new OpenLayers.Protocol.HTTP({
+		url: "/inc/mate.xml",
+		format: new OpenLayers.Format.OSM,
+	})
+});
+
+map.addLayer(layer);
+map.addLayer(pois);
+
+//Set start centrepoint and zoom    
+var lonLat = new OpenLayers.LonLat(12.3903, 51.342).transform(
+	new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
+	map.getProjectionObject() // to Spherical Mercator Projection
+);
+map.setCenter(lonLat, 12); 
+
+var lonLatPopup = new OpenLayers.LonLat(12.34, 51.36).transform(
+	new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
+	map.getProjectionObject() // to Spherical Mercator Projection
+);
+
+loadingPopup = new OpenLayers.Popup("loadingPopup",
+		lonLatPopup,
+		new OpenLayers.Size(300,200),
+		'<p style="font-weight: bold; text-align: center; margin-top: 60px">Loading OpenStreetMap data.<br>Please wait.<br><br><span id="dots">...</span></p>', false
+);
+loadingPopup.opacity = 0.9;
+map.addPopup(loadingPopup);
+ 
+selectControl = new OpenLayers.Control.SelectFeature(pois, {
+	onSelect: onFeatureSelect,
+	onUnselect: onFeatureUnselect
+});
+map.addControl(selectControl);
+selectControl.activate();
+-->
+</script>