I have a kml file:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Ab Kettleby</name>
<Icon>
<href>https://wcsb.nz/wellringers/dove6.bmp</href>
</Icon>
<Point>
<coordinates>-0.92747,52.79858</coordinates>
</Point>
</Placemark>
</kml>
I reference this from an html file with a piece of javascript:
let reader = new H.data.kml.Reader('doveshort1.kml');
reader.parse();
kml = reader.getLayer();
map.addLayer(kml);
The file is read because a map is produced with the default bubble marker in the right place. Why is the referenced marker not used?
Your KML is not valid, see the KML Reference.
<Placemark id="ID">
<StyleSelector>...</StyleSelector>
</Placemark>
<StyleSelector> is abstract, extended By <Style>
<Style id="ID">
<!-- extends StyleSelector -->
<!-- specific to Style -->
<IconStyle>...</IconStyle>
</Style>
<IconStyle id="ID">
<!-- specific to IconStyle -->
<Icon>
<href>...</href>
</Icon>
</IconStyle>
This works:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Ab Kettleby</name>
<Style id="ID">
<!-- specific to Style -->
<IconStyle>
<Icon>
<href>https://wcsb.nz/wellringers/dove6.bmp</href>
</Icon>
</IconStyle>
</Style>
<Point>
<coordinates>-0.92747,52.79858</coordinates>
</Point>
</Placemark>
</kml>
live example
code snippet:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
},
});
const ctaLayer = new google.maps.KmlLayer({
url: "http://www.geocodezip.com/geoxml3_test/kml/SO_20210121_Icon1.kml",
map: map,
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>KML Layers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
I am working on a KML file with two co ordinates that I use to draw line strings. It works fine when the roads are straight, but whenever the road curves the lines do not curve. Here is the KML code I use
<?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" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<open>1</open>
<Style id="s_ylw-pushpin_hl">
<IconStyle>
<color>ffff5500</color>
<scale>0.583333</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/paddle/wht-blank.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<color>00ffffff</color>
</LabelStyle>
<ListStyle />
<LineStyle>
<color>ff0000ff</color>
<width>3.6</width>
</LineStyle>
<PolyStyle>
<fill>0</fill>
</PolyStyle>
</Style>
<StyleMap id="m_pushpin">
<Pair>
<key>normal</key>
<styleUrl>#s_ylw-pushpin</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#s_ylw-pushpin_hl</styleUrl>
</Pair>
</StyleMap>
<Style id="s_ylw-pushpin">
<IconStyle>
<color>ffff5500</color>
<scale>0.5</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/paddle/wht-blank.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<color>00ffffff</color>
</LabelStyle>
<ListStyle />
<LineStyle>
<color>ff0000ff</color>
<width>3.6</width>
</LineStyle>
<PolyStyle>
<fill>0</fill>
</PolyStyle>
</Style>
<Placemark>
<name>Test Fac 10-26-2020</name>
<description>Sidewalk</description>
<sidewalk_missing>No</sidewalk_missing>
<LineString>
<extrude>1</extrude>
<tessellate>1</tessellate>
<coordinates>-104.818968772888,39.710975093838,0 -104.810267686844,39.708465999778,0</coordinates>
</LineString>
<Style>
<LineStyle>
<color>ffff0000</color>
<width>5</width>
</LineStyle>
</Style>
</Placemark>
<Placemark>
<name>Test Fac 10-26-2020</name>
<description>Sidewalk 1</description>
<sidewalk_missing>No</sidewalk_missing>
<LineString>
<extrude>1</extrude>
<tessellate>1</tessellate>
<coordinates>-104.819033145905,39.707747919881,0 -104.814473390579,39.70400883137,0</coordinates>
</LineString>
<Style>
<LineStyle>
<color>ffff0000</color>
<width>5</width>
</LineStyle>
</Style>
</Placemark>
</Document>
</kml>
I would like the LineString to follow similar to the yellow lines on the road. I looked into Directions API, but can't figure out a better way.
I was able to query Google Roads API as below and parse the json response and add multi geometry to KML file with the resulting co-ordinates
string url = #"https://roads.googleapis.com/v1/snapToRoads?path=" + beginLat + "," + beginLon + "|" + endLat + "," + endLon + "&interpolate=true&key=";
System.Net.WebRequest request = System.Net.WebRequest.Create(url);
System.Net.WebResponse response = request.GetResponse();
System.IO.Stream data = response.GetResponseStream();
System.IO.StreamReader reader = new System.IO.StreamReader(data);
string responseFromServer = reader.ReadToEnd();
response.Close();
Here is the json parser code. The co-ordinates are inside the "locations" table inside the dataset.
jsonString = $"{{ \"snappedPoints\": {{{jsonString.Trim().TrimStart('{').TrimEnd('}')}}} }}";
var xd = JsonConvert.DeserializeXmlNode(jsonString);
var result = new DataSet();
result.ReadXml(new XmlNodeReader(xd), mode);
return result;
Thank you all for the help and pointing me towards the right direction.
I had developed an application where in the data fetches from our database and shows up different polygons on Google Earth by generating an kml file.
I was able to do all sort of things like showing polygons,showing up placemarks with name and description, but was unable to show up the icon image on polygons.
I have checked the kml in notepad and it is generating in correct format.
I don't understand where I am getting wrong,Why my placemark icon is not showing up in my Google Earth software.
Here I am posting my whole kml code.
You could copy it into a notepad and save it as kml.
Note:- Google Earth Software is installed in my computer, through which I view the downloaded KML File.
Please help me in this regard.
Thanking You.
Regards,
BhanuChandra
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="bsr">
<IconStyle>
<scale>1.5</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png</href>
</Icon>
</IconStyle>
<LineStyle>
<width>3</width>
<color>ff0000ff</color>
<colorMode>random</colorMode>
</LineStyle>
<PolyStyle>
<color>51400FF</color>
<LabelStyle>
<color>7fffaaff</color>
<scale>1.5</scale>
</LabelStyle>
</PolyStyle>
</Style>
<Placemark>
<styleUrl>#bsr</styleUrl>
<name>Near Subbaraopally Village</name>
<description><![CDATA[<b>Circle : </b>Adilabad<br/><b>Division : </b>Bellampally<br/><b>Range : </b>Bellampally<br/><b>Year : </b>2015<br/><b>Type : </b>Block<br/><b>Planting Method : </b>Labour Intensive(AR)<hr><br/><font color=LightSlateGray size = 1>ID : 108</font>]]></description>
<MultiGeometry>
<Polygon>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>ALTITUDE_CLAMP_TO_GROUND</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>79.49749,19.02856,0 79.49763,19.02929,0 79.49739,19.02944,0 79.4979,19.0311,0 79.49628,19.03258,0 79.5002,19.0356,0 79.5007,19.0342,0 79.50138,19.03229,0 79.4997,19.03065,0 79.49749,19.02856,0 </coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
</Placemark>
<Placemark>
<styleUrl>#bsr</styleUrl>
<name>Bamboo with Misc 5x5 Bamboo (2.5x2.5 Misc) 10 Ha Near Gangaram Nagar</name>
<description><![CDATA[<b>Circle : </b>Adilabad<br/><b>Division : </b>Bellampally<br/><b>Range : </b>Bellampally<br/><b>Year : </b>2015<br/><b>Type : </b>Block<br/><b>Planting Method : </b>Semi Mechanical(AR)<hr><br/><font color=LightSlateGray size = 1>ID : 350599</font>]]></description>
<MultiGeometry>
<Polygon>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>ALTITUDE_CLAMP_TO_GROUND</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>79.46981,19.07547,0 79.46986,19.07352,0 79.46985,19.07323,0 79.46861,19.07353,0 79.46556,19.07297,0 79.46554,19.07353,0 79.46607,19.07423,0 79.46693,19.07483,0 79.4679,19.0748,0 79.46785,19.07613,0 79.4698,19.07641,0 79.46981,19.07547,0 </coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
</Placemark>
<Placemark>
<styleUrl>#bsr</styleUrl>
<name>Misc. Plantation at Waripet</name>
<description><![CDATA[<b>Circle : </b>Adilabad<br/><b>Division : </b>Bellampally<br/><b>Range : </b>Bellampally<br/><b>Year : </b>2015<br/><b>Type : </b>Block<br/><b>Planting Method : </b>Labour Intensive(AR)<hr><br/><font color=LightSlateGray size = 1>ID : 350782</font>]]></description>
<MultiGeometry>
<Polygon>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>ALTITUDE_CLAMP_TO_GROUND</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>79.43114,19.05873,0 79.43082,19.05947,0 79.43044,19.06048,0 79.42989,19.0615,0 79.42976,19.06282,0 79.42985,19.06278,0 79.43007,19.06333,0 79.4304,19.06406,0 79.43073,19.06469,0 79.43098,19.06514,0 79.43174,19.06511,0 79.43106,19.06442,0 79.43066,19.06397,0 79.43061,19.06345,0 79.43005,19.06156,0 79.43132,19.05964,0 79.4313,19.05883,0 79.43114,19.05873,0 </coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
</Placemark>
<Placemark>
<styleUrl>#bsr</styleUrl>
<name>Misc. Plantation at VSS Waripet</name>
<description><![CDATA[<b>Circle : </b>Adilabad<br/><b>Division : </b>Bellampally<br/><b>Range : </b>Bellampally<br/><b>Year : </b>2015<br/><b>Type : </b>Block<br/><b>Planting Method : </b>Semi Mechanical(AR)<hr><br/><font color=LightSlateGray size = 1>ID : 350783</font>]]></description>
<MultiGeometry>
<Polygon>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>ALTITUDE_CLAMP_TO_GROUND</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>79.43598,19.06411,0 79.43665,19.0637,0 79.43723,19.06328,0 79.43742,19.06237,0 79.43725,19.06227,0 79.43741,19.06162,0 79.43762,19.06168,0 79.43788,19.06087,0 79.43873,19.05984,0 79.43935,19.05886,0 79.43988,19.05789,0 79.43965,19.05784,0 79.43924,19.05835,0 79.43835,19.05918,0 79.43786,19.05967,0 79.43732,19.06053,0 79.43686,19.06133,0 79.43709,19.06148,0 79.43687,19.06222,0 79.43647,19.06213,0 79.43648,19.06247,0 79.43614,19.0634,0 79.43954,19.05254,0 79.43944,19.05298,0 79.43923,19.05334,0 79.43926,19.05383,0 79.43931,19.05415,0 79.43893,19.05488,0 79.43867,19.05509,0 79.43887,19.05533,0 79.43886,19.05543,0 79.43893,19.05592,0 79.43939,19.05605,0 79.43974,19.05604,0 79.43945,19.05522,0 79.43949,19.05503,0 79.43952,19.05487,0 79.43948,19.05458,0 79.43948,19.05444,0 79.4395,19.05405,0 79.43958,19.05375,0 79.43974,19.05278,0 79.43975,19.05255,0 79.43598,19.06411,0 </coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
</Placemark>
</Document>
</kml>
Primary issue is to show an icon and label while using a polygon requires a Point to appear inside the MultiGeometry alongside the Polygon. If the placemark geometry is a polygon then an icon and label will NOT appear on the map - that needs a point.
Here is an example of such a geometry for the first placemark:
<MultiGeometry>
<Point>
<coordinates>79.49883,19.03208</coordinates>
</Point>
<Polygon>
<extrude>1</extrude>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>79.49749,19.02856,0 79.49763,19.02929,0 79.49739,19.02944,0 79.4979,19.0311,0 79.49628,19.03258,0 79.5002,19.0356,0 79.5007,19.0342,0 79.50138,19.03229,0 79.4997,19.03065,0 79.49749,19.02856,0 </coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
There are also some minor errors in the KML. First, LabelStyle is inside the PolyStyle element. Next,the altitudeMode values are invalid: ALTITUDE_CLAMP_TO_GROUND must be changed to clampToGround .
I have a rather simple .kml file to display a polygon on a Google Map. By default, the polygon causes the cursor to switch to a hand/pointer, and when clicked, displays an empty description bubble.
I have no description, therefore the white bubble (infowindow) is empty.
And what I want is NO bubble at all. I'd love for the hand/pointer cursor to go away as well.
I've found nothing on the web that answers this question.
Thanks!
I have added my code to my original question.
<?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" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<name>RMAhidden.kml</name>
<Style id="poly-000000-1-76-nodesc-normal0">
<LineStyle>
<color>004b8800</color>
<width>0</width>
</LineStyle>
<PolyStyle>
<color>99359ca3</color>
</PolyStyle>
</Style>
<Style id="poly-000000-1-76-nodesc-highlight0">
<LineStyle>
<color>004b8800</color>
<width>0</width>
</LineStyle>
<PolyStyle>
<color>99359ca3</color>
</PolyStyle>
</Style>
<StyleMap id="poly-000000-1-76-nodesc1">
<Pair>
<key>normal</key>
<styleUrl>#poly-000000-1-76-nodesc-normal0</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#poly-000000-1-76-nodesc-highlight0</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<styleUrl>#poly-000000-1-76-nodesc1</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
-104.7937775,39.87088139999999,0 -104.8653603,39.87061789999999,0 -104.8996925,39.8413634,0 -104.8979759,39.8397817,0 -104.8978043,39.836091,0 -104.8978043,39.83371830000001,0 -104.8996925,39.8317409,0 -104.9022675,39.830159,0 -104.9034691,39.8268633,0 -104.9031258,39.8127557,0 -104.9010658,39.8126238,0 -104.9000359,39.8113052,0 -104.8981476,39.8087998,0 -104.895401,39.8074811,0 -104.8916245,39.80734919999999,0 -104.8845863,39.8070855,0 -104.884511,39.812922,0 -104.8667336,39.8131513,0 -104.8667336,39.7985133,0 -104.8478508,39.7986452,0 -104.8478508,39.8004916,0 -104.8435593,39.8004916,0 -104.8437309,39.7982495,0 -104.7917175,39.7979858,0 -104.7910309,39.8611313,0 -104.7912025,39.8661383,0 -104.7937775,39.87088139999999,0
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
<description></description>
<ExtendedData>
<Data name="Id">
</Data>
<Data name="T_NAME">
</Data>
<Data name="T_STATUS">
</Data>
<Data name="T_R_LENGTH">
</Data>
<Data name="T_SOURCE">
</Data>
<Data name="T_BIKE">
</Data>
<Data name="FEAT_RAST">
</Data>
<Data name="Section">
</Data>
<Data name="Sect_Name">
</Data>
</ExtendedData>
</Placemark>
</Document>
</kml>
To disable the popup balloon you can add a BalloonStyle with displayMode=hide to your Style.
If <displayMode> is hide, Google Earth does not display the balloon.
<Style id="poly-000000-1-76-nodesc-normal0">
<BalloonStyle>
<displayMode>hide</displayMode> <!-- default or hide -->
</BalloonStyle>
<LineStyle>
<color>004b8800</color>
<width>0</width>
</LineStyle>
<PolyStyle>
<color>99359ca3</color>
</PolyStyle>
</Style>
Note that <BalloonStyle> and <displayMode> elements may not be supported in all JavaScript libraries if that is how you are rendering the KML