summaryrefslogtreecommitdiff
path: root/sublab_project/matekarte/templates
diff options
context:
space:
mode:
authorChristian Franke <nobody@nowhere.ws>2012-01-23 21:49:39 +0100
committerChristian Franke <nobody@nowhere.ws>2012-01-23 21:49:39 +0100
commitcfab2cec623f6b277fb562b06b9ce9d8c6d68bbb (patch)
treef7fb706979e9ce82060b73dd1c40e373934987bf /sublab_project/matekarte/templates
parentd57a42f72e1d3c060bc9ff5f126886d76e6c34ed (diff)
add matekarte for now
Diffstat (limited to 'sublab_project/matekarte/templates')
-rw-r--r--sublab_project/matekarte/templates/matekarte/matekarte.html191
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 %}