Le logo de Owlapps.net

Instructions for use of the Embedded Owlapps Maps technology

Feature currently under active development (early alpha testing)!

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!

Prerequisites and Basic setup

Firstable your web browser must accept the Security Exception for this URL: httpS://www.owlapps.net.

Safinfo

Security level of this website according to Sitechecker 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:


You should already be familiar with HTML and KML (Keyhole Markup Language)!
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! Go further: read on!

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 the 2D mapping web application from Owlapps.net.

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.
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:

<script

  onerror = "window.location.href='http://www.owlapps.net/modules/owlapps_apps/embedmap'" 
  src = 'https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js'
  language="javascript"
  
defer>
</script>

Put it in the body tag part of your document.

An embedded map is in fact an iframe tag with those following params:

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: 
<div data-owlappsmaplyrgroup = "yes">
  
  <iframe data-owlappsmap = "yes" style="border:none;width:100%;height:80%;min-height:350px;" >
    <?xml version="1.0" encoding="ISO-8859-1"?>
      <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
        <Document>
        <Placemark>
          <name>My demo</name>
            <Style>
              <LineStyle>
                <color>ff1400E6</color>
                <width>2</width>
              </LineStyle>
              <PolyStyle>
                <color>661400E6</color>
              </PolyStyle>
            </Style>
            <description>
              <![CDATA[
                Rayon: 430 m&#xE8;tre(s)
              ]]>
            </description>
            <Polygon>
              <outerBoundaryIs>
                <LinearRing>
                  <coordinates>
                    0.09914,47.368594 0.09903,47.369348 0.098705,47.370074 0.098178,47.370742 0.097468,47.371328 0.096602,47.371809 0.095615,47.372167 0.094544,47.372387 0.09343,47.372461 0.092316,47.372387 0.091245,47.372167 0.090258,47.371809 0.089392,47.371328 0.088682,47.370742 0.088155,47.370074 0.08783,47.369348 0.08772,47.368594 0.08783,47.367839 0.088155,47.367114 0.088683,47.366445 0.089393,47.365859 0.090258,47.365379 0.091245,47.365021 0.092316,47.364801 0.09343,47.364727 0.094544,47.364801 0.095615,47.365021 0.096602,47.365379 0.097467,47.365859 0.098177,47.366445 0.098705,47.367114 0.09903,47.367839 0.09914,47.368594
                  </coordinates>
                </LinearRing>
              </outerBoundaryIs>
            </Polygon>
          </Placemark>
        </Document>
      </kml>
    </iframe>
    
      
      
    
    <iframe data-owlappsmap = "yes" style="border:none;width:100%;height:80%;min-height:350px;" >
      <?xml version="1.0" encoding="ISO-8859-1"?>
        <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
        <Document>
          <Placemark>
            <name>
              Point de départ 1
            </name>
            <Point>
              <coordinates>
                2.262028,48.82947
              </coordinates>
            </Point>
          </Placemark>
        </Document>
      </kml>
    </iframe>
    

  </div>


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:
<iframe style = "border:none;width:100%;min-height:350px;height:80%;" data-owlappsmap = "yes" 
  
  data-owlappslayers = '[
     
    { "type":"wms",
      "overlay":"yes", /* add overlay key with yes value to set it as an overlay layer instead of base layer! */
      "url": "//ows.mundialis.de/services/service?", 
      "layers":"SRTM30-Colored-Hillshade",
      "name":"Mundialis",
      "attribution": "Unknown",
      "checked": "yes",  /*  add the checked key with yes value to show the layer by default ! */
    },
    
    { "type": "wms", 
      "overlay": "yes",
      "url": "//www.owlapps.net/cgi-bin/mapserv",
      "layers": "dep,com",
      "map": "/var/opt/mapfile/depcom_fr.map",
      "version": "1.1.1",
      "format": "image/png",
      "bgcolor": "0xFFFFFF",
      "transparent": true,
      "opacity": 0.3,
      "name":"My FIRST OVERLAY WMS LAYER",
      "attribution": "Origin and source of your data"
    },
    
    { "type": "wms", 
      "url": "//www.owlapps.net/cgi-bin/mapserv",
      "layers": "dep,com",
      "map": "/var/opt/mapfile/depcom_fr.map",
      "version": "1.1.1",
      "format": "image/png",
      "bgcolor": "0xFFFFFF",
      "transparent": true,
      "opacity": 0.3,
      "name":"My FIRST WMS LAYER as a Base layer",
      "attribution": "Owlapps.net & INSEE"
    }
  ]'
  
></iframe>


Add your own CSS using the "data-owlappscss" property of your iframe tag. Use "link" key for the URLs (absolute paths) of your remote CSS files and/or "internal" key to type directly your classes.

