3

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

6

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.

  • Recently, in newer versions of OpenLayers, the way to do this is: function GetKMLFromFeatures() { var format = new ol.format.KML({ 'maxDepth':10, 'extractStyles':true, }); var source = vector.getSource(); var features = source.getFeatures(); return format.writeFeatures(features); } – Fernando Aug 29 '17 at 14:31
1

@CaptDragon solution is right to generate kml file from features. if you want to save it client side, there is a tiny javascript + Flash library here. and very good example here, only one thing is that change data name to *.kml.

and the sample code with @CaptDragon's code and Downloadify:

<script type="text/javascript">
    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);
}

Downloadify.create('downloadify',{
filename: function(){
  return document.getElementById('filename').value + '.kml';
},
data: function(){ 
  return GetKMLFromFeatures(features);
},
onComplete: function(){ 
  alert('Your File Has Been Saved!'); 
},
onCancel: function(){ 
  alert('You have cancelled the saving of this file.');
},
onError: function(){ 
  alert('You must put something in the File Contents or there will be nothing to save!'); 
},
transparent: false,
swf: 'media/downloadify.swf',
downloadImage: 'images/download.png',
width: 100,
height: 30,
transparent: true,
append: false
 });
</script>

i hope it helps you...

  • Nice to see there is a different solution though I don't particularly like that it relies on flash. (+1) – CaptDragon Jun 21 '12 at 15:51
  • the basis of function relies on flash but i have been solving lots of problem when need client side... – Aragon Jun 21 '12 at 16:34
  • Thanks for the answer. I find this very handy but it might not be a food idea to use flash. In fact I was thinking would it be easier if i make a vector file on the server side serve it with geoserver and the user will have the option to edit it save it on the server side and then download it from there. But then again I know how to do the edit and save on server side but downloading it locally is an issue. – ardms Jun 22 '12 at 7:07
0

These functions work in Openlayers 3 and 4 and will get you the information you need. It may be displayed using an alert box, an elementId or saved to a file, if you wish:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.