Tal y como está el código del ejemplo no busca el archivo kml en la carpeta raíz si no en una ruta relativa data/kml/2012_Earthquakes_Mag5.kml a partir de la carpeta en la que se encuentra la página.
Lo que puedes hacer es modificar el código para que lea también el archivo kml del sitio web de OpenLayers (tendrías que cambiar la url de la línea 71 del ejemplo):
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://openlayers.org/en/v3.15.1/examples/data/kml/2012_Earthquakes_Mag5.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
style: styleFunction
});
Aquí tienes el ejemplo completo:
var styleCache = {};
var styleFunction = function(feature) {
// 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
// standards-violating <magnitude> tag in each Placemark. We extract it from
// the Placemark's name instead.
var name = feature.get('name');
var magnitude = parseFloat(name.substr(2));
var radius = 5 + 20 * (magnitude - 5);
var style = styleCache[radius];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
fill: new ol.style.Fill({
color: 'rgba(255, 153, 0, 0.4)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 204, 0, 0.2)',
width: 1
})
})
});
styleCache[radius] = style;
}
return style;
};
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://openlayers.org/en/v3.15.1/examples/data/kml/2012_Earthquakes_Mag5.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
style: styleFunction
});
var raster = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var info = $('#info');
info.tooltip({
animation: false,
trigger: 'manual'
});
var displayFeatureInfo = function(pixel) {
info.css({
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
if (feature) {
info.tooltip('hide')
.attr('data-original-title', feature.get('name'))
.tooltip('fixTitle')
.tooltip('show');
} else {
info.tooltip('hide');
}
};
map.on('pointermove', function(evt) {
if (evt.dragging) {
info.tooltip('hide');
return;
}
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
});
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
<style>
#map {
position: relative;
}
#info {
position: absolute;
height: 1px;
width: 1px;
z-index: 100;
}
.tooltip.in {
opacity: 1;
}
.tooltip.top .tooltip-arrow {
border-top-color: white;
}
.tooltip-inner {
border: 2px solid white;
}
</style>
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.15.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="map" class="map"><div id="info"></div></div>