For instance:
<iframe  style = "border:none;width:100%;min-height:350px;height:80%;" data-owlappsmap = "yes"

  data-owlappscss= '{
    
    "link":
      " 
        http://www.owlapps.net/modules/owlapps_apps/embedmap/ex1.css, 
        https://fonts.googleapis.com/css?family=Kenia,
      "
    ,
    
    "internal":
      "
        .myRedFont {
          font-family: Kenia, serif  ;
          fill: red;  /* use fill instead of color because <text> tag is a SVG tag */
          opacity:0.7;
        }
          
        
        .myBigSize {
          font-size:2.5em;
        }
      "
  }'
  
>

  <?xml version="1.0" encoding="UTF-8"?>
    
    <kml xmlns="http://www.opengis.net/kml/2.2">
      
      <Document>

        <Folder>
        
          <name>
            Test your own custom CSS
          </name>
          
          <open>
            1
          </open>
        
          <Snippet>
            <![CDATA[
              The beautiful <strong><a target="_blank" href="https://fonts.google.com/specimen/Kenia?utm_source=developers.google.com&utm_medium=referral" >Kenia</a></strong> Google Font! 
            ]]> 
          
          </Snippet>
        
          <Placemark>
          
            <name>
              Hello!
            </name>
       	    
       	    <Point>
       	      <coordinates>
                2.33935,48.85777
              </coordinates>
       	    </Point>
       	  
       	    <description>
       	      <![CDATA[
       	        __geolink__ , voilà un exemple d'utilisation de la balise LabelStyle et de la propriété data-owlappscss
     	        ]]>
   	        </description>
   	        
            <Style>
            
              <LabelStyle>
              
                <scale>
                  2
                </scale>
                
                <color>
                  FF00ebff <!-- yellow color -->
                </color>
                
                <className>
                  myRedFont  myBigSize  <!-- final result is a red color font (70% opacity) instead of yellow color -->
                </className>
                
                <anchor>
                  0, 35
                </anchor>
                <!-- anchor tag is not a standard KML tag, especially created for the embedMap technology  -->
                
              </LabelStyle>
              
            </Style>
          
          </Placemark>
          
        </Folder>
        
      </Document>
      
    </kml>
    
</iframe>


Live demo: /modules/owlapps_apps/embedmap/testcss.html




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.

Abbreviation:
cmin (cardinality min): minimum (included) number of occurrences allowed of a given tag in its direct parent node,
cmax (cardinality min): max (included) number of occurrences allowed of a given tag in its direct parent node.

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

Considered as a feature

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 or SVG tags easily like hyperlinks, break lines, tables, div, span, p, URL having the & character, etc.
No need to use predefined entities such as &lt;, &gt;, and &, characters between these two enclosures are interpreted as characters, and not as markup. This section may contain markup characters (<, >, and &).
You can apply substitute cards and geoUri geolinks on it to.


Substitute cards

Stylizing

Supported tags: <StyleMap> (only <key> normal value is supported), <styleUrl> (when styleUrl use an external resource, the URL must be an absolute path), <Style>, <LabelStyle>, <BalloonStyle>, <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" yunits="pixels"/>
The <scale> tag value (positive float) is based on 32 pixels (1 = 32 px, 2 = 64 px, 0.5 = 16px, 0.25 = 8px, etc). it determines the width of the img tag, the image ratio is preserved.

Coordinate system of <hotSpot> tag and example:
Extreme western end of the Île De La Cité in Paris (France), latitude = 48.85777 and longitude = 2.33935 (decimal degrees coordinates).

The <hotSpot> parameters







For instance: 
<Style id="cd2344" >
  <IconStyle>
    <Icon>
      <href>
        http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
      <scale>
        3.0
      </scale>
    </Icon>
    <hotSpot x="0.33"  y="0" xunits="fraction" yunits="fraction"/>
  </IconStyle>
</Style>

<Placemark>
  <name> Hello! </name>
  <styleUrl>
    #cd2344
  </styleUrl>
  <Point>
    <coordinates>
      2.33935, 48.85777
    </coordinates>
  </Point>
</Placemark>


Reminder: The <color> tag color system is based on the hexadecimal aabbggrr (alpha alpha blue blue green green red red) format, 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.
Later in this document you will encounter the <color> tag but this time as a descendant of the <richDecos> tag (non-standard tag in the KML language), this first one is subject to the standard web color system!

Opacity (%) — hexadecimal matching value table (for the standard KML <color> tag):
100% — FF
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.

<IconStyle>

<IconStyle> (cmin: 0, cmax: 1): Child node of <Style> tag, it controls the stylization of point-type geographic features.

