Instructions for use of the Embedded Owlapps Maps technology

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.

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:

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. The KMZ (compressed KML) format is not supported or planned for the near and distant future.

Because Owlapps.net does not store or forward user data to its server.

KML tag support & implementation

the goal 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.

Soon you will have more information about the substitute cards ( __geolink__ , $[Snippet] , $[name] ) that will benefit the child tags <Snippet> and <description> of the mother tags <Placemark> and <GroundOverlay>

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:

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:

 <iframe data-owlappsmap = "yes" data-owlappskml = '<?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>3</width></LineStyle> <PolyStyle><color>661400E6</color><outline></outline></PolyStyle></Style><description><![CDATA[Rayon: 430 mètre(s)]]></description><MultiGeometry><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></MultiGeometry></Placemark></Document></kml>' 
 style="border:none;width:100%;height:80%;min-height:350px;" ></iframe>

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" 
    data-owlappskml = '<?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><outline></outline></PolyStyle></Style><description><![CDATA[Rayon: 430 mètre(s)]]></description><MultiGeometry><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></MultiGeometry></Placemark></Document></kml>' 
    style="border:none;width:100%;height:80%;min-height:350px;" >
  </iframe>
	
  <iframe data-owlappsmap = "yes" 
    data-owlappskml = '<?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>' 
    style="border:none;width:100%;height:80%;min-height:350px;" >
  </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",
      "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 Base layer",
      "attribution": "Owlapps.net & INSEE"
    },
    
    { "type":"wms",
      "overlay":"yes",
      "url": "//ows.mundialis.de/services/service?", 
      "layers":"SRTM30-Colored-Hillshade",
      "name":"Mundialis",
      "attribution": "Unknown"
    }
  ]'
></iframe>

Adding a video as an overlay (always as an Overlay layer): your object must have the "type" property set to "video" .

For instance:

 
<iframe style = "border:none;width:100%;min-height:350px;height:80%;" data-owlappsmap = "yes" 
  data-owlappslayers = '[
    {"type":"video",
      "url": "https://www.mapbox.com/bites/00188/patricia_nasa.webm, https://www.mapbox.com/bites/00188/patricia_nasa.mp4",
      "bounds": [[ 32, -130], [ 13, -100]],
      "interactive": true,
      "autoplay": true,
      "loop": true,
      "muted": true,
      "playsInline": true,
      "opacity": 0.7,
      "name":"couche vidéo USA West Coast",
      "attribution": " test vidéos USA West Coast"
    }
  ]'
></iframe>

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 container

<kml> (of course),
📄 <Document>,
📁 <Folder>,
🔗 <NetworkLink> (coming soon)

Considered as feature

<Placemark>, <MultiGeometry> tag is supported to!
<GroundOverlay>
<ScreenOverlay> supported but useless

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

COMING SOON !

Not supported:

<refreshMode>, <refreshInterval>, <viewRefreshMode>, <flyToView>, <viewBoundScale>, <ItemIcon>, <Model>, <bgColor>, <maxSnippetLines>, </StyleMap>, <LabelStyle>, <TimeSpan>, <TimeStamp>, <NetworkLinkControl>, <LookAt>, <Camera>, <Metadata>, <ExtendedData>, <Region>, <extrude>, <tessellate>, <altitudeMode>, Elements that currently use the gx prefix, <BalloonStyle>, <PhotoOverlay>