var EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
var EPSG3857 = ol.proj.get("EPSG:3857"); // google
- /*
// tool functions
function createElement(tagName, attributes) {
var element = $(document.createElement(tagName));
parentElement.append(element);
return element;
}
- */
// extract geojson from map element and clear map element's content
var popup_overlay = new ol.Overlay({element: popup_container, autoPan: true, autoPanAnimation: {duration: 250}});
popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
+ function create_popup_dom(feature) {
+ var popup_div = createElement('div');
+
+ // name
+ if (feature.get('name') !== undefined && (feature.get('wiki') !== undefined || feature.get('thumb_url') !== undefined)) {
+ var h2 = appendElement(popup_div, 'h2');
+ if (feature.get('wiki') === undefined) h2.text(feature.get('name'));
+ else appendElement(h2, 'a', {href: feature.get('wiki')}).text(feature.get('name'));
+ }
+
+ // sledrun information
+ if (feature.get('type') == 'sledrun') {
+ var p = appendElement(popup_div, 'p').text('Rodelbahnzustand').append(createElement('br'));
+ if (feature.get('condition') !== undefined) {
+ var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
+ var year_month_day = feature.get('date_report').split('-');
+ p.append(createElement('a', {href: feature.get('wiki') + '#Eintr.C3.A4ge'}).text(condition_text[feature.get('condition')]), ' ');
+ p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
+ p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Neu')));
+ } else {
+ p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Bitte eintragen')));
+ }
+ }
+
+ // wiki link
+ if (feature.get('wiki') !== undefined) {
+ var a = appendElement(appendElement(popup_div, 'p'), 'a', {href: feature.get('wiki')});
+ var detail_text = 'Details';
+ if (feature.get('type') == 'sledrun') detail_text += ' zur Rodelbahn';
+ if (feature.get('type') == 'gasthaus') detail_text += ' zum Gasthaus';
+ if (feature.get('thumb_url') === undefined) a.text(detail_text);
+ else a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
+ }
+
+ return popup_div;
+ }
+
+
/*
var layer_path = new OpenLayers.Layer.Vector("Path", {
styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
if (event.selected.length > 0) {
let feature = event.selected[0];
let coordinates = feature.getGeometry().getCoordinates();
- popup_content.innerHTML = '<p>You clicked</p>';
+ let popup_dom = create_popup_dom(feature);
+ popup_content.innerHTML = popup_dom.html(); // TODO: There should be a way without converting it to string...
popup_overlay.setPosition(coordinates);
}
});