Moin,
ich weiß momentan nicht weiter,
für mein kleineres Projekt: http://www.ladegleis.de/ möchte ich noch ein Suchfeld integrieren.
Der Aufbau der Internetseite ist einfach gestaltet.
Wo kann man sich Beispiele von verschiedenen Codes für eine Integration eines Suchfeldes ansehen?
Alternative ist ein fertiger Code, aber dann lerne ich diesen Bestandteil nicht!
Bislang klappte alles sehr gut.
Ich sage schon im Vorwege: ,Danke".
Gruß
Thal
Schau mal, ob das da weiterhilft: http://wiki.openstreetmap.org/wiki/User:SunCobalt/OpenLayers_Suche
oder das da: http://forum.openstreetmap.org/viewtopic.php?id=17596
Grüße, Max
.
Das Beispiel hat mir nicht weiter geholfen.
Wie meinst du das, mmd?
Also braucht man doch nur ein Link (auf einer ,Adressdatei"), ein script-code (zur Einbindung in HTML) und eine leere Datei zum beschreiben(vermute ich einmal, war in dem Beispiel: ,SunCobalt", die csv-Datei).
Natürlich nicht zu vergessen: css-code.
Ich werde noch einmal weiter suchen.
.
Moin,
ich glaube ich brauche diesmal eine Anleitung.
Über Weihnachten hinüber konnte ich ein wenig herumtesten, aber es hat nichts genützt.
Vielleicht wäre es sinnvoll, eine andere Hilfe zu tätigen.
Der Startcode der index.html ist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>www.ladegleis.de</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="Christian Thal">
<meta name="keywords" content="Ladegleis, Ladestelle, KLV, Containerterminals, Umschlagterminals, Umschlagterminal, Containerterminal, Ladegleise, Ladestellen, Startseite, Freiladegleis, Freiladegleise">
<link rel="stylesheet" type="text/css" href="ladegleis.css"><link>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36089111-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="header">
<div id="content">Willkommen auf der Internetseite der Ladestellen/Umschlagterminals/Firmengleisanschlüsse</div>
<div id="link">
<br>Berichtigungsmitteilungen/Verbesserungen/Vorschläge einfach per E-Mail an mich: <a href="mailto:ladegleis@gmx.de">ladegleis@gmx.de</a></div>
<div id="osm">©<a href="http://www.openstreetmap.org">OpenStreetMap</a>
und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
</div>
</div>
<ul class="navbar">
<li><a href="index.html">Startseite</a></li>
<li><a href="Werbung.html">Werbung</a></li>
<li><a href="Update.html">Update</a></li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
<h3>Ladestellen:<br><img src="Ladestellen.png" alt="Ladestellenbild"><br><br>
Terminals:<br><img src="Terminal.png" alt="Terminalbild"><br><br>
Containerterminals:<br><img src="Containerterminal.png" alt="Containerterminalbild"><br><br>
Firmenanschlüsse:<br><img src="Firmenanschluss.png" alt="Firmenanschlussbild"><br><br>
Häfen:<br><img src="Hafen.png" alt="Hafenbild"><br><br>
Wer weiß mehr?:<br><img src="Fragezeichen.png" alt="Fragezeichenbild"><br></h3>
<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var pois = new OpenLayers.Layer.Text( "My Points",
{ location:"./DeutschlandContainerterminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points1",
{ location:"./DeutschlandFirmenanschluss.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points2",
{ location:"./DeutschlandHafen.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points3",
{ location:"./DeutschlandLadestellen.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points4",
{ location:"./DeutschlandTerminal.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points5",
{ location:"./ItalienTerminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points5",
{ location:"./PolenContainerterminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points5",
{ location:"./SchweizTerminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
//Set start centrepoint and zoom
var lonLat = new OpenLayers.LonLat( 9.755859375, 50.958426723359935 )
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom=5;
map.setCenter (lonLat, zoom);
</script>
</body>
</html>
Wo, und wie muss ich welche Ergänzungen tätigen?
Und Warum?
So würde mir wenigstens geholfen werden können und durch mein nachfragen würde doch eine stetige kleinere Hilfe auch für andere aufgebaut werden.
Gruß
Thal
Man kann - aber bei einer wachsenden (bzw. unbekannten) Datenmenge ist das ein Unding, da vorab die komplette Datenbank (in diesem Fall plain text Dateien) zuerst zum Anwender übertragen werden muss (und dort aktuell in unzählige JS Objekte gewandelt und eingetragen werden). In diesem Beispiel hat eine einzige solche Datei 170 kB (http://www.ladegleis.de/DeutschlandLadestellen.txt - es sind hier aber noch weitere durchsuchbare Dateien vorhanden, die geladen werden). Das sind Mengen, bei denen die serverseitige Suche auf einer Datenbank dringend anzuraten ist. Zumal hunderte sich überlappende Grafiken keinen Sinn machen. Auch hinsichtlich zukünftigen Ausbauten macht es Sinn, sogleich eine “große” Lösung anzugehen.
Klar weiß auch ich, dass 170 kB heute in den meisten Fällen flott übertragen sind. Guter Stil ist das aber nicht. Und manche zahlen auch Volumentarife, wohnen in Dorf XYZ, verwenden IE7 auf nem 800MHz Rechner usw… Hier sind Webtechniken gefragt, bei deren Umsetzung auch viele “Profis” kein sauberes Ergebnis zustande bringen.
die karte ist ganz interessant. sind die ladestellen aus osm oder dient osm nur als basiskarte?
falls aus osm: welche keys werden ausgewertet?
.
Moin,
zuerst die Antwort auf die Frage von RvdtG:
OSM dient nur als Basiskarte zum Anzeigen der Standorte.
Die TXT-Dateien habe ich einfach bevorzugt (am Anfang habe ich auch mit CSV-Dateien herum experementiert).
Antwort zu MMD:
CSV-Dateien benutze ich nicht, TXT-Dateien.
Der Aufbau einer Ortssuche sollte in etwa so aussehen:
In der index.html-Datei ist der Link vorhanden für die Adressen (auf einen anderen Server:Nomination).
Desweiteren der Aufbau von Nomination-Adresssuchleiste.
Ein neuer Marker zur Lokalisierung für die Adresse.
Eine Datei zum speichern der Ergebnisse und zum Anzeigen der Ergebnisse in einer extra Spalte (Ausschaltbar).
Dies ist meine Vorstellung.
Antwort zu Joachim Moskalewski:
Die Datenmenge ist gering, eine Datenbank wäre irgendwann sinnvoll.
Ich finde das Laden bei der dynamischen CSV-Datei bei Netzwolf (die vielen Schatztruhen) zu lange.
Gruß
Thal
Moin,
ich habe jetzt den code etwas weiter angepasst.
Meine Fragen hierzu:
Steht der Link:
<script src="http://nominatim.openstreetmap.org/search?" type="text/javascript"></script>
an der richtigen Stelle in der index.html?
Wo muß man Format=xml eingeben (Speicherung der Suchergebnisse)?
Die Searchbox habe ich einmal mit dem Code:
<div id="search">
<input type="text" name="addr" value="" id="addr" size="10" />
<button type="button" onclick="addr_search();">Test</button>
<div id="results"/>
</div>
auch hinzugefügt.
In der CSS-Datei habe ich einfach dieses noch angehängt (für die Gestaltung und wo es stehen soll, für die Search-Box):
div#search {
background-color: white;
position: absolute;
bottom: 60px;
left: 10px;
width: auto;
height: auto;
padding: 10px;
}
div#search input {
width: 80px;
}
div#results {
font-style: sans-serif;
color: black;
font-size: 75%;
}
Der gesamte Code für die index.html ist dann momentan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>www.ladegleis.de</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="Christian Thal">
<meta name="geo.region" content="DE-NI" />
<meta name="geo.placename" content="Buchholz" />
<meta name="geo.position" content="53.320005;9.859704" />
<meta name="ICBM" content="53.320005, 9.859704" />
<meta name="keywords" content="Ladegleis, Ladestelle, KLV, Containerterminals, Umschlagterminals, Umschlagterminal, Containerterminal, Ladegleise, Ladestellen, Startseite, Freiladegleis, Freiladegleise">
<link rel="stylesheet" type="text/css" href="ladegleis.css"><link>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36089111-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="header">
<div id="content">Willkommen auf der Internetseite der Ladestellen/Umschlagterminals/Firmengleisanschlüsse</div>
<div id="link">
<br>Berichtigungsmitteilungen/Verbesserungen/Vorschläge einfach per E-Mail an mich: <a href="mailto:ladegleis@gmx.de">ladegleis@gmx.de</a></div>
<div id="osm">©<a href="http://www.openstreetmap.org">OpenStreetMap</a>
und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
</div>
</div>
<ul class="navbar">
<li><a href="index.html">Startseite</a></li>
<li><a href="Werbung.html">Werbung</a></li>
<li><a href="Update.html">Update</a></li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
<h3>Ladestellen:<br><img src="Ladestellen.png" alt="Ladestellenbild"><br><br>
Terminals:<br><img src="Terminal.png" alt="Terminalbild"><br><br>
Containerterminals:<br><img src="Containerterminal.png" alt="Containerterminalbild"><br><br>
Firmenanschlüsse:<br><img src="Firmenanschluss.png" alt="Firmenanschlussbild"><br><br>
Häfen:<br><img src="Hafen.png" alt="Hafenbild"><br><br>
Wer weiß mehr?:<br><img src="Fragezeichen.png" alt="Fragezeichenbild"><br></h3>
<div id="mapdiv"></div>
<div id="search">
<input type="text" name="addr" value="" id="addr" size="10" />
<button type="button" onclick="addr_search();">Test</button>
<div id="results"/>
</div>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://nominatim.openstreetmap.org/search?" type="text/javascript"></script>
<script type="text/javascript">
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var pois = new OpenLayers.Layer.Text( "My Points",
{ location:"./DeutschlandContainerterminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points1",
{ location:"./DeutschlandFirmenanschluss.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points2",
{ location:"./DeutschlandHafen.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points3",
{ location:"./DeutschlandLadestellen.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points4",
{ location:"./DeutschlandTerminal.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points5",
{ location:"./ItalienTerminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points6",
{ location:"./PolenContainerterminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points7",
{ location:"./SchweizTerminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
//Set start centrepoint and zoom
var lonLat = new OpenLayers.LonLat( 9.755859375, 50.958426723359935 )
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom=5;
map.setCenter (lonLat, zoom);
</script>
</body>
</html>
Die neue css-Datei wäre dann wohl schon fertig:
html,body {
background-color: #000000;
height: 100%;
width: 100%;
margin: 1%; padding: 0;
overflow: hidden;
}
a {
color: #FF0033;
}
a:hover {
color: #FF0033;
text-decoration: underline;
}
h1 {
font-family: Verdana, Arial;
font-size: 1em;
color: #000000;
}
h2 {
font-family: Verdana, Arial;
font-size: 0.7em;
color: #000000;
}
h2 li: {
color: #FF0033;
text-decoration: none;
}
#header {
font-family: Verdana, Arial;
overflow: hidden;
color: #ffffff;
text-align: center;
}
#mapdiv {
position:absolute;
top:150px;
left:200px;
width:80%;
height:80%;
padding: 0; margin: 0;
}
#content {
font-size: 1em;
}
#osm {
font-size: 0.7em;
font-style: italic;
margin-bottom: 20px;
}
#link {
font-size: 0.7em;
font-style: italic;
margin-bottom: 20px;
}
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
h3 {
font-family: Verdana, Arial;
font-size: 0.5em;
color: #FFFFFF;
margin-left: 2px;
margin-top: 6%;
}
div#search {
background-color: white;
position: absolute;
bottom: 60px;
left: 10px;
width: auto;
height: auto;
padding: 10px;
}
div#search input {
width: 80px;
}
div#results {
font-style: sans-serif;
color: black;
font-size: 75%;
}
Wie verlinkt man die Searchbox mit einer neuen xml-Datei?
Gruß
Thal
PS: Ich versuche es einfach zu lernen, schwere Materie.
.
Auch das ist eine Suche mit serverseitigem Script. Nur eben kein selbstgschriebenes auf dem eigenen Server. Es wird auch nicht “im Browser” gesucht. Ich bleibe bei meiner Aussage: Will man ohne serverseitigem Script bzw. im Browser suchen, muss die zu durchsuchende Datenbank vorab zum Webseitenbesucher transportiert werden (in welcher Form auch immer - CSV, XML; plain text usw.). Nur sinnvoll bei einer sehr geringen und nicht wachsenden Datenmenge (und auch dann würde ich weder Mühe noch Zeit in eine solche Sackgassenlösung stecken).
.
]Moins,
Hmm…
Also die Such-Engine von Nominatim als “Script” zu bezeichnen halte ich für mutig. Dito die Overpass-Engine wie auch den zentralen OSM-Datenbank-Server. Bei diesen Webdiensten denke ich eher an das als an ein Skript.
Selbstverständlich braucht jede nichttriviale™ Suche eine Suchengine, die die eigentliche Suche durchführt. Weil das Sicherheitskonzept “Same-Domain-Policy” dem JavaScript das Abschicken von XmlHttpRequest-Anfragen nur an den Server erlaubt, von dem die HTML-Seite geladen wurde, bietet sich die Nutzung eines “Proxy”-Scriptes auf dem eigenen Webserver an, das die Anfrage vom Script an die Suchengine weiterleitet und deren Antwort an das Script zurückreicht, und so die Einschränkung umgeht.
Wenn der eigene Webserver aber die Daten nur durchreicht, und wenn der Suchdienst das JSONP-Format bei der Antwort anbietet, dann kann man auf das Proxyscript verzichten und bekommt eine schlankere Lösung: ein zusätzliches Script einbinden, wenige Zeilen JS hinzufügen, mit ein paar Zeilen CSS die Suchleiste positionieren und stylen, und … schon hat die eigene Seite eine Suchleiste!
Die Welt ist und die Menschen darin sind immer bunter als man es sich vorstellt und als man es sich vorstellen kann. Möglicherweise ist die Sackgassenlösung genau das, was jemand sucht? Suche im Inhalt einer Seite als Alternative zu einer unendlichen Select-Box?
Gruß Wolf
Wow, echt coole arbeit 
Moin,
nun hat es doch einmal geklappt.
Großes Dankeschön an euch allen und an Netzwolf (durch dein Code kam ich weiter).
Vorher sah er ja so aus (Ausgangslage):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>www.ladegleis.de</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="Christian Thal">
<meta name="geo.region" content="DE-NI" />
<meta name="geo.placename" content="Buchholz" />
<meta name="geo.position" content="53.320005;9.859704" />
<meta name="ICBM" content="53.320005, 9.859704" />
<meta name="keywords" content="Ladegleis, Ladestelle, KLV, Containerterminals, Umschlagterminals, Umschlagterminal, Containerterminal, Ladegleise, Ladestellen, Startseite, Freiladegleis, Freiladegleise">
<link rel="stylesheet" type="text/css" href="ladegleis.css"><link>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36089111-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="header">
<div id="content">Willkommen auf der Internetseite der Ladestellen/Umschlagterminals/Firmengleisanschlüsse</div>
<div id="link">
<br>Berichtigungsmitteilungen/Verbesserungen/Vorschläge einfach per E-Mail an mich: <a href="mailto:ladegleis@gmx.de">ladegleis@gmx.de</a></div>
<div id="osm">©<a href="http://www.openstreetmap.org">OpenStreetMap</a>
und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
</div>
</div>
<ul class="navbar">
<li><a href="index.html">Startseite</a></li>
<li><a href="Werbung.html">Werbung</a></li>
<li><a href="Update.html">Update</a></li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
<h3>Ladestellen:<br><img src="Ladestellen.png" alt="Ladestellenbild"><br><br>
Terminals:<br><img src="Terminal.png" alt="Terminalbild"><br><br>
Containerterminals:<br><img src="Containerterminal.png" alt="Containerterminalbild"><br><br>
Firmenanschlüsse:<br><img src="Firmenanschluss.png" alt="Firmenanschlussbild"><br><br>
Häfen:<br><img src="Hafen.png" alt="Hafenbild"><br><br>
Wer weiß mehr?:<br><img src="Fragezeichen.png" alt="Fragezeichenbild"><br></h3>
<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var pois = new OpenLayers.Layer.Text( "My Points",
{ location:"./DeutschlandContainerterminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points1",
{ location:"./DeutschlandFirmenanschluss.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points2",
{ location:"./DeutschlandHafen.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points3",
{ location:"./DeutschlandLadestellen.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points4",
{ location:"./DeutschlandTerminal.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points5",
{ location:"./ItalienTerminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points6",
{ location:"./PolenContainerterminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points7",
{ location:"./SchweizTerminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
//Set start centrepoint and zoom
var lonLat = new OpenLayers.LonLat( 9.755859375, 50.958426723359935 )
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom=5;
map.setCenter (lonLat, zoom);
</script>
</body>
</html>
Danach so (im jetztigen Moment):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>www.ladegleis.de</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="Christian Thal">
<meta name="geo.region" content="DE-NI" />
<meta name="geo.placename" content="Buchholz" />
<meta name="geo.position" content="53.320005;9.859704" />
<meta name="ICBM" content="53.320005, 9.859704" />
<meta name="keywords" content="Ladegleis, Ladestelle, KLV, Containerterminals, Umschlagterminals, Umschlagterminal, Containerterminal, Ladegleise, Ladestellen, Startseite, Freiladegleis, Freiladegleise">
<link rel="stylesheet" type="text/css" href="ladegleis.css"><link>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36089111-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="header">
<div id="content">Willkommen auf der Internetseite der Ladestellen/Umschlagterminals/Firmengleisanschlüsse</div>
<div id="link">
<br>Berichtigungsmitteilungen/Verbesserungen/Vorschläge einfach per E-Mail an mich: <a href="mailto:ladegleis@gmx.de">ladegleis@gmx.de</a></div>
<div id="osm">©<a href="http://www.openstreetmap.org">OpenStreetMap</a>
und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
</div>
</div>
<ul class="navbar">
<li><a href="index.html">Startseite</a></li>
<li><a href="Werbung.html">Werbung</a></li>
<li><a href="Update.html">Update</a></li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
<h3>Ladestellen:<br><img src="Ladestellen.png" alt="Ladestellenbild"><br><br>
Terminals:<br><img src="Terminal.png" alt="Terminalbild"><br><br>
Containerterminals:<br><img src="Containerterminal.png" alt="Containerterminalbild"><br><br>
Firmenanschlüsse:<br><img src="Firmenanschluss.png" alt="Firmenanschlussbild"><br><br>
Häfen:<br><img src="Hafen.png" alt="Hafenbild"><br><br>
Wer weiß mehr?:<br><img src="Fragezeichen.png" alt="Fragezeichenbild"><br></h3>
<div id="mapdiv"></div>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="searchbox.js"></script>
<script type="text/javascript" src="nominatim_translation_de.js"></script>
<script type="text/javascript">
var map;
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
window.onload = function ()
map.addControl (new OpenLayers.Control.SearchBox({
resultMinZoom: 16
}));
var pois = new OpenLayers.Layer.Text( "My Points",
{ location:"./DeutschlandContainerterminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points1",
{ location:"./DeutschlandFirmenanschluss.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points2",
{ location:"./DeutschlandHafen.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points3",
{ location:"./DeutschlandLadestellen.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points4",
{ location:"./DeutschlandTerminal.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points5",
{ location:"./ItalienTerminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points6",
{ location:"./PolenContainerterminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
var pois = new OpenLayers.Layer.Text( "My Points7",
{ location:"./SchweizTerminals.txt",
projection: map.displayProjection
});
map.addLayer(pois);
//Set start centrepoint and zoom
var lonLat = new OpenLayers.LonLat( 9.755859375, 50.958426723359935 )
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var zoom=5;
map.setCenter (lonLat, zoom);
</script>
</body>
</html>
Ich habe einmal dieses eingefügt (in die HTML-Datei):
<script type="text/javascript" src="searchbox.js"></script>
<script type="text/javascript" src="nominatim_translation_de.js"></script>
und
var map;
sowie
window.onload = function ()
map.addControl (new OpenLayers.Control.SearchBox({
resultMinZoom: 16
}));
Danach noch die beiden Dateien auch auf den Server kopiert (searchbox.js und nominatim_translation_de.js).
In der CSS-Datei habe ich nur dieses noch eingefügt:
.olControlSearchBox {
left: 50px;
top: 5px;
}
.olControlSearchBox div.busy {
background: url(ajax-loader.gif);
height: 55px;
width: 54px;
}
.olControlSearchBox div.failure {
background: red;
color: black;
font-weight: bold;
}
.olControlSearchBox div.success {
background: white;
}
.olControlSearchBox div.success.empty {
color: gray;
font-style: italic;
}
.olControlSearchBox div.success div.entry:hover {
background: blue;
color: white;
cursor: pointer;
}
Danach war es perfekt - es funktioniert.
Eine Frage fällt mir ein, warum wird den darauf verlinkt: url(ajax-loader.gif)?
Oder kann man das was in den Klammern steht weg machen, ohne Gedanken?
Gruß
Thal
.
Nahmd,
Bitte hole beide noch einmal ab, die sind etwas überarbeitet und aufgeräumt.
Mit “background: url(graphic.gif)” kann man ein Element mit einer Hintergrundgraphik versehen. An dieser Stelle zeige ich das “Nachlade-Symbol”, während ich auf die Antwort des Servers warte.
Ohne den Inhalt der Klammer wäre die Zeile ungültig. Wenn Du keine Suchstatusanzeige wünschst, kannst Du aber natürlich die gesamte Regel tilgen.
Ich verwende gerne diese Konstruktion, im Skript einem Element nur eine Klasse zuzuweisen, und den Rest per CSS zu erledigen. So kannst Du das Aussehen frei bestimmen, ohne im Script herumpatchen zu müssen.
Gruß Wolf