How to create and export a kml file from a web page using javascript

I have a web page that generates a polygon representing satellite beam coverage patterns on the earth's surface. The surface map images on that page are from Google Maps API. It has been requested that the page offers the option to export the contour polygon as a kml file suitable for input to Google Maps so that the contour may be viewed on top of the Google Earth surface images.

The fragment of javascript code in this page assumes that a set of longitude and latitude coordinates pairs have already been created. The code here builds these coordinates into a text string to be surrounded by <coordinates> and </coordinates>. I call this variable kmlcoordinates.

The code was work in progress. For the final version see content of the satellite beam design link above. I have tried to get the output lkm file to look exactly like a kml file downloaded from Google Earth.

It is recommended that you examine the javascript code embedded in this page. In Chrome, do something like "View page source", typically by right mouse click followed by selection of "View page source". This is easier to read than the red code below.

Two further text strings, the kmlheader and kmlfooter are then merged to produce the complete javascript string, which then may be exported to the user as a kml file into their Download folder on their PC. Immediately prior to the export download, a pop up text box appears that gives the user has the option to edit the destination file name. This all assumes using a Chrome browser.

This example kml file, drawing a yellow outline polygon with a transparent middle area, is produced from this javascript code:

var kmlheader = "<\?xml version\=\"1\.0\" encoding\=\"UTF\-8\"\?\>\n\ \

<kml xmlns\=\"http:\/\/www.opengis.net\/kml\/2\.2\" xmlns:gx\=\"http:/\/www.google.com\/kml\/ext\/2\.2\" 
xmlns:kml\=\"http:\/\/www\.opengis\.net\/kml\/2\.2\" xmlns:atom\=\"http\:\/\/www\.w3\.org\/2005\/Atom\"\>\n 
\

<Document\>\n \

<name\>kml-test-47<\/name\>\n \

<Placemark\>\n \

<Style\>\n \

<LineStyle\>\n \

<color\>ffff00ff<\/color\>\n \

<width\>6<\/width\>\n \

<\/LineStyle\>\n \

<PolyStyle\>\n \

<color\>0000ff00<\/color\>\n \

<\/PolyStyle\>\n \

<\/Style\>\n \

<Polygon\>\n \

<outerBoundaryIs\>\n \

<LinearRing\>\n \

<coordinates\> ";

kmlcoordinates = "\n " + long1 + "," + lat1 + "," + height +

"\n " + long2 + "," + lat2 + "," + height +

"\n " + long3 + "," + lat3 + "," + height +

"\n " + long4 + "," + lat4 + "," + height +

"\n " + long5 + "," + lat5 + "," + height +

"\n " + long6 + "," + lat6 + "," + height;

kmlfooter = "\n <\/coordinates\>\n \

<\/LinearRing\>\n \

<\/outerBoundaryIs\>\n \

<\/Polygon\>\n \

<\/Placemark\>\n \

<\/Document>\n \

<\/kml\> "

To see the actual exported kml file (a plain text file with all the escape characters cleaned out) you need to click on the button below and then examine the file in your Downloads folder, using a text editor like Notepad++.

If this page works, after you click on the "Save .kml type file to your local Downloads folder" button below, a popup box should appear indicating the a file is about to be exported to your PC download folder. You have the option to edit the file name and then click Save to activate the download.

I hope it works !

Best regards, Eric

Feedback on technical errors or problems with this page welcome to: eric@satsig.net Many thanks.

Page started 14 May 2024, amended 28 May 2024.