000webhost as a free web platform for your webmapping projects

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>

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"?>

<name>Portland</name>

<Point>

</Point>

</Placemark>

<name>Rio de Janeiro</name>

<Point>

</Point>

</Placemark>

<name>Istanbul</name>

<Point>

</Point>

</Placemark>

<name>Reykjavik</name>

<Point>

</Point>

</Placemark>

<name>Simple Polygon</name>

<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

Étiquettes