[GIS] Openlayers create, edit and save/export to kml

kmlopenlayers-2

I'm trying to create, edit and save a point vector as kml file in an Openlayers app. I have managed the create and edit by adding and empty vector layer and then adding the control

OpenLayers.Control.EditingToolbar("name of the layer")

But how could I save/export this afterwards in kml format? I just need this on the browser side a popup to let me save the file locally not on the server side.

Thanks
Aris

Best Answer

OpenLayers.Format.KML will allow you to get all your features as a KML string.

like so:

Save as string:

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);
}

Download the string:

But if what you actually want is to download a KML file of the string, you will face the issue that the KML string already resides on the client's browser so you can't download it because it's already there. To Download it you'll have to send it back to a handler on the server side to return a response with the proper file extension and content type application/kml;

This will initiate a browser download.

Check my more indepth answer on StackOverflow.

Update:

A comment on SO pointed me to a new way of doing this. Though, make sure browser compatibility is appropriate.

Related Solutions

[GIS] How to label a dynamic KML file in OpenLayers

Have you checked the OpenLayers Labeled features example?

enter image description here

        var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
            styleMap: new OpenLayers.StyleMap({'default':{
                strokeColor: "#00FF00",
                strokeOpacity: 1,
                strokeWidth: 3,
                fillColor: "#FF5500",
                fillOpacity: 0.5,
                pointRadius: 6,
                pointerEvents: "visiblePainted",
                // label with \n linebreaks
                label : "name: ${name}\n\nage: ${age}",

                fontColor: "${favColor}",
                fontSize: "12px",
                fontFamily: "Courier New, monospace",
                fontWeight: "bold",
                labelAlign: "${align}",
                labelXOffset: "${xOffset}",
                labelYOffset: "${yOffset}"
            }}),
            renderers: renderer
        });

OpenLayers KML – Registering Onclick Handler for All KML Features

I believe i found the solution.

SOLUTION DEMONSTRATION

It will:

change the cursor for your feature to cursor:wait using jquery.
It will change the svg fill color of the feature using jquery.
And best of all it's efficient and will NOT trigger anything or disrupt anything else as far as my tests have shown.

Use a regular click Handler (EXAMPLE1, EXAMPLE2) and use the e.target to get the object on the map. If it returns a vector feature great, if not, ignore. It can work for all your layers or you can check the returned feature to see if it belongs to a layer you want it to trigger on.

I used Example #1 and replaced the latlon alert for this:

    if (e.target._featureId) {
        var feature = vectorLayer.getFeatureById(e.target._featureId);
        $(e.target).css('fill', '#000000');
        $(e.target).css('cursor', 'wait');
        $("div#info").append("<span>You just clicked on " + feature.id + "<span><br />");
    }