KML should draw a red polyline or blue polyline? - google-maps-api-3

Please tell me which one is "correct behavior as KML file format".
As you may know, the <color> tag of KML contains the color information with the order AABBGGRR. This is defined in the OGC KML document.
16.9 kml:colorType
The order of expression is aabbggrr, where aa=alpha (00 to ff); bb=blue (00 to ff); gg=green (00 to ff); rr=red (00 to ff).
http://docs.opengeospatial.org/is/12-007r2/12-007r2.html
So, the <color>7f0000ff</color> should be red color.
Example1:
With this KML file, Google Earth and Google Maps API (KmlLayer) draw a red polyline correctly.
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="globalStyles">
<LineStyle id="line">
<color>7f0000ff</color>
<width>4</width>
</LineStyle>
</Style>
<Placemark>
<styleUrl>#globalStyles</styleUrl>
<LineString>
<tessellate>1</tessellate>
<coordinates>-14.405821,-7.963539 -14.381448,-7.975707</coordinates>
</LineString>
</Placemark>
</Document>
</kml>
https://jsfiddle.net/wf9a5m75/xnw0hvvf/6/
Example2:
However, with this KML file, the Google Maps API draws a blue line, but Google Earth draws still a red polyline.
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="globalStyles">
<LineStyle id="line">
<color>7f0000ff</color>
<width>4</width>
</LineStyle>
</Style>
<Placemark>
<name>runway</name>
<styleUrl>#globalStyles</styleUrl>
<Style>
<LineStyle>
<!--
Coloring is implicitly merged from the global style, width is
explicitly overridden.
-->
<width>10</width>
</LineStyle>
</Style>
<LineString>
<tessellate>1</tessellate>
<coordinates>-14.405821,-7.963539 -14.381448,-7.975707</coordinates>
</LineString>
</Placemark>
</Document>
</kml>
https://jsfiddle.net/wf9a5m75/xnw0hvvf/5/
Answer from Google
I believe this is a bug of Google Maps JS API v3, and I reported this to Google.
But Google says
Status: Won't Fix (Intended Behavior)
Yes. I believe Google Maps Javascript API follows the "hexadecimal" 1 format for colors. What I would recommend is, if possible, to adjust your color settings to follow the hexadecimal format of Google Maps Javascript API.
https://issuetracker.google.com/issues/71991422#comment2
Wow, does they really intend this?
In real situation problem
Losing a color information means losing the meaning of the polyline/polygon.
For example, the National Oceanic and atmospheric administration (NOAA) of United states provides realtime weather hazard using KMZ file.
https://www.weather.gov/source/crh/shapefiles/
Google Earth draws polygons with correct colors (at least I think so), but the KmlLayer of Google Maps API v3 draws all blue polygons.
Changing colors means changing meaning of the polygons.
Don't you think this is serious problem?
So, in order to ask to fix the problem of Google Maps JS API v3, I need to know which one (red or blue) is correct.
Please tell me your answer with valid information.

