I can't display the KML

Question

I am taking my first steps in openlayers, I find it quite interesting, but based on a simple example to show OSM it has been impossible for me to add a layer with a KML file and show it together.

I understand that I am close to achieving it and that is why I go to you, thanks in advance for any help.

My code is the following:

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import OSM from 'ol/source/OSM';
import KML from 'ol/format/KML';
import VectorSource from 'ol/source/Vector';



var openstreet = new TileLayer({
    source: new OSM()
})

var geomapa = new VectorLayer({
    source: new VectorSource({
        url: 'maps/kml/doc.kml',
        format: new KML()
    })
});


const map = new Map({
    target: 'map',
    layers: [openstreet, geomapa],
    view: new View({
        center: [0, 0],
        zoom: 0
    })
});

There is a missing `;` at the end of `var openstreet`. Also check the console log: is the kml file found? What is the error? — JGH, May 21 '20 at 12:52
Does your code work with an external KML url, for example `https://openlayers.org/en/latest/examples/data/kml/2012-02-10.kml`? If it does it is likely your relative path is wrong or your server isn't set up for `.kml` MIME type — Mike, May 21 '20 at 12:56
The posted code works with the KML file that @Mike suggested as a test. [fiddle](https://jsfiddle.net/geocodezip/yvekp0ud/1/) (modified to use the legacy ol.js) — geocodezip, May 21 '20 at 15:21

score 0 · Answer 1 · edited May 25 '20 at 02:25

testing in https://jsfiddle.net/geocodezip/yvekp0ud/1/ I found weird trouble.

I was testing the same nodejs code with both URLs:

https://openlayers.org/en/latest/examples/data/kml/2012-02-10.kml  **works with nodejs**

https://geo.anantara.cl/maps/kml/doc.kml **dosen't works with nodejs**

So, I found is necessary configure an apache web server, including the following AddType

Apache Web Server Configuration

So, same nodejs code, the results were:

1) Doesn't works if both kml files are on my web server apache (2012-02-10.kml and doc.kml)

2) If only test with the file 2012-02-10.kml but in the server openlayers.org

For other hand, if i use the following url **http://kmlviewer.nsspot.net/**for to test both files on my web server, with google maps, works all.

I guess there is some bug in openlayers or in my code or perhaps the kml file generated with google earth don't like to openlayers.

My code is:

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import OSM from 'ol/source/OSM';
import KML from 'ol/format/KML';
import VectorSource from 'ol/source/Vector';

var openstreet = new TileLayer({
    source: new OSM()
});

var geomapa = new VectorLayer({
    source: new VectorSource({
        //url: 'https://geo.anantara.cl/maps/kml/doc.kml',
        //url: 'https://geo.anantara.cl/maps/kml/2012-02-10.kml',
        url: 'https://openlayers.org/en/latest/examples/data/kml/2012-02-10.kml',
        format: new KML()
    })
});

const map = new Map({
    target: 'map',
    layers: [openstreet, geomapa],
    view: new View({
        center: [0, 0],
        zoom: 0
    })
});

My HTML code is

  <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Using Parcel with OpenLayers</title>
      <style>
         #map {
         width: 400px;
         height: 250px;
         }
      </style>
   </head>
   <body>
      <div id="map"></div>
      <script src="./index.js"></script>
   </body>
</html>

Interesting with the following kml samples, dosen't works https://www.sedgeochem.uni-bremen.de/kml/borabora.kml — Pablo Silva, May 25 '20 at 03:30
Dosen't works too with http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/kml/lines.kml — Pablo Silva, May 25 '20 at 03:39
Hummm https://github.com/googlearchive/kml-samples/blob/gh-pages/kml/BalloonStyle/displayMode.kml Dosen't works — Pablo Silva, May 25 '20 at 03:42
and http://wp-osm-plugin.hanblog.net/wp-content/uploads/osm_map/OSM_02.kml nones.. so i guess openlayers need to read an special kml file, somebody knows what happens ? — Pablo Silva, May 25 '20 at 03:59

score 0 · Answer 2 · answered May 30 '20 at 01:20

Hurra! debugging parcel i found the following error

    Access to XMLHttpRequest at 'https://geo.anantara.cl/maps/kml/2012-02-10.kml' 
from origin 'http://localhost:1234' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 

[http://localhost:1234/]
Failed to load resource: net::ERR_FAILED [https://geo.anantara.cl/maps/kml/2012-02-10.kml]

So working in express server..

score 0 · Accepted Answer · answered May 30 '20 at 03:00

Solved!

Although I am taking my first steps in openlayers using parcel, as the official documentation indicates, I must state that:

1) If a kml file is published to an external server, the web server must be configured to tell the client that the resource is a KML file, therefore, these directives must be added to the server:

2) Thinking that there was a bug in openlayers + parcel, I ran into the error

    Access to XMLHttpRequest at 'https://geo.anantara.cl/maps/kml/2012-02-10.kml' 
    from origin 'http://localhost:1234' has been blocked by CORS policy: 
    No 'Access-Control-Allow-Origin' header is present on the requested resource. 

[http://localhost:1234/]
Failed to load resource: net::ERR_FAILED [https://geo.anantara.cl/maps/kml/2012-02-10.kml]

What means?, well it's necessary on my Apache server add the following code

 Header set Access-Control-Allow-Origin "http://127.0.0.1:1234"

And now works.., I suggest that parcel document the posting of a kml file to an external server and how the CORS setting is enabled.

I can't display the KML

3 Answers3