I am using a kml
file for displaying map with custom boundary lines. That kml file is downloaded from some website. In that file, inside the placemark
tag there is no point
tag for display icons. Eg:
<Placemark>
<name>Spot 2</name>
<description>.....</description>
<styleUrl>....</styleUrl>
<MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>
.........
</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
</Placemark>
That is what placemark
tag contains in my kml file. And I need,
1) How can I add point
tag for all placemark
tag. Is there any way to add dynamically?. My kml file has 5000 and above placemarks. 2) Point tag coordinates will refers to the center of the polygon.
i.e) I need the following
<Placemark>
<name>Spot 2</name>
<description>.....</description>
<styleUrl>....</styleUrl>
<MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>
.........
</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
<Point>
<coordinates>144.253,-36.6632,0</coordinates>
</Point>
</Placemark>
Note:
I am using geoxml3 parser to display kml layer in google maps.
This is my html file,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script>
function initialize() {
var usa = new google.maps.LatLng(41.875696,-87.624207);
var mapOptions = {
zoom: 4,
center: usa,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var myParser = new geoXML3.parser({
map: map
});
var kml = myParser.parse('http://localhost/test/DFWNorth.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
This is my sample kml file,
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"
xmlns:gx="http://www.google.com/kml/ext/2.2">
<Document>
<name>Real Estate Portal USA Parcels</name>
<open>1</open>
<Style id="parcel">
<LineStyle>
<color>ff48a7ff</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<outline>1</outline>
<color>00ffffff</color>
</PolyStyle>
</Style>
<Style id="hl_parcel">
<IconStyle>
<scale>0.3</scale>
<Icon>
<href>http://bus.w.pw/R.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<color>9900ffff</color>
<scale>1</scale>
</LabelStyle>
<LineStyle>
<color>ff00ffff</color>
<width>1.5</width>
</LineStyle>
<PolyStyle>
<outline>1</outline>
<color>5f000000</color>
</PolyStyle>
</Style>
<Folder>
<open>1</open>
<name>Selected Parcels</name>
<Placemark>
<name><![CDATA[1100 N 27TH Ave]]></name>
<description>
............
</description>
<styleUrl>#hl_parcel</styleUrl>
<MultiGeometry>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>-97.032117983752471,32.928768626517076 -97.024643584146915,32.923035186813181 -97.024619516424863,32.923056622674181 -97.023311876445746,32.922172553473487 -97.023027365973348,32.921986354508512 -97.022978167636879,32.921954156605246 -97.022101518923066,32.921458657105333 -97.021852382220004,32.921328433111441 -97.021603007761968,32.921212207649802 -97.021353262564418,32.921103685381986 -97.020040739077089,32.92059307329437 -97.019977072943703,32.920561642411542 -97.019978949582082,32.920357989560173 -97.019981935486342,32.920034178750491 -97.032338461906804,32.92018039810069 -97.03217983292177,32.928807043604458 -97.032117983752471,32.928768626517076</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
</Placemark>
.........
...........
geoxml3 parses the KML to native google.maps.Polygon objects. You can process those polygons in the
afterParse
function:To get the centroid of the polygon:
Note that the above only "really works" for regular polygons, so irregular polygons with concave edges the center might not be "in" the polygon.
Working example