<LineStyle>

<LineStyle> (cmin: 0, cmax: 1): Child node of <Style> tag, it controls the stylization of line-type geographic features.

<PolyStyle>

<PolyStyle> (cmin: 0, cmax: 1): Child node of <Style> tag, it controls the stylization of polygon-type geographic features.
Live demo: /modules/owlapps_apps/embedmap/polylineiconstyleextendeddata.html

<richDecos>

The <richDecos> tag and its descending tags: not standard tags especially created for the embedMap app. It will make it possible to enrich / enhance the stylization thanks to these new tags.

The rendering on the map of the geometric entities created through the <richDecos> tag is positioned above that created by the KML-standard stylization tags.

It is available in <IconStyle> , <LineStyle> and <PolyStyle> tags (cmin: 0, cmax: 1).

Combining <Style> with <styleUrl>

Combining <Style> with <styleUrl> is a KML-standard mechanism available in <Placemark> , <GroundOverlay> and <StyleMap> tags.

<Style> settings take precedence over <styleUrl> settings.

<styleUrl> can refer to an internal <Style> or an external <Style>, naming rules are as follows:



Combining local and external <Style> tags
Combining local and external <Style> tags

For instance:
caller.html (contains the "caller.kml")
<iframe name="Combining &lt;Style> and &lt;StyleMap> tags"  style = "border:none;width:100%;min-height:550px;height:100%;" data-owlappsmap = "yes" >
  
  <?xml version="1.0" encoding="UTF-8"?>
    
    <kml xmlns="http://www.opengis.net/kml/2.2">
        
      <Document>
      
        <Snippet>
        
          <![CDATA[
            <div style="padding:5px;background-color:SandyBrown;width:99%;overflow:auto;min-width:250px;height:100%;" > Style and StyleMap tags that are local and from external KML files </div>
          ]]>
          
        </Snippet>
      
        <StyleMap id= "c_stl1" >
        
          <Pair>

            <key>
              normal
            </key>
         
            <styleUrl>
              http://localhost/modules/owlapps_apps/embedmap/intermed.kml#i_stl1
            </styleUrl>
             
          </Pair>
          
        </StyleMap>
        
        
       <StyleMap id= "c_stl2" >
        
          <Pair>

            <key>
              normal
            </key>
         
            <styleUrl>
              #c_stl3
            </styleUrl>
             
          </Pair>
          
        </StyleMap>
        
         
        <StyleMap id= "c_stl3" >
          
          <Pair>

            <key>
              normal
            </key>
         
            <styleUrl>
              http://localhost/modules/owlapps_apps/embedmap/intermed2.kml#i2_stl2
            </styleUrl>
             
          </Pair>
          
        </StyleMap>
         
        <Placemark>
        
          <name>
            My polygon
          </name>
          
          <styleUrl>
            #c_stl1
          </styleUrl>
        
         <Style>
         
          <LineStyle>
          
            <richDecos>
            
              <line>
                <color>
                  blue
                </color>
              </line>
            
            </richDecos>
             
          </LineStyle>
          
        </Style>
        
        <description><![CDATA[   ]]> </description>

        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates>
                -4.11091350546312,48.0169631752424,0 -4.111968311330662,48.016795512751,0 -4.112996287467845,48.01619875066696,0 -4.116335978996061,48.01511916621342,0 -4.117159235675508,48.01467071929815,0 -4.119193533073303,48.01319306336958,0 -4.12043173605444,48.01259246629866,0 -4.122260362220679,48.01126397190885,0 -4.123072641956552,48.01067382881821,0 -4.123865921469071,48.00979882508071,0 -4.124465310277188,48.00921407507309,0 -4.126087904227759,48.00803525945474,0 -4.127516295993536,48.00714668961566,0 -4.128133689232359,48.00684729815487,0 -4.13001411102086,48.00637606311322,0 -4.131923178138149,48.00633157933893,0 -4.132983782815333,48.00630685339955,0 -4.134883077000878,48.00612008919195,0 -4.137408656503161,48.0057762396606,0 -4.137822914906741,48.00562413402791,0 -4.139711746731609,48.0052951711824,0 -4.141973814208281,48.00424572586044,0 -4.142175707135008,48.00409868304075,0 -4.142771138045336,48.00351558746947,0 -4.144597144993872,48.00233505008751,0 -4.145786416942792,48.00117012535902,0 -4.146551359132084,48.00001585956961,0 -4.146541058878893,47.99987411111024,0 -4.147124737568923,47.99915063782761,0 -4.147000958581813,47.99745122814895,0 -4.14693912816083,47.99660213599185,0 -4.145789080853105,47.99535408548447,0 -4.14444892348012,47.99439447445729,0 -4.143794395425354,47.99412677417521,0 -4.142898265334432,47.99344035275509,0 -4.141801305061184,47.99290033077803,0 -4.140714746019643,47.9925016146712,0 -4.139367461411556,47.99140251809484,0 -4.137790236181256,47.99002715261097,0 -4.137730967697575,47.98918168834292,0 -4.135522705950444,47.98782289826093,0 -4.134630209408543,47.98713896097919,0 -4.133517560924616,47.98631957809636,0 -4.133297037293929,47.98618387367914,0 -4.132386232835266,47.98521944424321,0 -4.131475984356604,47.98425554680449,0 -4.131255687961758,47.98412000295551,0 -4.130566290746673,47.98329217911074,0 -4.130317503480795,47.98273558783124,0 -4.129839201492089,47.98190349388467,0 -4.129179082833224,47.98149744262432,0 -4.128481348996407,47.98053067005844,0 -4.128041557515404,47.98026017011177,0 -4.126750762944904,47.9798692535771,0 -4.125450994151839,47.97933832667849,0 -4.124133168916632,47.97852749456192,0 -4.12304471328064,47.97799205658596,0 -4.121335017319286,47.97761142971894,0 -4.119424602487776,47.9773756866529,0 -4.117925981520804,47.9769902577855,0 -4.112828440066098,47.97626849156111,0 -4.111155966217864,47.97644739337907,0 -4.108423984012862,47.9765108225475,0 -4.107793534049927,47.97652544938485,0 -4.101901114830781,47.97652193607539,0 -4.10000990637783,47.97656568002537,0 -4.097698452819913,47.9766190961982,0 -4.094966760001116,47.9766821555932,0 -4.092655346463615,47.97673545537504,0 -4.091184453666413,47.9767693457091,0 -4.090133819203704,47.97679353989498,0 -4.088873062594622,47.97682255837609,0 -4.084880682175273,47.97691434600598,0 -4.084460432765211,47.97692399865086,0 -4.081938940679274,47.97698187768319,0 -4.080678196685531,47.97701079353615,0 -4.077953888994394,47.97721324902134,0 -4.076490201810357,47.97738679920079,0 -4.075439493144865,47.97741084197721,0 -4.07357669564735,47.97801370567986,0 -4.072750158201075,47.97831279410843,0 -4.070886431726795,47.97891588931984,0 -4.069856173488344,47.97935991689025,0 -4.069042871726127,47.97993930900576,0 -4.068229294227617,47.98051887697402,0 -4.067001559241791,47.98124838034127,0 -4.066608144866923,47.98181875441266,0 -4.06499929450365,47.98340018932724,0 -4.063789988197008,47.98455204314936,0 -4.063810153187015,47.98497338646465,0 -4.063034616321698,47.98639776918457,0 -4.062653277530893,47.98725101828065,0 -4.062495891884927,47.98838131968017,0 -4.062140821827721,47.98979880298756,0 -4.06216080487355,47.99022138761691,0 -4.0622207826434,47.99148974674067,0 -4.062227449471579,47.9916307311573,0 -4.062320840990608,47.99360569513198,0 -4.062387613013618,47.99501773218989,0 -4.062434385121405,47.996006828029,0 -4.062461123791063,47.99657227404235,0 -4.062487871010402,47.99713790077841,0 -4.063373742952685,47.99796743154912,0 -4.064266831755487,47.99893892181217,0 -4.065372010493932,47.99990612971941,0 -4.06625251431035,48.00059525121427,0 -4.067605089946433,48.00226762210852,0 -4.068493663278627,48.00309957645453,0 -4.069396684780102,48.00421590711464,0 -4.069848427003721,48.00477433911369,0 -4.070978460211049,48.00617120039665,0 -4.071692453467287,48.00772114325332,0 -4.071961436589573,48.00885496280603,0 -4.072025515558524,48.01013683861926,0 -4.072054010858064,48.01070686149702,0 -4.072132422986684,48.01227537825635,0 -4.072153820864104,48.01270339853664,0 -4.072225186786456,48.01413088872723,0 -4.072289468253635,48.01541662340195,0 -4.072325201510298,48.01613132685525,0 -4.072814938196883,48.01740881528026,0 -4.073085098125031,48.01854892710314,0 -4.07420679154332,48.01967033455465,0 -4.07467601199807,48.02052037977872,0 -4.076004585790741,48.02149477716376,0 -4.076907925731072,48.02247946477113,0 -4.078039728893722,48.02374701263575,0 -4.080260903870868,48.02542225847858,0 -4.082453950625883,48.02652370936347,0 -4.083345375776498,48.02722346552142,0 -4.084221803936194,48.02763563521474,0 -4.085517498579981,48.02789416448463,0 -4.085952037933012,48.02802833447369,0 -4.087445796914909,48.02799408378667,0 -4.091302916424007,48.02819387477478,0 -4.093018314912752,48.02829864913893,0 -4.09472571637001,48.02825942053187,0 -4.096646551158846,48.02821526539833,0 -4.097927115085824,48.02818581508215,0 -4.099207684583246,48.02815635392542,0 -4.10111167841936,48.02782420256364,0 -4.102375172486172,48.02750682650968,0 -4.104048084667905,48.02689186804173,0 -4.104884326610307,48.02658445534587,0 -4.105899191657977,48.02569692569206,0 -4.107322602735603,48.02451257865333,0 -4.108318761007873,48.0233388304644,0 -4.108496927506337,48.0227596194681,0 -4.108879345345663,48.02203218576031,0 -4.109244062475231,48.02101821041189,0 -4.109617344092796,48.02014814374662,0 -4.109795124564251,48.01956997547335,0 -4.110797818505487,48.01854265090325,0 -4.110992982658016,48.01825134418336,0 -4.111595998088026,48.01766395161372,0 -4.11091350546312,48.0169631752424,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>


        <ExtendedData> 
               
          <Data name="width">
          
            <displayName>
              <![CDATA[
                <span style="color:red;" ><b> Width </b></span>
              ]]>
            </displayName>
            
            <value>
              15
            </value>
            
          </Data>
           
        </ExtendedData>

        </Placemark>
        
        <Placemark>
        
          <name><![CDATA[ Polygon, line and point ]]></name>
         
          <styleUrl> #c_stl2 </styleUrl>
          <Style>
          
            <IconStyle>
              
              <richDecos>
                
                <!--
                  Remove or disable this richDecos tag and the label color of these points
                  will be black because of the Style in the final.kml#f_stl2 StyleMap.
                -->
                
                <label>
                  <content>
                    <![CDATA[
                      $[name] overridden!
                    ]]>
                  </content>
                  <anchor> 0,20  </anchor>
                  <scale>2</scale>
                  <color> red </color>
                </label>
                
              </richDecos>
              
            </IconStyle>
          
          </Style>
          
          <description> __geolink__ </description>
          
          <MultiGeometry>
          
            <Point>
              <coordinates>
                5.075614142544174,47.25905536672283,0
              </coordinates>
            </Point>
            
            <Point>
              <coordinates>
                5.07575,47.25908 
              </coordinates>
            </Point>    
                    
            <LineString>
          
              <coordinates>
                5.075572800690813,47.25913630158269,0 5.075689639317787,47.2589606812192,0
              </coordinates>
            </LineString>
          
            <Polygon>
             
              <outerBoundaryIs>
                <LinearRing>
                  <coordinates>
                    5.075540874379179,47.25902566581779,0 5.075739785686084,47.25899496298661,0 5.075757936424637,47.25908035000109,0 5.075577503345499,47.25911881544968,0 5.075540874379179,47.25902566581779,0
                  </coordinates>
                </LinearRing>
              </outerBoundaryIs>
            </Polygon>
          
          
          </MultiGeometry>
          
         
        </Placemark>
        
      </Document>
          
    </kml>  
      
  </iframe>


