add matekarte for now

1 files changed, 191 insertions, 0 deletions

diff --git a/sublab_project/matekarte/templates/matekarte/matekarte.html b/sublab_project/matekarte/templates/matekarte/matekarte.html
new file mode 100644
index 0000000..7172b46
--- /dev/null
+++ b/sublab_project/matekarte/templates/matekarte/matekarte.html
@@ -0,0 +1,191 @@
+{% extends 'base.html' %}
+
+{% block title %}Mate{% endblock %}
+
+{% block content %}
+<h2>Mate</h2>
+<p>
+    Diese Karte markiert alle Orte in Leipzig (bzw. sogar ganz Deutschland:
+    einfach herauszoomen) an denen Club Mate zu haben ist und die bei
+    <a href="http://www.openstreetmap.org">OpenStreetMap</a> mit dem Tag
+    <i>drink:club-mate=*</i> versehen wurden. Ein paar mehr Details findet
+    Ihr <a href="http://bitfehler.net/mate">hier</a>. Die Daten werden jede
+    Nacht aktualisiert.
+</p>
+<div id="spacer" style="margin-left: 20px;">
+<div id="mapdiv"></div>
+</div>
+<p style="font-size: 10px;">Javascript required. Click an icon for details. Map data 
+<a style="font-size: 10px;" href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> 2011 
+<a style="font-size: 10px;" 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: '/static/img/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: "{{ MEDIA_URL }}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>
+{% endblock content %}