Icon issue in Google Earth .kml file - google-maps-api-3

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.

Related

GLTF not displaying using ar.js

I'm currently testing AR.js to display 3D models in augmented reality using phones. My web coding skills are very novice so I'm pulling together different tutorials to get what I want. I believe I've just about nailed what I need to properly display a gltf file but there seems to be some small issue as the model won't display (I've confirmed that it's a valid file using a gltf viewer). The code also works fine to display a simple a-box, but falls down as soon as I comment that out and add the line for the gltf model.
Any help would be most appreciated!
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.1/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true;'>
<a-marker preset="hiro">
<!--<a-box position='0 0.5 0' material='color: yellow;'></a-box>-->
<a-entity gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
You can browse the new AR.js docs there is an example with a gltf model with also an online live version.
In the example you provided you should make this change
from this:
<a-entity
gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
to:
<a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://tests.offtopicproductions.com/ywca.gltf"></a-entity>
You should add:
https://arjs-cors-proxy.herokuapp.com/
to avoid CORS issues if the resource is not in the same host.
AR.js is under a new github org https://github.com/AR-js-org all the resources (libs and docs) are here now.

How can I reference local custom icons in a kml?

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!

IE11 will not load external css from intranet

IE11 will NOT load external css from the intranet - at all. Internal css works fine. In-line css works fine. External CSS works fine on the Internet. Everything works fine in other browsers - everywhere!
When I open C:\Users\hennesse\Desktop\test.html (below) by either right-clicking and openWith->IE - or- typing into the IE location bar, I get two alerts: "internal javascript", and "external javascript" - then:
the first line is NOT red
the second line is blue
the third line is green
However, if I upload this to my web server, and open it with IE, the first line IS red. With Firefox and Chrome, the first line is ALWAYS red, intranet or internet.
For some reason, IE11 will not load the external CSS file on "My Computer".
Changing security settings in Internet Options->Security->Allow Active Content to run in My Computer (and rebooting) results in a prompt (or not) about Allow Active Content? But the results are the same.
This is driving me insane! -Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
<!--
external file test.css contains:
body { color: #ff0000 }
-->
<style type="text/css">
.blue {
color: blue;
}
</style>
<script type="text/javascript">
alert("internal javascript");
</script>
<script type="text/javascript" src="test.js">
// external file test.js contains
// alert("external javascript");
</script>
</head>
<body>
This should be red, but it isn't
<p class="blue">
This is blue
</p>
<p style="color:green">
This is green
</p>
</body>
</html>
In the F12 console, I found: SEC7113 "CSS was ignored due to mime type mismatch". Discussion here: 1 [MSDN]. It seems that IE9 and above "sniff" the HTTP headers for the correct MIME type, and ignore JS and CSS that have the wrong header. When it fetches files from the local filesystem, it should disable this sniffing, since there aren't any real HTTP headers.
But my particular computer is sniffing and ignoring anyway. I've searched and searched, but the mighty Internet has only yielded one other person who has this problem. She solved it by reloading the operating system. I'm not gonna do that!
I very seldom use IE for anything except a final compatibility check after I've loaded stuff to a server. Except for one personal "extension" to a Windows app that invokes IE on the user's computer. Since I'm the only using it, I just hit F12, and select IE8 mode (this shows it's the IE9-up MIME sniffing). It works fine, and since it only costs me a couple mouse clicks, it sure beats reloading the OS.
Although I didn't really solve the problem, perhaps the "sniff and ignore" info can help someone else do so. OCHI - thanks for your help.
-Dave

How to Display Custom KML Placemark Icon using Image from Local Disk or Network Drive

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.

How to avoid CSS scrubbing in Google Earth balloons

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().

Resources