intermed.kml
<?xml version="1.0" encoding="UTF-8"?>

<kml xmlns="http://www.opengis.net/kml/2.2">
  
  <Document>
  
  
    <StyleMap id= "i_stl1" >
       
      <Pair>
      
        <key>
          normal
        </key>
        
        <styleUrl>
          #i_stl3 
        </styleUrl>
         
        <Style id= "i_stl2">
          <LineStyle>
            <color>
              FFFFFFFF <!-- white color -->
            </color>
          </LineStyle>  
        </Style>
         
      </Pair>
       
    </StyleMap>
    

    <StyleMap id= "i_stl3" >
    
      <Pair>
      
        <key>
          normal
        </key>
      
        <styleUrl>
          http://localhost/modules/owlapps_apps/embedmap/final.kml#f_stl1
        </styleUrl>
        
        
      </Pair>
      
       <Style>
       
          <LineStyle>
          
            <width>
              <!--
                the $[width] substitute card gets the  value of the Data (name = "width") 
                of the ExtendedData from the Placemark named "My polygon" in caller.html
              -->
              
              $[width]
              
            </width>  
            
          </LineStyle>  
          
      </Style>
      
      
    </StyleMap>
    
    
  </Document>
  
</kml>


intermed2.kml
<?xml version="1.0" encoding="UTF-8"?>

