OpenLayers load KML 64 string data URI

Question

I am trying to load a KML file to Google Maps using OpenLayers 2, below is the code:

var wms = new OpenLayers.Layer.WMS(
          "OpenLayers WMS",
          "http://vmap0.tiles.osgeo.org/wms/vmap0",
          { layers: 'basic' }
      );

var sundials = new OpenLayers.Layer.Vector("KML", {
    projection: this.application.map.map.displayProjection,
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        //url: "http://dev.openlayers.org/examples/kml/lines.kml",
        //url: this.application.CommonLocation + "scripts/Testing.kml",
        //url: 'data:application/vnd.google-earth.kml+xml;base64,' + this.tmpKml,
        url: 'data:application/vnd.google-earth.kml+xml;base64,' + "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxrbWwgeG1sbnM9Imh0dHA6Ly93d3cub3Blbmdpcy5uZXQva21sLzIuMiI+DQogIDxEb2N1bWVudD4NCiAgICA8U3R5bGUgaWQ9ImJvdW5kYXJ5TGluZUNvbG9yMSI+DQogICAgICA8TGluZVN0eWxlPg0KICAgICAgICA8Y29sb3I+ZmYwMDAwMDA8L2NvbG9yPg0KICAgICAgICA8d2lkdGg+Mzwvd2lkdGg+DQogICAgICA8L0xpbmVTdHlsZT4NCiAgICAgIDxQb2x5U3R5bGU+DQogICAgICAgIDxmaWxsPmZhbHNlPC9maWxsPg0KICAgICAgPC9Qb2x5U3R5bGU+DQogICAgPC9TdHlsZT4NCiAgICA8Rm9sZGVyPg0KICAgICAgPG5hbWU+U295YmVhbiBZaWVsZDwvbmFtZT4NCiAgICAgIDxQbGFjZW1hcms+DQogICAgICAgIDxuYW1lPlNveWJlYW4gWWllbGQgKDEpPC9uYW1lPg0KICAgICAgICA8c3R5bGVVcmw+I2JvdW5kYXJ5TGluZUNvbG9yMTwvc3R5bGVVcmw+DQogICAgICAgIDxQb2x5Z29uPg0KICAgICAgICAgIDxvdXRlckJvdW5kYXJ5SXM+DQogICAgICAgICAgICA8TGluZWFyUmluZz4NCiAgICAgICAgICAgICAgPGNvb3JkaW5hdGVzPi05MS4zMzQyNjYzNzU5MTU0LDMyLjUwMzQ3NjY1MDA5MjcNCi05MS4zMzQyNjY3MDg0ODMxLDMyLjUwMzQ1ODYxNTU1NDgNCi05MS4zMzQyOTg2MzI1MTcxLDMyLjUwMjg4MTc5MjEyMzINCi05MS4zMzQ3NTI4NjQzMDQ2LDMyLjUwMTMzNjQ1NjYwNTgNCi05MS4zMzUzNDkwODMzOTI2LDMyLjUwMTMyNjMwODc5NTMNCi05MS4zMzcxNzk5NzIwMzEzLDMyLjUwMTMxNDQ0NTU3Mw0KLTkxLjMzODExNjY5ODMyMSwzMi41MDEzMDg3ODUxMTIyDQotOTEuMzM4NjQ4NzQwODEwMiwzMi41MDEzMTU4MTI3NTQNCi05MS4zMzg2NjYzNzQyMjEyLDMyLjUwMTUxNDQ3NDIzODgNCi05MS4zMzg3MjYyOTUxNTEyLDMyLjUwMjg4NjIyNjcyMTYNCi05MS4zMzg3NDA2MTIxNzY2LDMyLjUwMzI2NTIzMzk2MTQNCi05MS4zMzg3ODA1Nzg0MjYyLDMyLjUwNDU2NDU2Njc1MTENCi05MS4zMzg5MTMxMzgwMDk2LDMyLjUwODkzMTc0MzUwMDQNCi05MS4zMzg5MjE4MTY0Nzk2LDMyLjUwOTYxNzMzODAwNDgNCi05MS4zMzg5ODU5MzIwNTc2LDMyLjUxNTM5MDY0NDM1MTgNCi05MS4zMzg5ODMyNzc4MjU3LDMyLjUxNTUzNDkyMDcyNTkNCi05MS4zMzg4MTEwMDY0ODk5LDMyLjUxNTY0MDg3ODk3NjENCi05MS4zMzc4NzQxMzEyNTQsMzIuNTE1NjQ2NTM5NzQwNg0KLTkxLjMzNTkzNjUyNjIyMzQsMzIuNTE1NjU2OTk1NDQyMg0KLTkxLjMzNDk1NzA4MTUyOCwzMi41MTU2NjIwNzExOTI1DQotOTEuMzM0NjU5MDkwOTUxMiwzMi41MTU2NTgxMjU3MDgNCi05MS4zMzQ1OTYyMzM4MDc4LDMyLjUxNTYwMzE3NjYzNzINCi05MS4zMzQ1Nzk5Mzg2NjkxLDMyLjUxNTMzMjM3NzE4NDgNCi05MS4zMzQ1MTA0MzkzMDU4LDMyLjUxMzMyOTEzNzM4MDMNCi05MS4zMzQ0OTY4MDU2NzQ1LDMyLjUxMjkxNDA2MTc0MzINCi05MS4zMzQyNjYzNzU5MTU0LDMyLjUwMzQ3NjY1MDA5Mjc8L2Nvb3JkaW5hdGVzPg0KICAgICAgICAgICAgPC9MaW5lYXJSaW5nPg0KICAgICAgICAgIDwvb3V0ZXJCb3VuZGFyeUlzPg0KICAgICAgICA8L1BvbHlnb24+DQogICAgICA8L1BsYWNlbWFyaz4NCiAgICA8L0ZvbGRlcj4NCiAgPC9Eb2N1bWVudD4NCjwva21sPg==",
        format: new OpenLayers.Format.KML({
            extractStyles: true,
            extractAttributes: true
        })
    })
});

However, Chrome throw the following error:

XMLHttpRequest cannot load data:application/vnd.google-earth.kml+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIi…AgICA8L1BsYWNlbWFyaz4NCiAgICA8L0ZvbGRlcj4NCiAgPC9Eb2N1bWVudD4NCjwva21sPg==. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

I have followed the step in:

https://stackoverflow.com/questions/12409600/error-request-header-field-content-type-is-not-allowed-by-access-control-allow

But still unable to solve it. Can someone please help?

Answer 1

Your encoded string is a KML document. You already have the features in your encoded string, right?

You can use the native Javascript atob() function to decode the string. Try it on the Javascript console.

Afterwards, use OpenLayers.Format.KML to parse the string to create a new vector layer.

There is already a SO question related with KML parsing in OpenLayers.