For the offical interpretation of KML refer directly to the Open Geospatial Consortium (OGC) KML 2.2 standard. Note KML 2.3 is published but not yet implemented in Google Earth or Google Maps. There has a been issue with respect to the visibility tag where Google Earth implements a behavior contrary to the KML spec but fixing would break existing code so it won't be "fixed". In cases of contradition, the official OGC KML Standard supersedes any vendor documentation or implementation.
KML 2.2 (Document # 07-147r2) states in section 16.8.1 the following:
The order of expression is aabbggrr, where aa=alpha (00 to ff);
bb=blue (00 to ff); gg=green (00 to ff); rr=red (00 to ff)
It also gives an example in 16.7.1 showing that a value of ff0000ff is for red where the last 2-characters (ff) represent the red component.
This means that Google Earth is correctly displaying the KML rendering features using <color>7f0000ff</color> with a red color. Google Maps API is not rendering it correctly and is a bug.
Reference:
KML Standard: http://www.opengeospatial.org/standards/kml#downloads

Related

CSS ::part selector doesn't work for SVG in Chrome

I am currently building a web application that use SVG to display cameras.
Within the SVG, the base camera draw is defined in a defs tag, and real objects are then drawn using a use tag.
Since those cameras can have different characteristics (e.g. online/active/selected/…), I'd like to style them. However, use tag creates a closed shadow DOM, and therefore are inaccessible for standard CSS rule. I already use CSS variables successfully, but they present some limits.
I recently discovered the ::part selector which is exactly what I need: the object in defs exports some tags using a part attribute, and they are now accessible to CSS through ::part selector. Nice!
Except that only Firefox seems to support it for SVG. Chrome does not. Here is a test: https://codepen.io/glandos/pen/LYOPerb The result should output a green camera with a red and black outlined path. In Chrom(e|ium), attributes from defs are used, but not the CSS.
Two questions:
I couldn't find any reported issue. Did I missed something? And since I don't have (and don't want) a Google account, I can't even report that to the Chromium team :'(
Is there a workaround, apart from going on with CSS variables that cascade through shadow DOM?

Bitmap in SVG not rendering in Safari

In this project:
https://test.restaurantacasa.cat/
I use vectors as restaurants logos. In some of them, I include (embed in the svg) a bit of bitmap, for an example, here:
https://test.restaurantacasa.cat/#!/restaurant/el-campanar
However, if you open that one in Safari (mobile or desktop), you'll notice that the bitmap section is not rendered.
Can you help me understand why?
I produce the vectors with Adobe Illustrator.
Have you tried using <object> to embed your SVGs, instead of <img>? <object> elements don't have the same restrictions on external references that <img> does.
This is a known bug with Safari.*
When you use SVG as an <img>, external files such as embedded images are not loaded (in any browser). To get around this restriction, Illustrator converts embedded images to data URI values, so that all the data for the embedded image is stored in the SVG file.
For most browsers, this is enough. However, Safari treats the data URI value the same as any other URL referencing an external file, and does not process/load it.
* Scroll down the comments on the linked bug report, it took people a while to figure out what the problem was! The main discussion starts around comment 16.
I also had this issue and found a solution which I thought was worth posting here.
I was embedding the SVG as an object:
<object data="path_to_file.svg" />
and the object was including the image as:
<image href="raster.png" />
This worked everywhere except Safari. I found out that the proper syntax to use is this:
<image xlink:href="raster.png" />
Furthermore, if you are javascripting, it's not sufficient to just setAttribute() you need to setAttributeNS() like so:
el.setAttributeNS("http://www.w3.org/1999/xlink","href","raster.png")
Also, be sure to include the xlink NS at the top of the SVG file in the SVG tag:
<svg ... xmlns:xlink="http://www.w3.org/1999/xlink" ...>
(based on info I found here)

CSS using svg as background, external pattern doesn't load

If I put the SVG like an object it works fine (only console errors on chrome about mime types etc): www.bunquer.com
I want to put this like a background, but in that case the pattern inside the mountains doesn't loads why?
http://bunquer.com/tests/svg/
Thanks in advance
When SVG is used as an image the SVG file must be self-contained for privacy reasons. See https://bugzilla.mozilla.org/show_bug.cgi?id=628747 for more details and reasoning.

Rendering polygon with Google Static Maps API URL

I created a script to store dynamic map inputs by appending attributes to a Static Maps URL (so we can refer back to it after a user submits).
For reasons I can't yet determine, the Polygon is not rendering at all with the basic static maps URL, but it works with a 3rd party site's static maps function. According to Static Maps API examples there should be no issue, but I can't seem to recreate the Polygon.
Working version (with same attributes in URL, though it ignores Satellite and zoom resolution) from 3rd Party site.
Desired version missing the polygon.
The question is: Am I missing some parameter? I do have an API key which I removed from the URL, so that must not be the issue..
Your original Desired Version uses a parameter that Google does not support. Removing just opacity:0| and it works:
http://maps.googleapis.com/maps/api/staticmap?center=33.402285,-111.94271500000002&zoom=20&size=600x600&maptype=satellite&sensor=false&path=color%3ared|weight:1|fill%3awhite|33.4022475,-111.9426775|33.4022475,-111.9427525|33.4023225,-111.9427525|33.4023225,-111.9426775|33.4022475,-111.9426775
Opacity on google maps is set in the color as a 32-bit hexadecimal value, so
Thin blue line, 0% opacity: path=color:0x0000ff00
Solid red line with 100% opacity: path=color:0xff0000ff
The default is 50% if you pass a 24-bit color: 0x0000ff (50% opacity, blue)
So I think this is what you are looking for (or really close):
http://maps.googleapis.com/maps/api/staticmap?center=33.402285,-111.942715&zoom=20&size=600x600&maptype=satellite&sensor=false&path=color:red|weight:1|fillcolor:white|33.4022475,-111.9426775|33.4022475,-111.9427525|33.4023225,-111.9427525|33.4023225,-111.9426775|33.4022475,-111.9426775

produces an HTML file from XML

I have a XML file with Rectangle elements that contains sub-elements - RGBcolor,ID, height and width.
Now i need to draw the rectangles into a HTML web page with the mentioned sizes, color and name into several DIVs. how do i do it? I'm new in the business so please try to detail as much as you can.
here's my xml:
<?xml version="1.0"?>
<ArrayOfRectangle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Rectangle>
<Id>First one</Id>
<TopLeft>
<X>0.06</X>
<Y>0.4</Y>
</TopLeft>
<BottomRight>
<X>0.12</X>
<Y>0.13</Y>
</BottomRight>
<Color>
<Red>205</Red>
<Green>60</Green>
<Blue>5</Blue>
</Color>
</Rectangle>
<Rectangle>
<Id>Second One</Id>
The XML is fine and i even deserialized it back, but i dont know how to do the parsing into HTML..
Thank you all
The short answer is that you can't. HTML is a text markup language, not a graphics language.
You could convert all your rules to CSS and apply them to divs (generic block elements), although that would be a hack.
SVG is a graphics language which is going to be better supported than your made up one, but still has limitations. If you convert your rules into JavaScript then Raphaël can generate SVG or VML as required by different browsers. This would give wider support at a cost of depending on JS.
For widest support, you could convert the XML document into a PNG image on the server.
The specifics of how you convert from your format to another are open to several options. You'll need an XML parser. Then you need to read the document and output whatever format you like. You could use DOM for this, and XSLT is a popular option (especially for XML to other XML translations).
It's not clear to me whether your problem is designing the HTML (and/or SVG) that you want to generate, or in deciding what technology to use for the transformation. For simple rectangles, it's certainly possible to us HTML DIV elements with appropriate CSS properties, but SVG gives you more flexibility. Either way, I would use XSLT for the transformation; but allow some time to read up about the language and become familiar with it, because it's probably unlike anything you have used before.

Resources