Basic setup
If you reached on this web page it's because you are trying to use the embedded Owlapps Maps technology and you did not reach to do this!
Firstable your web browser must accept the Security Exception for this URL: httpS://www.owlapps.net.
Safinfo
Security level of this website according to
et Google Safe Browsing :The website is not blacklisted and looks safe to use.
More information here: Google Search for this
For instance in Firefox web browser:
Of course, don't forget to disable any ad blockers that might be blocking Google Adsense ads on https://www.owlapps.net!
That's all you need to do, see you later Navigator! Going further:
Online demos:
- https://www.owlapps.net/testembedmapdrupal
- https://owlappsembedmap.blogspot.com/2022/02/test-dintegration-des-cartes-owlappsnet.html
Purpose
Allow users to have the ability to fully control
the location where their geographic data in the KML format will be stored and to be able to them
share (read-only) and view them easily with
Because Owlapps.net does not store or forward user data to its server.
KML tag support & implementation
the end is not to implement all the features available in the Google Earth software, only certain tags available in the KML language,
already benefit from operational functionalities and those soon are listed below all this in a web and light context.
Added to this is the possibility of defining geoUri in the form of hypertext links, for instance:
<a href="geo:37.786971,-122.399677"> your_text </a>. These links converted into geolinks whose click will change the view of the map to go to the point defined by the latitude and longitude of the geoUri, no need geometry to create geolinks.
The KMZ (compressed KML) format is not supported or planned for the near and distant future.
Simplified functional diagram
Basic Structuration
In the HTML code of your web page be sure to have at least one occurence (one is enough) of this script tag:
Put it in the body tag part of your document.
An embedded map is in fact an iframe tag with those following params:
- data-owlappsmap , this param has this value: "yes"
- data-owlappskml , this param is the 'KML' (keyhole markup language) to insert in the map
For instance:
As-a-childnode way: it's the second way to insert your KML, put it directly in your IFRAME tag (only 1 KML / IFRAME) as a child node instead as a property value! Prefer this second way because you don't have to escape single quotes (apostrophes) in the KML given to the data-owlappskml property.
For instance:
More than one KML in the same map is possible! Just put your iframe tags in the same div tag, this tag must have the data-owlappsmaplyrgroup param with this value: "yes".
For instance:
Advanced settings
The Owlapps.net Embedded Maps are based on Leaflet JS web mapping technology.Including one Web Map Service (WMS) layer or more to the same iframe is possible, just fill in the "data-owlappslayers" property ( [ Javascript Object Notation format, Javascript Object Notation format, Javascript Object Notation format, etc... ] ).
Your object must have the "type" property set to "wms" .
Your layer as an Overlay layer (instead of Base layer) => set the "overlay" property to "yes" .
For instance:
Adding a video as an overlay (always as an Overlay layer): your object must have the "type" property set to "video" .
For instance:
Reminder: KML language and XML languages in general are case sensitive (lower case vs. upper case), thus <Document> is not equal to <document>. In the KML language, some tags begin with a capital letter, others do not.
Containers and Features
Containers and Features, these terms are not those defined in the KML element diagram in the official documentation. This is a grouping specific to <embedMap/>.
Considered as a container
- <kml> (of course), this container is not really rendered, it has not expand/reduce function in the layer control panel, no icon is applied.
-
📄
<Document>: it is the real Master container, all your other containers and features have to be in it, only one <Document> tag / <kml>, <Document> is a child of <kml>.
<open> tag supported -
📁
<Folder>: a child of <Document>, nested <Folder> are allowed, no limited number.
<open> tag supported -
🔗
<NetworkLink>:
(coming soon) child of other NetworkLink, Folder and Document, really useful as custom WMS or WFS, no limited number, nested NetworkLink is allowed (max level allowed: 3).
<open> tag supported
Considered as a feature
- <Placemark>, <MultiGeometry> (symbolized by ❖ suffix), <LinearRing>, <outerBoundaryIs> , <innerBoundaryIs> tags are supported to!
- <GroundOverlay>
- <ScreenOverlay> supported but useless, not rendered as a geolink and no <description> tag rendered as LeafletJS map popup
Snippet, description and name
<name> tag is available in <Document>, <Folder>, <NetworkLink>, <Placemark>, <ScreenOverlay> and <GroundOverlay>.
<Snippet> tag is available in <Document>, <Folder>, <NetworkLink>, <Placemark> and <GroundOverlay>, it has no size limit in <embedMap> app and
can use the CDATA element.
Container <Snippet> is rendered as a message box with a blue colorway headband in the LeafletJS layer control panel.
Feature <Snippet> as for it is rendered with a pink/salmon mixed colorway headband in usual conf, grey colorway when no correct coordinates found and orange colorway when the geolink is directly in its snippet (see substitute cards part in this same page below).
<description> tag is available in <Placemark> and <GroundOverlay>, it is rendered as a popup appearing when you click on the corresponding geographic object.
<name> is also rendered in popup.
Reminder: in <Snippet> and <description> tags, apply the CDATA element ( <![CDATA[ your_html_tags ]]> ) to use HTML tags easily like hyperlinks, break lines, tables, div, span, p, etc. You can apply substitute cards and geoUri geolinks on it.
Substitute cards
- <Placemark> and <GroundOverlay> in layer control panel are rendered as geolink (orange hypertext link prefixed with a ➤ arrow) and its snippet rendered just below. If you want it to be in the Snippet message box so just apply the substitute card __geolink__, that string will be converted into geolink (without ➤ prefix arrow). When its coordinates are not correct the __geolink__ string is converted into empty string.
- $[Snippet] is available in <description> tag: <Snippet> content can be rendered in map <Placemark> and <GroundOverlay> popup.
- $[name]: the content of <name> tag of <Placemark> and <GroundOverlay> is renderable in its <Snippet> and <description> tags
Stylizing
Supported tags: <StyleMap> (only <key> normal value is supported), <Style>, <IconStyle>, <LineStyle>, <PolyStyle>, <color> (color and opacity; in IconStyle tag only opacity (2 first characters) is supported), <width>, <scale>, <Icon> (only <href> is supported), <hotSpot>.
HotSpot tag xunits and yunits properties are supported to, supported values: insetPixels | pixels | fraction .
Default params of <hotSpot>:
<hotSpot x="0.5" xunits="fraction" y="0.5" yunits="fraction"/>
The <scale> tag value (positive float) is based on 32 pixels (1 = 32 px, 2 = 64 px, 0.5 = 16px, 0.25 = 8px, etc). When an image is applied, if its width is smaller than its height then width = 32 px, if height is smaller than width then height = 32px, the image ratio is preserved.
Reference system and example:
Extreme western end of the Île De La Cité in Paris (France), latitude = 48.85777 and longitude = 2.33935 (decimal degrees coordinates).
For instance:
Reminder: The <color> tag color system is based on the hexadecimal aabbggrr (alpha alpha blue blue green green red red) format value, not this one: rrggbb (red red green green blue blue)!
the aa (alpha alpha) value is the opacity level (100% = FF; 0% = 00).
For instance, the SALMON color (FA8072) with a 40% opacity ( hex value: 66, table below) will be in fact: 667280FA
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00
<LabelStyle>
Child node of <Style> tag, it gives the possibility to display the value of the Placemark <name> tag in a label on the map. This tag has a child node : <the scale> tag, it's a positive float value that will used as a font-size em unit.
Child nodes of LabelStyle tag to: <minZoom> and <maxZoom> (positive integer value), they are not KML standard tags, especially created for the embedMap app. They control the maximum and minimum zoom level of visibility (or not) of your label, they can be used alone or together, bigest value allowed: 18 (ground level), smallest value allowed: 0 (geostationary orbit level).
For instance:
Zoom level: 18
Zoom level: 17
Zoom level: 14
Zoom level: 11
Zoom level: 8
Zoom level: 6
TO BE CONTINUED...
Not supported
<colorMode>, <heading>, <visibility>, <phoneNumber>, <xal:AddressDetails>, <address>, <atom:link>, <atom:author>, <refreshMode>, <refreshInterval>, <viewRefreshMode>, <flyToView>, <viewBoundScale>, <ItemIcon>, <Model>, <bgColor>, <maxSnippetLines>, <StyleMap><Pair><key>highlight, <TimeSpan>, <TimeStamp>, <NetworkLinkControl>, <LookAt>, <Camera>, <Metadata>, <Region>, <extrude>, <tessellate>, <altitudeMode>, Elements that currently use the gx prefix, <BalloonStyle>, <PhotoOverlay>