mariopesch/gist:c25ae2bca548a334b7ed8f07d4fdfc88

## gistfile1.txt
<!DOCTYPE HTML>

<head>
<meta name="Mario Pesch" charset="utf-8" content="Some Information about the biggest Cities in Germany">
    <link rel="stylesheet" href="style.css" >
    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed" rel="stylesheet">
    <link rel="stylesheet"href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
    integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
    integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
    crossorigin=""></script>
</head>


<body>

<h1 font-family='Arial'>Some Information about Germany</h1>
<h2></h2>
<p>There a only four cities in Germany with more than 1 Million people. Cologne is the smallest cities in Germany with a population over 1 Million people</p>

<img src="map_cities_germany.png">
<p>http://www.stepmap.de/landkarte/die-15-groessten-staedte-deutschlands-182939</p>

<table style="width:100%">
    <tr>
      <th>Name</th>
      <th>Einwohner</th>
      <th>Fläche</th>
    </tr>
    <tr>
      <td>Berlin</td>
      <td>3,47 Million</td>
      <td>891,68km<sup>2</sup></td>
    </tr>
    <tr>
      <td>Hamburg</td>
      <td>1,763 Million</td>
      <td></td>
    </tr>
    <tr>
      <td>Munich</td>
      <td>1.43 Million </td>
      <td></td>
    </tr>
  </table>

<p>More information about the three cities can be found here:</p>
  <ol>
    <li><a href="http://www.berlin.de">Berlin</a></li>
    <li><a href="http://www.hamburg.de">Hamburg</a></li>
    <li><a href="http://www.muenchen.de">München</a>
    </ol>
<p></a></p>
<p>All information from <a href="www.wikipedia.org">wikipedia</a></p>

<form name="input" action="http://www.w3schools.com/html/demo_form_action.asp" method="GET"></form>
<fieldset>
  <legend>Personal information:</legend>
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</fieldset>

<h1>Map</h1>
<div id="map" style="width: 700px;height: 500px"></div>
<script>
	var map=L.map('map').setView([51.965, 7.62], 14);
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
	id: 'examples.map-i875mjb7'
	}).addTo(map);

	var markermuenster = L.marker([51.957196, 7.617909]).addTo(map);
	markermuenster.bindPopup("<b>Münster</b><br>Münster(Westf)");

	var markerhamburg = L.marker([53.549271, 9.981349]).addTo(map);
	markerhamburg.bindPopup("<b>Hamburg</b>");

	var markerberlin = L.marker([52.519050, 13.409594]).addTo(map);
	markerberlin.bindPopup("<b>Berlin</b>");

  var markermunich = L.marker([48.132833, 11.574099]).addTo(map);
  markermunich.bindPopup("<b>Munich</b>");


	var muenstercircle = L.circle([51.957196, 7.617909], {
    color: 'red',
    fillColor: '#f03',
    radius: 50000,
    fillOpacity: 0.5}).addTo(map);

	var pointA = new L.LatLng(51.957196, 7.617909);
	var pointB = new L.LatLng(53.549271, 9.981349);
	var pointList = [pointA, pointB];

	var muensterhamburgLine = new L.Polyline(pointList, {
	color: 'red',
	weight: 8,
	opacity: 0.5,
	smoothFactor: 1	});	muensterhamburgLine.addTo(map);

	var popup = L.popup();
	function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
	}

	map.on('click', onMapClick);

</script>
	<!DOCTYPE HTML>

	<head>
	<meta name="Mario Pesch" charset="utf-8" content="Some Information about the biggest Cities in Germany">
	<link rel="stylesheet" href="style.css" >
	<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed" rel="stylesheet">
	<link rel="stylesheet"href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
	integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
	crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
	integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
	crossorigin=""></script>
	</head>



	<body>

	<h1 font-family='Arial'>Some Information about Germany</h1>
	<h2></h2>
	<p>There a only four cities in Germany with more than 1 Million people. Cologne is the smallest cities in Germany with a population over 1 Million people</p>

	<img src="map_cities_germany.png">
	<p>http://www.stepmap.de/landkarte/die-15-groessten-staedte-deutschlands-182939</p>

	<table style="width:100%">
	<tr>
	<th>Name</th>
	<th>Einwohner</th>
	<th>Fläche</th>
	</tr>
	<tr>
	<td>Berlin</td>
	<td>3,47 Million</td>
	<td>891,68km<sup>2</sup></td>
	</tr>
	<tr>
	<td>Hamburg</td>
	<td>1,763 Million</td>
	<td></td>
	</tr>
	<tr>
	<td>Munich</td>
	<td>1.43 Million </td>
	<td></td>
	</tr>
	</table>

	<p>More information about the three cities can be found here:</p>
	<ol>
	<li><a href="http://www.berlin.de">Berlin</a></li>
	<li><a href="http://www.hamburg.de">Hamburg</a></li>
	<li><a href="http://www.muenchen.de">München</a>
	</ol>
	<p></a></p>
	<p>All information from <a href="www.wikipedia.org">wikipedia</a></p>

	<form name="input" action="http://www.w3schools.com/html/demo_form_action.asp" method="GET"></form>
	<fieldset>
	<legend>Personal information:</legend>
	First name:<br>
	<input type="text" name="firstname" value="Mickey">
	<br>
	Last name:<br>
	<input type="text" name="lastname" value="Mouse">
	<br><br>
	<input type="submit" value="Submit">
	</fieldset>

	<h1>Map</h1>
	<div id="map" style="width: 700px;height: 500px"></div>
	<script>
	var map=L.map('map').setView([51.965, 7.62], 14);
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
	id: 'examples.map-i875mjb7'
	}).addTo(map);

	var markermuenster = L.marker([51.957196, 7.617909]).addTo(map);
	markermuenster.bindPopup("<b>Münster</b><br>Münster(Westf)");

	var markerhamburg = L.marker([53.549271, 9.981349]).addTo(map);
	markerhamburg.bindPopup("<b>Hamburg</b>");

	var markerberlin = L.marker([52.519050, 13.409594]).addTo(map);
	markerberlin.bindPopup("<b>Berlin</b>");

	var markermunich = L.marker([48.132833, 11.574099]).addTo(map);
	markermunich.bindPopup("<b>Munich</b>");



	var muenstercircle = L.circle([51.957196, 7.617909], {
	color: 'red',
	fillColor: '#f03',
	radius: 50000,
	fillOpacity: 0.5}).addTo(map);

	var pointA = new L.LatLng(51.957196, 7.617909);
	var pointB = new L.LatLng(53.549271, 9.981349);
	var pointList = [pointA, pointB];

	var muensterhamburgLine = new L.Polyline(pointList, {
	color: 'red',
	weight: 8,
	opacity: 0.5,
	smoothFactor: 1 }); muensterhamburgLine.addTo(map);

	var popup = L.popup();
	function onMapClick(e) {
	popup
	.setLatLng(e.latlng)
	.setContent("You clicked the map at " + e.latlng.toString())
	.openOn(map);
	}

	map.on('click', onMapClick);

	</script>