diff options
Diffstat (limited to 'template/pages/mate/content.html')
| -rw-r--r-- | template/pages/mate/content.html | 181 |
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> |