Openlayers write and save a KML based on your map

Question

Is it possible to write and save a KML from OpenLayers? Anyone know of an example of exporting one?

Answer 1

Here's some JQuery action to save:

$('#saveKML').click(function() {
 var kmlFormat = new OpenLayers.Format.KML();
 var newWindow = window.open('', 
  'KML Export ' + (new Date()).getTime(), "width=300,height=300");
   newWindow.document.write('<textarea id="kml" style="width: 100%; height: 100%">' + 
   kmlFormat.write(features) + '</textarea>');
});

Answer 2

IF you are using Openlayers 3 or 4, you will find that the syntax of previous (2012) answers does not work anymore.

This does:

        function GetKMLFromFeatures(features) {
            var format = new ol.format.KML();
            var kml = format.writeFeatures(features, {featureProjection: 'EPSG:3857'});
            return kml;
        }
        function GetGeoJSONFromFeatures(features) {
            var format = new ol.format.GeoJSON();
            var geoJSON = format.writeFeatures(features, {featureProjection: 'EPSG:3857'});
            return geoJSON;
        }
        function GetFeaturesFromLayer(layer) {
            var source = layer.getSource();
            var features = source.getFeatures();
            return features;
        }

Answer 3

You can export only the vector features to KML.

function GetKMLFromFeatures(features) {
    var format = new OpenLayers.Format.KML({
        'maxDepth':10,
        'extractStyles':true,
        'internalProjection': map.baseLayer.projection,
        'externalProjection': new OpenLayers.Projection("EPSG:4326")
    });

    return format.write(features);
}

---

UPDATE

In order to force the browser to download the KML string as a KML file you need to send that string back to the server-side so it can be returned to the browser as a file to download.

You haven't specified what language/platform/etc you are using on the server-side But this is what i did in C#.

I created a handler which takes in a the filename from the querystring and the KML from a textarea form.

KMLDownload.ashx:

<%@ WebHandler Language="C#" Class="KMLDownload" %>

using System;
using System.Web;

public class KMLDownload : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {


        HttpResponse response = context.Response;

        string kml = context.Request["kml"];
        string filename = context.Request.QueryString["filename"];

        if (String.IsNullOrEmpty(kml))
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("{\"error\":\"No files recevied\"}");
        }
        else
        {

            if (String.IsNullOrEmpty(filename)){
                filename = "Features_KML.kml";
            }

            // force a download of the kml file.
            response.Clear();
            response.ContentType = "application/kml";
            response.AddHeader("Content-Disposition", "attachment; filename=" + filename);
            response.AddHeader("content-legth", kml.Length.ToString());
            response.Write(kml.ToString());
            response.End();
        }

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

Then from my javascript side i simply call this to initiate the download:

var filename = "NameofKMLfileI_WANT.kml";

var url = "secure/KMLDownload.ashx";
if (filename) {
    url += "?filename=" + filename;
}

var input = '<TEXTAREA name="kml">' + kml + '</TEXTAREA>';

//send request
jQuery('<form action="' + url + '" method="post">' + input + '</form>').appendTo('body').submit().remove();