Open Layers 3: how to display only a KML layer

Question

i am trying to create an OpenLayers map that only displays a KML layer without a base map or underlying tile layer.

the KML layer will be an indoor floormap, but it does not need to sit on top of an existing map, in a particular coordinate location. I just need to display the floormap on its own, with no other map. i will also want to set pan limits so the user can not pan away from the map.

below is some code that i used to successfully display the KML layer on top of an existing base map. I've tried many things to try get the KML layer to display on its own but to no avail.

can anyone help with this, or tell me what i need to change with the code below to display the KML on its own?

var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: MAPS_URL + 'map1.kml',
            format: new ol.format.KML()
        })
    });

var map = new ol.Map({
           target: 'map',
           layers: [
              new ol.layer.Tile({
                  source: new ol.source.MapQuest({layer: 'sat'})
              }),
              vector
           ],
           view: new ol.View({
           center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
           zoom: 2
       })
   });

map.addLayer(vector);

thanks!

Answer 1

Did you check whether you can read the KML file? There might be a CORS issue.

I recommend to use an AJAX call to load the KML and then use ol.format.KML to read the features and add these to the source.

sourceVector = new ol.source.Vector();
layerVector = new ol.layer.Vector({
  source: sourceVector
  });
formatKML = new ol.format.KML({extractStyles: false});
$.ajax('http://storage.googleapis.com/dbauszus-file-bucket/rtmLmpHg.kml',{
  type: 'GET',
  contentType: 'application/vnd.google-earth.kml+xml', 
  success : function(response) {
    features = formatKML.readFeatures(response,{
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    });
    sourceVector.addFeatures(features);
    }
  });

If you cannot read the file like this check in the Firebugz NET tab for CORS issues.

Answer 2

as Jonatas and Tsauerwein pinted out, i just had to remove the tile layer.

a la:

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: MAPS_URL + 'map1.kml',
        format: new ol.format.KML()
    })
});

var map = new ol.Map({
       target: 'map',
       layers: [vector],
       view: new ol.View({
       center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
       zoom: 2
   })
});

map.addLayer(vector);