Source: Spinfoweb Blog

Spinfoweb Blog Export google map overlay to KML

Hello Friends,Today, I am bringing you the solution to export overlay to kml file. How will you do this? Don't worry I have the solution. Please check below code.function CreateKMLFile() { if (polyshap.length === 0 && markers.length === 0) { alert("Please Select at least one Polygon/Line/Icon"); return false; } var xml = ''; xml += '<?xml version="1.0" encoding="UTF-8"?>\n' + '<kml xmlns="http://www.opengis.net/kml/2.2">\n' + '<Document>\n<name>' + $("#pgTitle a").text() + '</name>\n'; if (polyshap.length > 0) { for (var i = 0; i < polyshap.length; i++) { var shp = polyshap[i]; var closure = FindByClosureID(shp.id); if (shp.shape.type.toLowerCase() === "polygon") { var polyPoints = shp.shape.getPath(); xml += '<Placemark>\n' + '<name>' + closure[0].ClosureName + '</name>\n' + '<styleUrl>#poly-C2185B-' + i + '-77-nodesc</styleUrl>\n' + '<Polygon>\n' + '<outerBoundaryIs>\n' + '<LinearRing>\n' + '<tessellate>0</tessellate>\n' + '<coordinates>\n'; for (var j = 0; j < polyPoints.length; j++) { var lat = polyPoints.getAt(j).lat(); var longi = polyPoints.getAt(j).lng(); xml += roundVal(longi) + "," + roundVal(lat) + ",0.0 \n"; } xml += '</coordinates>\n' + '</LinearRing>\n' + '</outerBoundaryIs>\n' + '</Polygon>\n' + '</Placemark>\n' + '<Style id="poly-C2185B-' + i + '-77-nodesc-normal">\n' + '<LineStyle>\n' + '<color>ff' + closure[0].Color.replace('#', '').match(/[a-fA-F0-9]{2}/g).reverse().join('') + '</color>\n' + '<width>3</width>\n' + '</LineStyle>\n' + '<PolyStyle>\n' + '<color>7D' + closure[0].Color.replace('#', '').match(/[a-fA-F0-9]{2}/g).reverse().join('') + '</color>\n' + '<fill>1</fill>\n' + '<outline>1</outline>\n' + '</PolyStyle>\n' + '</Style>\n' + '<Style id="poly-C2185B-' + i + '-77-nodesc-highlight">\n' + '<LineStyle>\n' + '<color>ff' + closure[0].Color.replace('#', '').match(/[a-fA-F0-9]{2}/g).reverse().join('') + '</color>\n' + '<width>5</width>\n' + '</LineStyle>\n' + '<PolyStyle>\n' + '<color>32' + closure[0].Color.replace('#', '').match(/[a-fA-F0-9]{2}/g).reverse().join('') + '</color>\n' + '<fill>1</fill>\n' + '<outline>1</outline>\n' + '</PolyStyle>\n' + '</Style>\n' + '<StyleMap id="poly-C2185B-' + i + '-77-nodesc">\n' + '<Pair>\n' + '<key>normal</key>\n' + '<styleUrl>#poly-C2185B-' + i + '-77-nodesc-normal</styleUrl>\n' + '</Pair>\n' + '<Pair>\n' + '<key>highlight</key>\n' + '<styleUrl>#poly-C2185B-' + i + '-77-nodesc-highlight</styleUrl>\n' + '</Pair>\n' + '</StyleMap>\n'; } else if (shp.shape.type.toLowerCase() === "line") { var polyPoints = shp.shape.getPath(); xml += '<Placemark>\n' + '<name>' + closure[0].ClosureName + '</name>\n' + '<styleUrl>#line-C2185B-' + i + '-77-nodesc</styleUrl>\n' + '<LineString>\n' + '<tessellate>0</tessellate>\n' + '<coordinates>\n'; for (var j = 0; j < polyPoints.length; j++) { var lat = polyPoints.getAt(j).lat(); var longi = polyPoints.getAt(j).lng(); xml += roundVal(longi) + "," + roundVal(lat) + ",0.0 \n"; } xml += '</coordinates>\n' + '</LineString>\n' + '</Placemark>\n' + '<Style id="line-C2185B-' + i + '-77-nodesc-normal">\n' + '<LineStyle>\n' + '<color>ff' + closure[0].Color.replace('#', '').match(/[a-fA-F0-9]{2}/g).reverse().join('') + '</color>\n' + '<width>' + closure[0].LineWidth + '</width>\n' + '</LineStyle>\n' + '</Style>\n' + '<Style id="line-C2185B-' + i + '-77-nodesc-highlight">\n' + '<LineStyle>\n' + '<color>ff' + closure[0].Color.replace('#', '').match(/[a-fA-F0-9]{2}/g).reverse().join('') + '</color>\n' + '<width>3</width>\n' + '</LineStyle>\n' + '</Style>\n' + '<StyleMap id="line-C2185B-' + i + '-77-nodesc">\n' + '<Pair>\n' + '<key>normal</key>\n' + '<styleUrl>#line-C2185B-' + i + '-77-nodesc-normal</styleUrl>\n' + '</Pair>\n' + '<Pair>\n' + '<key>highlight</key>\n' + '<styleUrl>#line-C2185B-' + i + '-77-nodesc-highlight</styleUrl>\n' + '</Pair>\n' + '</StyleMap>\n'; } } } if (markers.length > 0) { for (var i = 0; i < markers.length; i++) { var shp = markers[i]; var closure = FindByClosureID(shp.id); url = "http://beast.activeconnex.com/ActiveConnex3/" + tRoute + "GetIconImage?imageName=" + closure[0].IconPath + "&amp;color=" + closure[0].Color.replace("#", "") + "&amp;size=" + closure[0].IconSize; xml += '<IconStyle id="my-vector-1">\n' +'<scale>1.8</scale>\n' +' <heading>90.0</heading>\n' +'<Icon>\n' + '<href>' + url + '</href>\n' +' </Icon> \n' +'</IconStyle>\n' +'<Placemark>\n' + '<name>' + closure[0].ClosureName + '</name>\n' +' <styleUrl>#my-vector-1</styleUrl>\n' +'<Point>\n' + '<coordinates>' + shp.marker.position.lng() + ',' + shp.marker.position.lat() + '</coordinates>\n' +'</Point></Placemark>\n'; } } xml += '</Document>\n' +'</kml>'; console.log(xml); download(xml, $("#pgTitle a").text()+".kml", "text/plain")} function roundVal(val) { if (val.toString().length < 9) { return val; } else { var dec = 6; var result = Math.round(val * Math.pow(10, dec)) / Math.pow(10, dec); return result; }} You can contact me anytime if you have any problem.Please share your comments.

Read full article »
Est. Annual Revenue
$100K-5.0M
Est. Employees
1-25
CEO Avatar

Founder & CEO

Samir Mistry

CEO Approval Rating

65/100

Read more