<kml xmlns="http://www.opengis.net/kml/2.2">
  
  <Document>
    
    <StyleMap id= "i2_stl2" >
    
      <Pair>
        <key>
          normal
        </key>
      
        <styleUrl>
          http://localhost/modules/owlapps_apps/embedmap/final.kml#f_stl2
        </styleUrl>
        
        
      </Pair>
    
    </StyleMap>
    
    
    
    <StyleMap id= "i2_stl3" >
    
      <Pair>
        <key>
          normal
        </key>
      
        <styleUrl>
          #i2_stl1
        </styleUrl>
        
      </Pair>
    
    </StyleMap>
    
    
    <Style id= "i2_stl1">
    
      <PolyStyle>
        <outline> 0 </outline>
        <richDecos>
        
          <inner>
          
            <patternTags>
              <append>
                <![CDATA[
                  <pattern patternUnits="userSpaceOnUse" width="22.5" height="22.5" patternTransform="rotate(45)">
                    <line x1="0" y="0" x2="0" y2="22.5" stroke-opacity="1" stroke="green" stroke-width="25" />
                  </pattern>
                ]]> 
              </append>
            </patternTags>
        
            <colorize>
              <color> white </color> 
            </colorize>
            
          </inner>
          
        </richDecos>  
        
      </PolyStyle>
      
    </Style>
 
  </Document>
  
