function osm_byg_ol3() {

    var layers = [];
    var styles = [];
    
    var osmLayer = new ol.layer.Tile({
	visible: false,
	preload: Infinity,
    	source: new ol.source.OSM()
    });

    layers.push(osmLayer);
    styles.push('OSMMapnik');

    var openCycleMapLayer = new ol.layer.Tile({
	visible: false,
	preload: Infinity,
	source: new ol.source.OSM({
	    attributions: [
		new ol.Attribution({
		    html: 'All maps © ' +
			'<a href="https://www.opencyclemap.org/">OpenCycleMap</a>'
		}),
		ol.source.OSM.ATTRIBUTION
	    ],
	    url: 'https://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
	})
    });

    layers.push(openCycleMapLayer);
    styles.push('OpenCycleMap');

    var openTransportMapLayer = new ol.layer.Tile({
	visible: false,
	preload: Infinity,
	source: new ol.source.OSM({
	    attributions: [
		new ol.Attribution({
		    html: 'All maps &copy; ' +
			'<a href="https://www.thunderforest.com/transport/">OpenTransportMap</a>'
		}),
		ol.source.OSM.ATTRIBUTION
	    ],
	    url: 'https://{a-c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png'
	})
    });

    layers.push(openTransportMapLayer);
    styles.push('OpenTransportMap');    

    karte = new ol.Map({
	target: 'karte',	
	layers: layers,
    });

    $('#layer-select').change(function() {
	var style = $(this).find(':selected').val();
	var i, ii;
	for (i = 0, ii = layers.length; i < ii; ++i) {
	    layers[i].setVisible(styles[i] == style);
	}
    });
    $('#layer-select').trigger('change');

};

var textFill = new ol.style.Fill({
  color: '#fff'
});
var textStroke = new ol.style.Stroke({
  color: 'rgba(0, 0, 0, 0.6)',
  width: 3
});
var maxFeatureCount;
var features;

function calculateClusterInfo(resolution) {
  maxFeatureCount = 0;
  features = vector.getSource().getFeatures();
  var feature, radius;
  for (var i = features.length - 1; i >= 0; --i) {
    feature = features[i];
    var originalFeatures = feature.get('features');
    var extent = ol.extent.createEmpty();
    for (var j = 0, jj = originalFeatures.length; j < jj; ++j) {
      ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
    }
    maxFeatureCount = Math.max(maxFeatureCount, jj);
 //   radius = 0.25 * (ol.extent.getWidth(extent) + ol.extent.getHeight(extent)) /
 //         resolution;
    radius = 8 + ( maxFeatureCount) * 0.13;
    feature.set('radius', radius);
  }
}

var currentResolution;
function styleFunction(feature, resolution) {
  if (resolution != currentResolution) {
    calculateClusterInfo(resolution);
    currentResolution = resolution;
  }
  var style;
  var size = feature.get('features').length;
    style = [new ol.style.Style({
	image: new ol.style.Circle({
            radius: feature.get('radius'),
            fill: new ol.style.Fill({
		//          color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
		color: '#546e76'
            })
	}),
	text: new ol.style.Text({
            text: size.toString(),
            fill: textFill,
            stroke: textStroke
	})
    })];
    
    return style;
}

function set_kml_layer_ol3(Schluessel) {

    vector = new ol.layer.Vector({
	source: new ol.source.Cluster({
	    distance: 40,
	    source: new ol.source.KML({
		extractStyles: false,
		projection: 'EPSG:3857',
		url: "KML/" + Schluessel + ".php"
	    })
	}),
	style: styleFunction
    });

    var interact = new ol.interaction.Select({
//	condition: function(evt) {
	    //	    return //t.originalEvent.type == 'mousemove' ||
/*	    if(evt.type == 'singleclick') {
		console.log(evt);
	    }*/
//	    return true; //evt.type == 'singleclick';
//	},
	layers: [vector],
	style: styleFunction,
	condition: ol.events.condition.mouseover
    });
    interact.on('select', function(evt) {
	console.log(evt);
    });

    var selectedFeatures = interact.getFeatures();

    selectedFeatures.on('add', on_select_feature);
    
    function on_select_feature(event){
	
	var info_div = document.getElementById('photo_info_wrapper');
	//Store the clusters
	//Update the div with the info of the photos
	var feats = this.a[0].get('features');
	info_div.innerHTML = '';
	    for(var i = 0; i < feats.length; ++i) {
		info_div.innerHTML += feats[i].get('description');
	    }

    };   
    
    karte.addInteraction(interact);

    karte.addLayer(vector);   
};

function set_gpx_layer_ol3(Schluessel, Bezeichner, Farbe) {

    var styleTrack = {strokeColor: Farbe, strokeWidth: 2, fillColor: Farbe, pointRadius: 5, opacity: 0.5};

    var GpxTrack = new ol.layer.Vector({
        source: new ol.source.Vector({
	 //   extractStyles: false,
	 //   projection: 'EPSG:3857',
         //   url: "Gpx/" + Schluessel + ".gpx",
	    url: "https://rudzick.de/bicycle_tours/Gpx/2013_09_08_Elstal_Brandenburg.gpx",
            format: new ol.format.GPX()
//            format: new ol.format.GPX({extractWaypoints: true, extractAttributes: true})
        }),
 //       style: styleTrack
	style: function(feature) {
          return style[feature.getGeometry().getType()];
        }
    });
    
     karte.addLayer(GpxTrack);
};