I have quite literally never tried to edit a kml file before, so I'm not totally sure of what I'm trying to ask, but I'll do my best.
I'm trying to use custom icons for my placemarkers. I tried to upload the images to a hosting site and link to them, and I also tried putting them into a subfolder and referencing the local address. Here are those attempts.
<Style id="1">
<IconStyle>
<Icon>
<href>https://cdn1.imggmi.com/uploads/2019/3/8/63626b5bc964d76ca0d5bdb30fb44afd-full.png</href>
</Icon>
</IconStyle>
</Style>
And the second method:
<Style id="1">
<IconStyle>
<Icon>
<href>files/number_1.png</href>
</Icon>
</IconStyle>
</Style>
And the placemarker references the style like this:
<Placemark>
<styleUrl>#1</styleUrl>
<Point>
<coordinates>-86.78824404543640,36.41901416833124,1005.84</coordinates>
<altitudeMode>absolute</altitudeMode>
</Point>
</Placemark>
No matter what I do, I can't get the icon to show up in GE. I have read a bunch of different tutorials, tried naming the folder and subfolder differently, and tried making a kmz with the kml in the main folder and the icons in a subfolder. Nothing seems to work. It feels like I'm missing something basic or fundamentally misunderstanding some aspect of this, but for the life of me I can't seem to figure it out!
Any help is appreciated!
This KML works for me in Google Earth in a KMZ/zip file:
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="1">
<IconStyle>
<Icon>
<href>files/number_1.png</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<styleUrl>#1</styleUrl>
<Point>
<coordinates>-86.78824404543640,36.41901416833124,1005.84</coordinates>
<altitudeMode>absolute</altitudeMode>
</Point>
</Placemark>
</Document>
</kml>
The file number_1.png is in the "files" directory.
displayed on Google Maps
on Google Earth:
I just struggled with this for... never mind. It's embarrassing.
Same problem: kmz with embedded icons worked on GE desktop, but the icons would not import into Google My Maps. I was so frustrated I was ready to hurt someone.
Of course it was entirely my fault.
<href>Images/Icon-1.png</href> worked in GE desktop, but not maps.
<href>images/icon-1.png</href> worked in both.
The issue: everything for the web is case sensitive so the folder name "Images" didn't work on the web because the folder in the zip file was named "images" (lower case ')
D'Oh!
Related
I found a problem with how Safari prioritises CSS between the css included with the HTML page and the injected content CSS. I created a minimal reproducible showcase and uploaded it to GitHub.
The issue is as follows: Extension-injected CSS is overruled by lower-hierarchy css rules from the website itself. In this screenshot div{} rule is within the website's CSS, and div.hello{} rule is declared in the Safari extension's content CSS and injected by Safari.
Result:
The div in the HTML is red, instead of blue.The screenshot shows that Safari uses div{} with higher priority over div.hello{}. Please note, that initial rules are added by Safari automatically. The content CSS doesn't include such declaration.
Please see minimal example here, or the GitHub repo I created for a minimal reproducible example: https://github.com/MikeSpock/safari-extension-css-bug
How to create stable CSS for the markup I add to websites via my Safari extension, seeing that every CSS within the website overrules the CSS from the extension? This is not how Chrome extension work for example, it works as you might expect, handling CSS priorities correctly.
Minimal viable example:
showcase.safari.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="./">
<link rel="stylesheet" href="./showcase.safari.css">
</head>
<body>
<div>
This should have a red background.
</div>
<div class="hello">
This should have a green background.
</div>
</body>
</html>
showcase.safari.css
div{
background:red;
}
showcase.safariextension/content.css
This is the css injected via a Safari extension
div.hello {
background:green;
}
showcase.safariextension/Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Builder Version</key>
<string>13607.1.40.1.5</string>
<key>CFBundleDisplayName</key>
<string>safari-extension-css-bug</string>
<key>CFBundleIdentifier</key>
<string>com.yourcompany.safari-extension-css-bug</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>Content</key>
<dict>
<key>Stylesheets</key>
<array>
<string>content.css</string>
</array>
</dict>
<key>ExtensionInfoDictionaryVersion</key>
<string>1.0</string>
<key>Permissions</key>
<dict>
<key>Website Access</key>
<dict>
<key>Include Secure Pages</key>
<true/>
<key>Level</key>
<string>All</string>
</dict>
</dict>
</dict>
</plist>
Add showcase.safariextension folder as a Safari Extension via Safari Extension Builder, and open showcase.safari.html for a minimal example.
I found a workaround that was good enough for me, and possibly a good general practice when developing extensions.
Change all your html tags you generate in your content script such as
div
a
and others to custom tags, so that it would never collide with the website's own style definitions:
adiv
aa
Then you can make sure you start your styles from scratch and nothing would be overridden.
I think this is one of those bugs where I "can't see the forest for trees". I've been working on this for days, and I can't seem to pinpoint the problem. It shouldn't be that hard; but I think I'm just too close to the code (or too unfamiliar with .kml) to see it.
I have this .kml file, which I posted below. I've eliminated most of it, so that it just displays a single address with the problem. (The file originally had "IconStyle" tags for a dozen or more squares with colors.)
My .kml file will pull up an address of a Walmart in Google Earth. The icon I want displayed is found at this URL (from the file):
http://maps.google.com/mapfiles/kml/pal4/icon18.png (It's a square inside a green circle.)
But what displays instead, when I run the code below, is a red square! Careful eyes would be so appreciated! Thanks!
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1/">
<Document>
<name>test.kml</name>
<description>testIcon</description>
<LookAt>
<longitude>-111.5863733742289</longitude>
<latitude>39.55637809106051</latitude>
<altitude>0</altitude>
<range>610178.2115040587</range>
<tilt>-1.037184070538429e-013</tilt>
<heading>0.5510762374861048</heading>
</LookAt>
<StyleMap id="te">
<Pair>
<key>normal</key>
<styleUrl>#te1</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#te2</styleUrl>
</Pair>
</StyleMap>
<StyleMap id="fac">
<Pair>
<key>normal</key>
<styleUrl>#fac1</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#fac2</styleUrl>
</Pair>
</StyleMap>
<Style id="te1">
<IconStyle>
<color>ff87ff66</color>
<scale>0.8</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal4/icon56.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<scale>0</scale>
</LabelStyle>
</Style>
<Style id="te2">
<IconStyle>
<color>8887ff66</color>
<scale>1.2</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal4/icon56.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="fac1">
<IconStyle>
<scale>1.0</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal4/icon18.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<scale>0</scale>
</LabelStyle>
</Style>
<Style id="fac2">
<IconStyle>
<color>66ffffff</color>
<scale>1.3</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal4/icon18.png</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>Walmart</name>
<address>1710 E Skyline Dr, South Ogden, UT 84405</address>
<styleUrl>#te</styleUrl>
<description><![CDATA[<div>Some Text</div>]]></description>
<styleUrl>#fac</styleUrl>
</Placemark>
</Document>
</kml>
This is a known undocumented feature in Google Earth. The Google Maps icons with URL
http://maps.google.com/mapfiles/kml/pal*/icon**.png
are automatically redirected to one of the standard Google Earth icons. This is documented here (note 2).
So from your example, the icon:
is redirected to
with red fill color.
Source URL: http://maps.google.com/mapfiles/kml/pal4/icon18.png
And this URL:
gets remapped to:
Source URL: http://maps.google.com/mapfiles/kml/pal3/icon47.png
Likewise,
gets remapped to:
Source URL: http://maps.google.com/mapfiles/kml/pal2/icon4.png
If you choose an icon with a URL other than maps.google.com then it will display as-is so only workarounds are one of following: 1) choose one of the standard Google Earth icons (see help), 2) find icon from third-party web site (not maps.google.com/mapfiles/kml/pal**), or 3) copy the image at the external URL locally and refer to the local copy or copy it to a server.
Does anybody know how to display custom KML Placemark icon using image from local disk or network drive.
I tried this and it is not working:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Style id="icon">
<IconStyle>
<Icon>
<href>c:\etnasss.jpg</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>Simple placemark</name>
<description>Attached to the ground. Intelligently places itself
at the height of the underlying terrain.</description>
<styleUrl>#icon</styleUrl>
<Point>
<coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
</Point>
</Placemark>
</kml>
Thanks
The <href> element in KML takes a URL not a Windows file path. The URL can be an absolute or relative location.
To get it working, suggest you first move the KML file and the image to the same folder then refer to the image by its filename.
<Style id="icon">
<IconStyle>
<Icon>
<href>etnasss.jpg</href>
</Icon>
</IconStyle>
</Style>
Source: https://developers.google.com/kml/documentation/kmlreference#href
Next, you could refer to the image by its absolute location (e.g. file:///C:/etnasss.jpg) but Google Earth has security policy regarding access to local files on the file system outside the context of the KML file. You'd have to allow access to local files which generally is not recommended.
Alternatively, you could create a KMZ file (aka ZIP file) and include the image within the KMZ archive file and reference it in the KML file.
the problem is that I have a css file that is pointed from my baselayout.jsp file as following, when I am in index.php it applies the css but when I move to Profile/view.jsp it does not.
when I look at the source I noticed it is looking the css file in Profile/stylesheets/Base.css rather than myproject/stylesheets/Base.css, how to point to it in a way that works on all pages.
<link href="<s:url value="/stylesheets/mycss.css"/>" rel="stylesheet"
type="text/css" />
Its a breeze, just change the address to solid address, as following
http://www.example.com/myPreoject/stylesheets/Base.css
I've been doing a lot of looking around into this issue. I have a project I'm working on which basically represents a tour of different locations, each of which are generated dynamically, in a Google Earth web player. The problem is that the client requires that the content of each placemark representing a location be more stylish. Of course, I quickly discovered that Google Earth maliciously scrubs all CSS that you put in the KMZ file, which is very annoying. Many online discussion talked about putting the !important keyword in the CSS declaration or to use balloon style in some funny ways to prevent this. So far, I have not found a concrete solution.
I simply want to know if there is a hack or a method for Google Earth to not simply remove all of your CSS. That can include importing or inserting CSS from an external source after the page load and/or putting in a litle jQuery if nescessary.I will provide a code template for what a typical balloon should look like. Note that this actually works in the Google Earth program, but not online.
</Placemark>
<Placemark id="placemark1">
<name>City</name>
<description>
<![CDATA[<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<link href="http://localhost/Kmz_Files/player.css>
<div class="container" >
<span class = "title">My location</span>
<hr>
<div>
<a href="http://www.google.com" target="_blank">
<img src="http://www.google.ca/images/srpr/logo3w.png" width="250" />
</a>
</div>
<hr>
<p> My description</p>
</div>
</body>
</html>]]>
</description>
<Point>
<coordinates>-45, 45</coordinates>
</Point>
</Placemark>
Looks like you're talking about the Google Earth Plugin, not the Google Earth desktop application, which does not scrub JavaScript or CSS.
Looks like you want to use getBalloonHtmlUnsafe().