</kml>


final.kml
<?xml version="1.0" encoding="UTF-8"?>

<kml xmlns="http://www.opengis.net/kml/2.2">
  
  <Document>
    
    <Style id= "f_stl1">
    
      <PolyStyle>
      
        <color>
          FF0000FF
        </color>
        
        <richDecos>
        
          <outer>
          
            <label>
            
              <content>
                $[name]
              </content>
              
              <color>
                black
              </color>
              
            </label>
          
          </outer>
          
        </richDecos>
        
      </PolyStyle> 
       
    </Style>
    
    
    
    <StyleMap id= "f_stl2" >
    
      <Pair>
      
        <key>
          normal
        </key>
      
        <styleUrl>
          http://localhost/modules/owlapps_apps/embedmap/intermed2.kml#i2_stl3
        </styleUrl>

      </Pair>
      
      
      <Style>

        <IconStyle>
        
          <richDecos>
          
            <label>
            
              <content>
                $[name] 
              </content>
              <anchor>
                0,10
              </anchor>
              <scale>
                2
              </scale>
              <color>
                black
              </color>
            
            </label>
            
          </richDecos>
          
        </IconStyle>
        
        <LineStyle>
        
          <richDecos>
          
            <line>
              <color> black </color>
              <dashArray> 3, 8 </dashArray>
            </line>
          
          </richDecos>
          
        </LineStyle>
        
      </Style>
     
    </StyleMap>
   
  </Document>
  
</kml>


Live demo: /modules/owlapps_apps/embedmap/caller.html

Other live demo (Satelitte image as raster): https://www.owlapps.net/modules/owlapps_apps/embedmap/testrastergroundoverlay.html

Reminder: Don't put <StyleMap> tags directly in the <kml> tag otherwise they will not be discovered, the global (to the kml file) <Style> tags too.


Order of superposition of geographical objects

This order depends on 3 criteria: the natural order, the type of geometry and the degree of depth on the x axis.

Natural order

This is the order of appearance of the tags (<Placemark>, <GroundOverlay> and <ScreenOverlay>) from top to bottom.

Type of geometry

5 types of geometry are available:

For instance:

<!--
  Although the Placemark of the polygon is above that of the point, 
  the former will be rendered on the map just below the rendering 
  of the placemark of type point because polygons is under points for visibility reasons.
-->


<Placemark id="my_polygon" >
  <Polygon>
    ...
  </Polygon>
</Placemark>


<Placemark id="my_point" >
  <Point>
    ...
  </Point>
</Placemark>


Degree of depth on the x axis

this degree is calculated in relation to the number of container-type tags in which a feature-type tag is successively contained (see Container and feature tags). 
<!--
  The polygon will be rendered under the 2 points
-->


<Placemark id="my_polygon" >
  <Polygon>
    ...
  </Polygon>
</Placemark>


<Folder>
  <Folder>
 
    <!--
      Although above the Placemark "my_point2", 
      the Placemark "my_point1" will be rendered 
      under "my_point2" because it is in 
      at least 2 container tags (Folder)
    -->
    
    <Placemark id="my_point1" >
      <Point>
        ...
      </Point>
    </Placemark>
  </Folder>
</Folder>
 

<Placemark id="my_point2" >
  <Point>
    ...
  </Point>
</Placemark>


Live demo: /modules/owlapps_apps/embedmap/testordersuperposition.html





