DE:OSM in Website für Gemeinde/html

From OpenStreetMap Wiki
Jump to navigation Jump to search

broom

Dieser Artikel oder Abschnitt kann veraltete Informationen enthalten. Enthaltene Informationen können nicht mehr korrekt oder nicht weiter von Bedeutung sein.
Wenn du aktuelle Informationen beitragen kannst, hilf bitte bei der Aktualisierung oder teile diese auf der Diskussionsseite mit. (Discussion)
Übersicht   HTML-Datei   JS-Funktionen   Straßenliste   CSS-Datei   GPX-Dateien   Testanwendung   ToDo-Liste   OL-Bausteine    

Die HTML-Datei stellt die Bereiche für Suche, Straßenliste und Karte bereit, also die spätere Seite für die User, und bindet die benötigten CSS- und JavaScript-Dateien ein.

HTML-Datei

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de-de">
<head>
	<title>OSM-Karte | Testanwendung</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta http-equiv="content-language" content="de" />
	<meta name="author" content="Markus Bärlocher, Alexander Matheisen und viele andere" />
	<link rel="stylesheet" type="text/css" href="OSM-Karte.css">
	<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
	<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
	<script type="text/javascript" src="functions.js"></script>
	<script type="text/javascript" src="translations.js"></script>
</head>
<body onload=createMap();>
	<div id="header">
		<div id="content">
			<a href="http://www.lau-net.de/baerlocher/osm/Simmelsdorf.html">Karte von Simmelsdorf</a>
		</div>
		<div style="align:right; text-align:right; width:155px; height:35px; position:absolute; top:35px; right:25px ">Men&uuml;: klicke auf +</div>
		<div id="osm">Mit freundlicher Unterst&uuml;tzung von <a href="http://www.openstreetmap.org"
title="www.openstreetmap.org">openstreetmap.org</a> &nbsp; <a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de" target="fenster" onclick="window.open('link.html',
'fenster', 'width=800,height=450,status,resizable,scrollbars')">&copy;</a>
			<? include("streetlist.php"); ?>
			<input onkeydown="initEnter(event.which);" name="search" type="text" id="searchBox" size="19">
			<a id="searchButton" href="javascript:requestSearch();">Suche</a>
		</div>
	</div>
	<div id="mapFrame">
		<noscript>
			<b>JavaScript ist nicht aktiviert.</b>
			<br />
			<p>Zur Anzeige der Karte ist JavaScript erforderlich. Bitte aktivieren Sie JavaScript in ihren Browsereinstellungen. Falls Sie NoScript verwenden, denken Sie daran, auch <em>openstreetmap.org</em> und <em>openlayers.org</em> freizuschalten, damit die erforderlichen JavaScript-Dateien geladen werden k&ouml;nnen.</p>
		</noscript>
	</div>
	<div id="resultList"></div>
</body>
</html>

HTML-Datei herunterladen / kopieren

Du hast zwei Möglichkeiten an die HTML-Datei zu kommen. Zum einen kannst du dir die fertige Datei runterladen. Es handelt sich dabei um die, die aktuell in dem Beispiel benutzt wird. Sie kann sich u.U. in Details von dem auf dieser Seite gezeigten Code unterscheiden. Dafür ist das Herunterladen die sichere Variante, da dabei keine Zeichen (besonders am Anfang und am Ende der Datei) verloren gehen können.

Herunterladen

Hier kannst du dir die fertige index.php herunterladen (die aber leider nicht mehr funktioniert)

Kopieren

  1. kopiere den gesamten Code. Achte darauf, dass du auch das erste und letzte Zeichen kopiert hast.
  2. füge den Code im Texteditor in eine neue Seite ein
  3. passe den Code wie unten beschrieben nach deinen Bedürfnissen an
  4. speichere den Code unter einem beliebigen Dateinamen mit der Dateiendung ".php"
  5. lade die Datei mit dem FTP-Programm auf den Webserver in den passenden Ordner
Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=DE:OSM_in_Website_für_Gemeinde/html&oldid=1987917"