We are going to create a free website, its role will be to serve as a publishing platform for HTML/PHP files, KML files, SVG files and interactive embedMap maps.
Go to https://000webhost.com/, click on sign-in button
Once connected, create your website: choose its name (grandduc111 is mine, choose your own name), choose a password and click on “Create” button
Choose “Upload site”, click on its “Select” button
Double-click on the « public_html » folder or right-click on it and click on “Open” button
Right-click on the « .htaccess » file, click on “Edit” button
Add these lines :
Options -Indexes
Header set Access-Control-Allow-Origin "*"
AddType application/x-httpd-php .kml
Click on “SAVE & CLOSE” button
Click on « New Folder » button
Type « my_svg_files », click on « CREATE » button
Click on « New Folder » button, type “my_kml_files”, click on “CREATE” button
Your « my_kml_files » and « my_svg_files » folders are created (in “public_html” folder)
Go to « my_svg_files » folder, click on “New File” button
Type « test1.svg », click on « CREATE » button
Right-click on the « test1.svg » line and click on “Edit” button
Add these lines:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
Click on « SAVE & CLOSE » button, right-click on the line of “test1.svg” file, click on “View”
Your SVG file is displayed:
Go to « my_kml_files » folder, Click on « New File » button
Type « test1.kml », click on “CREATE” button
Right-click on the « test1.kml » line, click on the “Edit” button
Add these lines :
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<name>Portland</name>
<Point>
<coordinates>-122.681944,45.52,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Rio de Janeiro</name>
<Point>
<coordinates>-43.196389,-22.908333,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Istanbul</name>
<Point>
<coordinates>28.976018,41.01224,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Reykjavik</name>
<Point>
<coordinates>-21.933333,64.133333,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Simple Polygon</name>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>-122.681944,45.52,0
-43.196389,-22.908333,0
28.976018,41.01224,0
-21.933333,64.133333,0
-122.681944,45.52,0</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>
Click on « SAVE & CLOSE » button
Right-click on the « test1.kml » line and click on « View » button
Your KML file is displayed but we don’t have any spatial information, so we are going to display its content on the “Google Earth Pro” Software. Download and install it if it’s not already in your computer: https://www.google.com/intl/en/earth/about/versions/#earth-pro
Open “Google Earth Pro” software, click on « Add » button, click on “Network Link” button
Type «https://grandduc111.000webhostapp.com/my_kml_files/test1.kml » (of course use the URL of your own file) as Link and « myNtLink » as Name, click on “Ok” button
Your KML and its objects are listed and displayed on the 3D globe
Video demo:
Your KML file is also readable by the embedMap webapp, return to « public_html » folder, click on « New File » button
Type « test_embedmap1.html », click on « Create » button
Right-click on the “test_embedmap1.html” file line, click on “Edit” button
Add these lines (HTML code):
<!doctype html> <html> <head> <title> My first embedMap map </title> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta charset="utf-8"> </head> <body> <script src = 'https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js' language="javascript" defer></script> <div name = "My online test" data-owlappsmaplyrgroup = "yes"> <iframe name="My Link" 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[ first-level link and it has a refreshMode tag, so it has the "Unplug this network link" checkbox button, see below ! ]]> </Snippet> <Link> <href> <![CDATA[ https://grandduc111.000webhostapp.com/my_kml_files/test1.kml ]]> </href> <refreshMode> onChange </refreshMode> </Link> <name> My ntLink </name> <visibility> 1 </visibility> </NetworkLink> </Document> </kml> </iframe> </div> </body> </html>
Click on “SAVE & CLOSE” button and right-click on the “test_embedmap1.html” line, click on “View” button
Your embedMap interactive map is displayed:
Link: https://grandduc111.000webhostapp.com/test_embedmap1.html