I have a KML file containing placemarks with custom icons.
When viewed in Google Earth the anchor point is center of the icon. Like this ...
When the KML file is viewed in Google Maps on my website, the anchor point changes to be the bottom center of the icon. Like this ...
Why is this? And how do I change it so that when loaded by Google Maps API the anchor point is in the center of the icon?
Here is the styling in the KML file ...
<Style id="Parking">
<IconStyle><Icon><href>http://www.virtualmountains.co.uk/shared/Parking.png</href></Icon></IconStyle>
<BalloonStyle>
<text>$[description]</text>
<bgColor>white</bgColor>
<text><![CDATA[
<font color="#674A32" face="arial" align="justify">$[description]</font>
]]></text>
</BalloonStyle>
<LabelStyle>
<color>FFFFFFFF</color>
<scale>0.8</scale>
</LabelStyle>
</Style>
Here's the placemark code ...
<Placemark>
<name>A5 Parking, Tryfan</name>
<description>
<![CDATA[
<DIV style="max-width:400px; margin-right:10px; margin-bottom:10px; color:#674A32; font-family:Arial">
<DIV style="font-size:11pt; font-weight:bold; text-align:left">A5 Parking, Tryfan<BR></DIV>
<DIV style="font-size:10pt; text-align:justify"><BR>
There is a parking here alongside a great length of the A5.
</DIV>
</DIV>
]]>
</description>
<styleUrl>#Parking</styleUrl>
<Point><coordinates> -3.991196, 53.125136,0</coordinates></Point>
</Placemark>
You can specify the anchor point or "hotspot" for a Placemark's icon in the KML as part of the <IconStyle>. The <hotspot> tag allows you to specify the anchor point on the icon either using fraction (0 to 1) or pixel dimensions, in the x (left/right) and y (up/down) directions.
For example, if you want to make your icons anchor in the center of each one, you would make your IconStyle look like this:
<IconStyle>
<Icon>
<href>http://www.virtualmountains.co.uk/shared/Parking.png</href>
</Icon>
<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction">
</IconStyle>
That should work for KMLs both in Google Earth and in Google Maps.
You can find the documentation for the <hotspot> tag in the KML reference, here: https://developers.google.com/kml/documentation/kmlreference#hotspot
Related
I have created a KML file with CSS formatting for the contents of the balloon. The CSS is read and displays fine in Google Earth, but not when using the Google Maps API. Can anyone tell me why and how to overcome this please?
Here's the relevant snippets from the KML file...
<Style id="Summit_Target">
<IconStyle>
<Icon><href>http://www.virtualmountains.co.uk/shared/Summit_Target.png</href></Icon>
</IconStyle>
<BalloonStyle>
<text>$[description]</text>
<bgColor>white</bgColor>
<text><![CDATA[
<font color="#674A32" face="arial" align="justify">$[description]</font>
]]></text>
</BalloonStyle>
<LabelStyle>
<color>FF14B450</color>
<scale>0.8</scale>
</LabelStyle>
</Style>
<Placemark>
<name>High Street</name>
<description>
<![CDATA[
<style>
H1{text-align:left; font-size:12pt; font-weight:bold;} P{font-size:10pt;}
img{width:96px; height:120px; float:left; border:0; margin-right:8px}
</style>
<H1>High Street</H1>
<P>
<IMG SRC="High_Street_Summit.jpg" title="High Street" alt="High Street">
At 828m, with a 373m drop, High Street appears in many a hill bagger's list includings a Nuttell, Marilyn, Simm, Hewitt, Wainwright, Birkett, and Trail 100.<BR><BR>Roman engineers built a road across the summit linking their forts at Brougham and Ambleside, thus giving the hill its name.<BR><BR>A second name <i>’Racecourse Hill’</i> is derived from the summer fairs and horseraces that were held here unp until 1835.<BR><BR>The mountain's summit is crowned by an Ordnance Survey triangulation pillar.
</P>
]]>
</description>
<styleUrl>#Summit_Target</styleUrl>
<Point><coordinates>-2.864838,54.491697,0</coordinates></Point>
</Placemark>
Here's how the balloon appears in Google Earth, i.e. as I'm expecting it too...
But here is how it appears on the web when read by the Google Maps API...
The title is centred, not left justified.
The title is not in 12pt Arial bold .
The main text starts near the bottom of the image, not to the right at the top.
The line spacing (though not specified) looks great in Google Earth, but not in Google Maps.
If anyone can help me correct this, it will be much appreciated.
For the benefit of others I found solution to achieve the formatting I wanted.
There are two rules to consider.
a) The KML will use some of the CSS styling found in the webpage hosting the Google Map. So that the balloon contents is consistent across different webpages I removed the H1 and P tags.
b) CSS shorthand is not supported. For example you might have {font:Arial 10pt bold} in the style sheet or direct in the KML tag. This has to be written longhand as in the code snippet below.
<Placemark>
<name>High Street</name>
<description>
<![CDATA[
<DIV style="max-width:400px; margin-right:10px; margin-bottom:10px; color:#674A32; font-family:Arial">
<DIV style="font-size:11pt; font-weight:bold; text-align:left">High Street<BR></DIV>
<DIV style="font-size:10pt; text-align:justify"><BR>
<IMG SRC="High_Street_Summit.jpg" title="High Street" alt="High Street" width="96px" height="120px" align="left" style="margin-right:10px; margin-bottom:10px">
At 828m, with a 373m drop, High Street appears in many a hill bagger's list includings a Nuttell, Marilyn, Simm, Hewitt, Wainwright, Birkett, and Trail 100.<BR><BR>Roman engineers built a road across the summit linking their forts at Brougham and Ambleside, thus giving the hill its name.<BR><BR>A second name <i>’Racecourse Hill’</i> is derived from the summer fairs and horseraces that were held here up until 1835.<BR><BR>The mountain's summit is crowned by an Ordnance Survey triangulation pillar.
</DIV>
</DIV>
]]>
</description>
<styleUrl>#Summit_Target</styleUrl>
<Point><coordinates>-2.864838,54.491697,0</coordinates></Point>
</Placemark>
Putting the visible contents of the balloon inside a DIV enabled the left justification of the title text.
The additional styling to the DIV prevents the balloon from becoming too wide, and the margin (the only formating I could get to work) moves the text away from the right hand side when displayed on an iPhone and being covered by a vertical scroll bar.
The float:left I replaced with align:left and then a margin-right in a style tag.
My placemark icon, used via HREF from google mapfiles, seems to "drift" when I zoom out. In this example the placemark can make it all the way up to Norway.
It seems that Bing maps V8 doesn't support the kml which supposedly could help the icon to understand where its center is so that it would stay anchored in the map during zooming out. Additionally, the placemark is ignoring the color style. If I remove the everything between the tags and just use the default placemark from Bing, the colors and zoom work correctly. Do any of you know of a way to get this Google icon to stay anchored via KML in Bingmaps? My current workaround is simply not to use the Google icon, and instead use the default Bing maps icon, which works. Using code to do it on the bingmaps object would require too much refactoring at this time.
You can use the Bing "drag and drop" here with my code to see the problem - just paste the KML below into the "XML Panel" and click "Read XML". Then zoom out to see the placemark go traveling. If you remove the whole node, the zoom and colors work (but with the default icon).
https://bingmapsv8samples.azurewebsites.net/#GeoXml%20-%20Drag%20and%20Drop
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Style id="model_normal">
<IconStyle>
<color>FF00FF00</color>
<scale>1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/shaded_dot.png</href>
</Icon>
<hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction" />
</IconStyle>
<LabelStyle>
<color>0000FF00</color>
</LabelStyle>
<LineStyle>
<color>7F00FF00</color>
<width>3</width>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<color>7F00FF00</color>
</PolyStyle>
</Style>
<Placemark>
<name>Example placemark</name>
<description></description>
<visibility>1</visibility>
<styleUrl>#model_normal</styleUrl>
<MultiGeometry>
<Point>
<coordinates>7.003930,53.361905</coordinates>
</Point>
</MultiGeometry>
</Placemark>
</kml>
The anchor format that Bing Maps expect is in pixels, so you can update the hotSpot in IconStyle to:
<hotSpot x="32" y="32" xunits="pixels" yunits="pixels" />
By default custom pushpins on Bing Maps are anchored at bottom center - that's why the "shifting" is observed.
How can I add a dynamic background visual for <a-sky> object?
Especially I want to add a 3d map view to object.
I try assets manager with image object:
<!-- <a-assets>
<img id="sky"/>
</a-assets>
<a-sky src="#sky"></a-sky> -->
However it shows a black screen. It probably because <img /> element only accepts 2d images/resources.
Many thanks...
Don't need to use <a-assets> and <img> if it's dynamic. Just set the src.
document.querySelector('a-sky').setAttribute('src', 'img.png');
I'm trying to put an icon in a KMZ file so the user can view a thumbnail when they click on the pinpoint. I have the following code - It's working, but isn't showing the icon/thumbnail. I've looked at the Google Developers and can't see a difference. Just need a second pair of eyes to view it.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Evidence File</name>
<description>SAMSUNG - GT-I9000
2012:10:25 17:36:57
2797 KB
Height: 2448 Pixels
Width: 3264 Pixels
C:\Users\Steve\Desktop\FYP Cases\M2510\IMG_20121025_163656.jpg</description>
<IconStyle><scale>1.1</scale><Icon><href>C:\Users\Steve\Desktop\FYP Cases\M2510\IMG_20121025_163656.jpg</href></Icon></IconStyle>
<Point>
<coordinates>-2.6172222222222223,51.43</coordinates>
</Point>
</Placemark>
</kml>
You have an absolute reference to the file in your KML file (C:\Users\Steve...). If image is inside your KMZ then you should reference the relative file location instead. Also, the file path C:... is not a valid URL which should be of the form http:// or file:// if using an absolute URL.
Let's assume the KMZ file has two entries (in this order):
doc.kml
IMG_20121025_163656.jpg
The IconStyle within the doc.kml should be rewritten like this:
<IconStyle>
<scale>1.1</scale>
<Icon>
<href>IMG_20121025_163656.jpg</href>
</Icon>
</IconStyle>
This code worked perfectly until a short time ago. The KML and the Javascript certainly haven't changed so I'm imagining I have some issue in the KML which a Google update now doesn't like.
I have a Google Maps API implementation which simply loads a KML file into a KMLLayer on a map. Now, I get the Linestrings displaying but not the points.
Here is the relevant snippets from the KML.
<Style id="start">
<IconStyle>
<scale>0.0</scale>
<heading>0.0</heading>
<Icon>
<href>http://d1b3rm3ifop01h.cloudfront.net/mapicons/start-race-2.png</href>
<refreshInterval>0.0</refreshInterval>
<viewRefreshTime>0.0</viewRefreshTime>
<viewBoundScale>0.0</viewBoundScale>
</Icon>
</IconStyle>
</Style>
...
<Placemark>
<name>Baden Powell Horseshoe Bay Trailhead</name>
<description>Elevation: 54.9 m (180.2 ft)<br />Very small carpark only accessible travelling north.<br /><a href="http://www.trailhunger.com/junction/820">Junction Information</a></description>
<styleUrl>#start</styleUrl>
<Point>
<coordinates>-123.2749314141,49.3669179082,54.93</coordinates>
</Point>
</Placemark>
The problem was that the scale element was set to 0.0 and Google very recently changed their Google Maps KML parser to honour the scale element. Setting it to 1.0 made the icons appear.
0.0 is the default for the de.micromata.opengis.kml libary I'm using.
The next problem was that the icons were appearing in the wrong position. This was because I needed the hotSpot element to be specified.
This answer was provided by geocodezip#gmail.com on the Google Maps API issue I raised.