summaryrefslogtreecommitdiff
path: root/template/pages
diff options
context:
space:
mode:
authorConrad Hoffmann <ch@bitfehler.net>2011-10-23 20:49:42 +0200
committerConrad Hoffmann <ch@bitfehler.net>2011-10-23 20:49:42 +0200
commitb408e87689e5f59e79f6c33e62a11b2b1052b78a (patch)
treef333398beefd8c4088ae6f5f381f6da9ee3c0369 /template/pages
parent318c43a7664d11206e38eea901d802d25464fbb8 (diff)
Add first draft of the MateMashup(TM)
Diffstat (limited to 'template/pages')
-rw-r--r--template/pages/mate/content.html181
-rw-r--r--template/pages/mate/desc_de1
-rw-r--r--template/pages/mate/desc_en1
-rw-r--r--template/pages/mate/keywords1
4 files changed, 184 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>
diff --git a/template/pages/mate/desc_de b/template/pages/mate/desc_de
new file mode 100644
index 0000000..989f864
--- /dev/null
+++ b/template/pages/mate/desc_de
@@ -0,0 +1 @@
+Orte in Leipzig an denen Club Mate erhältlich ist
diff --git a/template/pages/mate/desc_en b/template/pages/mate/desc_en
new file mode 100644
index 0000000..08bcddf
--- /dev/null
+++ b/template/pages/mate/desc_en
@@ -0,0 +1 @@
+Where to find Club Mate in Leipzig
diff --git a/template/pages/mate/keywords b/template/pages/mate/keywords
new file mode 100644
index 0000000..ab55669
--- /dev/null
+++ b/template/pages/mate/keywords
@@ -0,0 +1 @@
+club mate, mate, map, leipzig, openstreetmap