title: Show a KML layer
body: <p>I have the example to save the content of a div to a PNG file (got it from here: <a href="http://openlayers.org/en/master/examples/export-map.html" rel="nofollow">http://openlayers.org/en/master/examples/export-map.html</a>)</p>
  
  <p>Besides that, I also need to show several kml layers. 
  I got one of the examples and I'm trying to merge them with my own script.</p>
  
  <p>This is what I got by now:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;title&gt;Export map example&lt;/title&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css" type="text/css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
  
          &lt;div class="row-fluid"&gt;
              &lt;div class="span12"&gt;
                  &lt;div id="map" class="map"&gt;&lt;/div&gt;
                  &lt;div id="no-download" class="alert alert-error" style="display: none"&gt;
                      This example requires a browser that supports the
                      &lt;a href="http://caniuse.com/#feat=download"&gt;link download&lt;/a&gt; attribute.
                  &lt;/div&gt;
                  &lt;a id="export-png" class="btn" download="map.png"&gt;&lt;i class="icon-download"&gt;&lt;/i&gt; Export PNG&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;script&gt;
          var projection = ol.proj.get('EPSG:3857');
  
          var mapafundo = new ol.layer.Tile({
              source: new ol.source.OSM()
          });
  
          var map = new ol.Map({
              /**                layers: [
               new ol.layer.Tile({
               source: new ol.source.OSM()
               }),
               new ol.layer.Vector({
               source: new ol.source.Vector({
               projection: projection,
               url: 'http://www.jourdan.org.br/wp-content/uploads/2015/01/VILA-NOVA.kml',
               format: new ol.format.KML()
               })
               })
               ], */
              target: 'map',
              controls: ol.control.defaults({
                  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                      collapsible: false
                  })
              }),
              view: new ol.View({
                  center: [-5462834.47, -3058929.70],
                  projection: projection,
                  zoom: 10
              })
          });
  
          map.addLayer(mapafundo);
  
  
          var vector = new ol.layer.Vector({
              source: new ol.source.Vector({
                  url: 'http://www.jourdan.org.br/wp-content/uploads/2015/01/VILA-NOVA.kml',
                  format: new ol.format.KML()
              }),
              visible: true
          });
  
  
          map.addLayer(vector);
  
  
  
          var exportPNGElement = document.getElementById('export-png');
  
          if ('download' in exportPNGElement) {
              exportPNGElement.addEventListener('click', function (e) {
                  map.once('postcompose', function (event) {
                      var canvas = event.context.canvas;
                      exportPNGElement.href = canvas.toDataURL('image/png');
                  });
                  map.renderSync();
              }, false);
          } else {
              var info = document.getElementById('no-download');
              /**
               * display error message
               */
              info.style.display = '';
          }
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But the kml layer doesn't appear. 
  here's the link to my website, where I want to show this map:
  <a href="http://www.jourdan.org.br/geojourdan-teste/" rel="nofollow">http://www.jourdan.org.br/geojourdan-teste/</a></p>
  
  <p>can anyone help me? thanks!</p>