Retrieve data from an external file

That tag allows you to append data to your main document from an external KML file which can be simply static or dynamic (call to a web service).
The <NetworkLink> tag provides a WFS by delivering <Placemark> tags or a WMS by delivering <GroundOverlay> tags.
That link is refreshed each time you move (pan / zoom) on the map, in order to stop refreshing this link, simply do not provide it with a <refreshMode> tag. On the contrary, if you want this link to refresh when you browse the map, you must provide this refreshMode tag by providing it with one of these authorized values: onChange | onInterval | onExpire. See: KML Link tag.

Nested network links

You can build nested network links, only the first-level network links will be applied with the "Unplug this network link" checkbox button! When it is checked the link is not refreshable. Each network link has a visibility checkbox button controlling the visibility (or not) of its children (containers, features and geographical objets).
Only the first-level network links (symbolized with: 🔗★) have the following additional behavior:
when the visibility checkbox button of your network link is uncheck it becomes not refreshable too, when you check the visibility checkbox button of your network link, it will be refreshed if its "Unplug this network link" checkbox button is not checked of course.

Dialog with a web service

The network link sends the data called BBOX through the POST method the coordinates of the current map bounding box. This data can be processed as follows in the context of a PHP page that will act as a web service.

For example:
testnetworklink.html
<div data-owlappsmaplyrgroup = "yes"> 
    
  <iframe style = "border:none;width:100%;min-height:550px;height:80%;" data-owlappsmap = "yes"   >
    
    <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">  
      <Document>
 
        <open> 1 </open>
        
        <visibility> 1  </visibility> 
   
        <NetworkLink>
        
          <open> 1 </open>
           
          <Snippet> 
            <![CDATA[ 
              this is a first-level link and it has a refreshMode tag, so it has the "Unplug this network link" checkbox button, see below !   
            ]]>
          </Snippet>
          
          <Link>
            
            <href>
            
               https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/test_wfs.php
            
            </href>
            
            <refreshMode>
            
              onChange
            
            </refreshMode>
            
          </Link>
   
          <name>
          
            My first first-level network link
          
          </name>
          
          <visibility>
            1
          </visibility>
           
        </NetworkLink>
        
        
        
        <NetworkLink>
        
          <open> 0 </open>
           
          <Snippet> 
            <![CDATA[ 
              this is a first-level link and it has not refreshMode tag, so it has not the "Unplug this network link" checkbox button!
              <br/>
              Network link as a WMS geoservice because it delivers GroundOverlay tags.
            ]]>
          </Snippet>
          
          <Link>
            
            <href>
              https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/test_wms.php
            </href>
            
          </Link>
   
          <name>
            My second first-level network link
          </name>
          
          <visibility>
            1
          </visibility>
          
        </NetworkLink>
        
      </Document>

    </kml>

  </iframe> 

</div>
test_wms.php
<?php

  header('Content-type: text/xml');
  header("Expires: Tue, 03 Jul 2001 06:00:00 GMT");
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
  header("Cache-Control: post-check=0, pre-check=0", false);
  header("Pragma: no-cache");
  header("Connection: close");
  header('Content-type: text/html; charset=UTF-8'); 

  /* very important */
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: GET, POST, OPTIONS');


  /*
    Example of a PHP page code used as a WMS called by a given KML networklink
    see at: https://developers.google.com/kml/documentation/kmlreference#networklink
  */

  

  echo '<?xml version="1.0" encoding="ISO-8859-1"?>
  <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">  
    <Document>
      <open>
        1
      </open>
           
      <GroundOverlay>
        <Snippet>
          Satellite image on Sicilia island
        </Snippet>
      
        <description> __geolink__  </description>
        <Icon>
          <href> http://www.owlapps.net/modules/owlapps_apps/embedmap/img/etna.jpg </href>
        </Icon>
        <LatLonBox>
          <north>37.91904192681665</north>
          <south>37.46543388598137</south>
          <east>15.35832653742206</east>
          <west>14.60128369746704</west>
          <rotation>-0.1556640799496235</rotation>
        </LatLonBox>
      
        <name>
          Etna
        </name>
      </GroundOverlay>     
    
    </Document>
  
  </kml>
';

?>
test_wfs.php
<?php
 
  header('Content-type: text/xml');
  header("Expires: Tue, 03 Jul 2001 06:00:00 GMT");
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
  header("Cache-Control: post-check=0, pre-check=0", false);
  header("Pragma: no-cache");
  header("Connection: close");
  header('Content-type: text/html; charset=UTF-8'); 

  /* very important */
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: GET, POST, OPTIONS');


/*
  Example of a PHP page code used as a WFS called by a given KML networklink
  see at: https://developers.google.com/kml/documentation/kmlreference#networklink
*/

 
  $data = file_get_contents('php://input');
  $b = json_decode($data);

  $lon = ($b->{'BBOX'}[2] +  $b->{'BBOX'}[0])/ 2;  //longitude
  $lat = ( $b->{'BBOX'}[1]  +  $b->{'BBOX'}[3] )/ 2; //latitude


  sleep(1);

  echo '<?xml version="1.0" encoding="ISO-8859-1"?>
  <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">  
    
    <Document>
      
      <open> 1</open>
         
      <Style id="myico">
        <IconStyle id="myicon">
          <scale>2</scale>   
            <Icon>
              <href>http://www.owlapps.net/modules/owlapps_apps/embedmap/img/orangepin.png</href>
            </Icon>  
          </IconStyle>
      </Style>
   
   
      <Folder>
        <open>
          1
        </open>
        <name>
          Tutorial ' . rand(5, 150000) .
        '</name>
     
         
        <Placemark>
        
          <name> polygon whose color varies with each refresh </name>
          <Style>
            <LabelStyle>
              <minZoom>
                19
              </minZoom>
            </LabelStyle>
            <PolyStyle>
            <fill> 0 </fill>
            <outline> 0 </outline>
            <richDecos>
              <inner>
                <colorize>
                  <color>
                    rgb(' .   rand(0, 255)  . ',' .   rand(0, 255)  . ',' .  rand(0, 255)  . ')
                  </color>
                </colorize>
              </inner>
            </richDecos>
          </PolyStyle>
        </Style>
          
        <Polygon>
          <outerBoundaryIs>
            <LinearRing>
              <coordinates>
                5.075540874379179,47.25902566581779,0 5.075739785686084,47.25899496298661,0 5.075757936424637,47.25908035000109,0 5.075577503345499,47.25911881544968,0 5.075540874379179,47.25902566581779,0
              </coordinates>
            </LinearRing>
          </outerBoundaryIs>
        </Polygon>
       
      </Placemark>   
           
      <Placemark>
        <Snippet>
          This point is positioned in the center of the map each time you move on this same map!   
        </Snippet>
    
        <styleUrl>
          #myico
        </styleUrl>
     
        <name>
          Wandering point ' . rand(5, 150000).
        '</name>
        <description>
          <![CDATA[
            <div style="overflow:auto;width:100%;height:100%;max-height:150px;" > $[name] Here is my description, this feature is generated dynamically by a php page used as a <a href="https://fr.wikipedia.org/wiki/Web_Feature_Service"  >WFS</a> delivering <a href="https://developers.google.com/kml/documentation/kml_tut" target="_blank" >KML data</a>, <br/>
   
            it receives by <a target="_blank" href="https://en.wikipedia.org/wiki/POST_(HTTP)" >POST method</a> a stringified json data: the coordinates (WGS84 Decimal degrees) of the bounding box of the current map view ( <strong>{BBOX:[longitude_west, latitude_south, longitude_east, latitude_north]}</strong> ) when the PHP page requested.
            <br/>
            BBOX received: [' .  $b->{'BBOX'}[0] . ', ' . $b->{'BBOX'}[1] . ', ' . $b->{'BBOX'}[2] . ', ' . $b->{'BBOX'}[3] . '].<br/>
            Have a look at: <a href="http://www.owlapps.net/modules/owlapps_apps/embedmap/" target="_blank" > OWLAPPS EMBEDMAP</a>
          ]]>
        </description>
        
        <Point>
          <coordinates>' . $lon . ',' . $lat .
          '</coordinates>
        </Point>
      </Placemark>
  
    </Folder>
   
    <NetworkLink>
      <open>
        1
      </open>
      
      <Link>  
        <href>
          <![CDATA[
            https://owlapps.000webhostapp.com/modules/owlapps_apps/embedmap/test_wfs.php
          ]]>
        </href>
      </Link>
   
      <name>
        Nested network link
      </name>
      
      <Snippet>
        <![CDATA[
          This nested link is the first-level link calling itself in fact !
          <br/>
          We are facing an infinite loop of death but fortunately this app has a safeguard limiting the number of consecutive link calls!
        ]]>  
      </Snippet>
      
      <visibility>
        1
      </visibility>
      
    </NetworkLink>
    
  </Document>
  
 </kml>
';

?>


Live demo: /modules/owlapps_apps/embedmap/testnetworklink.html



TO BE CONTINUED...



Not supported

<colorMode>, <heading>, <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, <PhotoOverlay>



Graphic rendering

COMING SOON !




Contact: owlappsnet@gmail.com

Go back to home page: owlapps.net