openlayers und textdatei

Hallo,

bin anfängerin in openlayers und in javascript. :confused: Ich möchte eine karte in meiner webseite einbinden, die mehrere marker hat und würde den markerlayer gerne als txt-datei einbinden, also als Textlayer mit Markern.
Ich habe mir für mein vorhaben eine schon eine gute kartenvorlage besorgt, kriege aber nun gerade die textdatei nicht in meine bestehende Karte eingebunden.
ich habe im Openlayers handbuch versucht die schritte nachzuvollziehen, aber die marker aus der txt datei werden nicht angezeigt. für den textlayer soll man ja die init () Funktion anwenden, steht diese nun im Konflikt zu der drawmap() funktion.

Anbei die von mir genutzte Seite, ohne den Textlayer. An welcher Stelle muss ich den Textlayer denn einbinden?


<!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>EcoGuia Adressen</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="EcoGuia" />
<link rel="stylesheet" type="text/css" href="map.css"></link>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_map.css"></link>
<![endif]-->
<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="tom.js"></script>
 
<script type="text/javascript">
//<![CDATA[

var map;
var layer_mapnik;
var layer_tah;
var layer_markers;

function drawmap() {
    // Popup und Popuptext mit evtl. Grafik
    var popuptext="<font color=\"black\"><b>Ecoguia<br>Stra&szlig;e 123<br>Berlin</b><p><img src=\"test.jpg\" width=\"180\" height=\"113\"></p></font>";

    OpenLayers.Lang.setCode('de');
    
    // Position und Zoomstufe der Karte
    var lon = -0.4906855;
    var lat = 38.3459963;
    var zoom = 9;



    map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.PanZoomBar()],
        maxExtent:
            new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                    20037508.34, 20037508.34),
        numZoomLevels: 18,
        maxResolution: 156543,
        units: 'meters'
    });

    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), 
    	                                          visibility: true, displayInLayerSwitcher: false });

    map.addLayers([layer_mapnik, layer_markers]);
    jumpTo(lon, lat, zoom);
 
    // Position des Markers
    addMarker(layer_markers, -0.4906855, 38.346667, popuptext);

}

//]]>
    </script>

  </head>
  <body onload="drawmap();">

  <div id="header">
   <div id="content">Karte Bioläden in Alicante</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>
  <div id="map">
  </div>
  
</body>
</html>

Mir ist nicht ganz klar, was die von dir angesprochene init() Funktion tun soll, die in dem Quelltext in deinem Post nicht vorkommt, und warum sie in “Konflikt” zur drawmap() Funktion steht - was auch immer das für ein Konflikt sein soll. drawmap() macht ja nichts anderes, als die Karte in das dafür vorgesehene Feld einzubinden, und genau dort muss ja auch der Text-Layer hin.

Ich würde einfach von diesem Beispiel starten, das relativ simpel ist, und dann das Beispiel ausbauen:
http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Ja, vielen Dank. Das hat jetzt geklappt. :slight_smile:

Die Marker sind nun auf der karte sichtbar. Leider sind die popups ohne Text!
in der textdatei habe ich aber durchaus title und description angegeben!
Kann mir da jemand nochmal einen hinweis geben? :smiley:

Vielen Dank


<!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>EcoGuia Adressen</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="EcoGuia" />
<link rel="stylesheet" type="text/css" href="map.css"></link>


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_map.css"></link>
<![endif]-->
<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="tom.js"></script>
 
<script type="text/javascript">
//<![CDATA[

var map;
var layer_mapnik;
var layer_tah;
var layer_markers;

function drawmap() {
    // Popup und Popuptext mit evtl. Grafik
    var popuptext="<font color=\"black\"><b>Ecoguia<br>Stra&szlig;e 123<br>Berlin</b><p><img src=\"test.jpg\" width=\"180\" height=\"113\"></p></font>";

    OpenLayers.Lang.setCode('de');
    
    // Position und Zoomstufe der Karte
    var lon = -0.4906855;
    var lat = 38.3459963;
    var zoom = 9;



    map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.PanZoomBar()],
        maxExtent:
            new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                    20037508.34, 20037508.34),
        numZoomLevels: 18,
        maxResolution: 156543,
        units: 'meters'    });

    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), 
    	                                          visibility: true, displayInLayerSwitcher: false });

    map.addLayers([layer_mapnik, layer_markers]);
    jumpTo(lon, lat, zoom);
 //textlayer einsetzen
 var pois = new OpenLayers.Layer.Text( "Bioläden",
                    { location:"./textdatei.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
	
    // Position des Markers
    addMarker(layer_markers, -0.4906855, 38.346667, popuptext);}

    </script>

  </head>
  <body onload="drawmap();">

  <div id="header">
   <div id="content">Karte Bioläden in Alicante</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>
  <div id="map">
  </div>
  
</body>
</html>

Wie sieht denn die Textdatei aus? Das Format wird hier beschrieben:

http://dev.openlayers.org/releases/OpenLayers-2.6/doc/apidocs/files/OpenLayers/Layer/Text-js.html

Wichtig ist vor allem auch die erste Zeile, in der die Bedeutung der einzelnen Spalten festgelegt wird.

Ich habe die Datei so aufgebaut, wie in der API documentation beschrieben…
Mit tabs und Absatzzeichen am Ende…

lat lon title description iconURL
38.272689 -0.631714 punkt1 beschreibung1 http://example.com/icon.png
38.299637 -0.553436 punkt2 beschreibung2 http://example.com/icon.png

Hast Du ein “Tab” zw. den Spalten?
Probier mal ein eigenes Ikon aus. Wenn im Textfile kein Ikon erkannt wird, erscheint das Standard Ikon.

ja, ich habe ein tab zwischen den spalten.
der marker ist auch auf der karte zu sehen, der popup öffnet sich auch, aber kein text erscheint. hmm.

In obigem Beispiel gibt es keine tabs sondern Blanks.
Probier es mal hiermit:
http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example
das hat bei mir immer funktioniert.

Danke nochmal für den hinweis, aber es funktioniert immer noch nicht


lat	lon	title	description	iconURL
38.272689	-0.631714	punkt1	beschreibung1	http://example.com/icon.png
38.299637	-0.553436	punkt2	beschreibung2	http://example.com/icon.png


Also, ich habe die tabs gesetzt, ebenso das absatzzeichen.
wie gesagt er zeigt ja den marker und den popup an, nur den text nicht.
Vielleicht muss ich da noch schriftfarbe/grösse woanders definieren. Oder vielleicht hat es mit der h2 zu tun.
werde malweiter probieren…

Funktionieren die Textpopups denn mit dem exakten Beispielcode aus dem Wiki? Wenn du den Beispielcode Schritt für Schritt zu deiner Version um- bzw. ausbaust, bei welchen Schritt hört es auf zu funktionieren?

In diesem Beispiel
http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example
gibt es noch zwei weitere Parameter in einer Zeile, vielleicht liegt es daran.

Probiers doch wirklich erst mal mit Copy und Paste!

Tach.

Wenn Du uns einen Link auf die Seite verraten würdest, wäre das Problem sehr wahrscheinlich in Sekunden gefixt.

Wenn Deine Seite weiße Schrift verwendet, ist die auch im Popup weiß. Versuche einmal mit der Maus den Popup-Inhalt zu markieren (oben links Maustaste drücken, gedrückt halten, nach unten rechts ziehen). Wenn dabei der Text auftaucht, musst Du eine Style-Angabe für das Popup hinzufügen:


.olFramedCloudPopupContent { color: black; }

Im obigen Datenbeispiel sehe ich kein “

”. Bei der Fehlersuche kommt es auf jedes Detail an. Du solltest hier echte Zeilen der POI-Datei zeigen. Genauer: reduziere Deine POI-Datei auf zwei Einträge, benutze die reduzierte Datei zum Test und zeige uns exakt die Datei, die Du auch zum Test verwendest.

Orange Grüße
Der Assistent

Tach.

Relevente Felder sind:

“lon” und “lat” (oder zusammen als “point”): ohne die erst gar kein Marker.
“title” und “description”: nur wenn beide Felder existieren und beide nicht leer sind, wird das Popup erzeugt. Und wenn das Popup erzeugt wird, werden da auch title und description eingetragen.

Da das Popup erscheint, muss da auch der Text drin stehen.

Damit bleiben zwei Möglichkeiten:

  1. der Text ist durch CSS-Styling unsichtbar.
  2. durch defektes HTML befindet sich der Text innerhalb von Tags: “<h1 Hier steht der Text”

Das zu unterscheiden wäre mit firebug ein Mausklick, so die Seite irgendwo abrufbar wäre.

Orange Grüße
Der Assistent

Die Schrift im popup war da, jedoch weiß!
Ich versuche jetzt mal die Style-Angabe für das Popup richtig hinzuzufügen!

VIELEN DANK. :smiley:

Hallo, melde mich nochmal, da ich es nicht schaffe, dass Problem alleine zu beheben,
die Seite ist nun online und ich schaffe es aber nicht den Quelltext soweit anzupassen, dass die Schrift im Popup schwarz wird.
an welcher stelle muss ich die Angabe:

  .olFramedCloudPopupContent { color: black; }  

denn einfügen???

Karte liegt unter http://www.solarmai.net/Karte%20Ecoguia/XHTML-Code.html

lg und dank

Nicht so wie von dir angegeben, sondern einfach eine Zeile tiefer das “color: black;” hinzufügen (also die Zeile: .olPopupContent { font-size: smaller; } um diesen Eintrag erweitern.

Wenn du Firefox am Start hast und dann eventuell auch noch Firebug dann kannst du dir diese Elemente sehr schön anschauen (im Inspector) - dort siehst du dann auch von wo ein Element seine Eigenschaften bezieht.

Nachdem ja die Umsetzung des schwarzen Textes mittlerweile erfolgreich realisiert wurde :slight_smile: noch ein kleiner Tipp zur Strukturierung deiner Daten:
Da du deine Styles (Formate für Texte) in der map.css abgelegt hast, würde ich dir aus persönlicher Erfahrung nur empfehlen, dass du die Formatierung für deine Pop-Ups in diese Datei mitaufnimmst, da du dann deine Textformate sauber zusammengefasst hast und sollte sich einmal eine Textformatierung ändern musst du diese nur in der map.css durchführen und nicht einmal in die “XHTML-Code.html” einsteigen und was ändern und in die “map.css”- das macht für dich das Arbeiten später wesentlich leichter.

Ich habe ein anderes Problem zu diesem Thema.
Meine Seite planetenwege.u-dreher.de/pl_wege_de.html funktioniert einwandfrei unter Windows FF.
Was muß ich ändern, damit sie auch unter Android 7 FF läuft?

Gruß
Udo

Hallo, ich hätte ein paar Fragen zu der o.g Problematik.

  1. Können die Dateien in einem selben Ordner sein (index.html, textfile.txt, und die Icons),
    wenn ja, wie muss die Pfadangabe den sein? Etwa so: " location: textfile.txt“?
    Mein Problem ist, dass die Textdatei nicht gefunden wird.
  2. Muss das Ganze auf dem Server stattfinden, zum Funktionieren, oder kann ich auf dem Desktop und in einen Ordner legen?

Mein Code sieht so aus, wie aus dem o.g. Beispiel aus:


<html>
<head><title>GMA</title></head>
<body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
	//Karte laden
	map = new OpenLayers.Map("mapdiv");
	map.addLayer(new OpenLayers.Layer.OSM()); 
	new OpenLayers.Control.MousePosition()	
	
	//textlayer einsetzen
	var pois = new OpenLayers.Layer.Text( "GMA",
		{	location: "textfile.txt",
			projection: map.displayProjection
		});
		map.addLayer(pois);
		
	// Menü rechts erzeugen.
	var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
		map.addControl(layer_switcher);

	//Karte zentrieren und skalieren 
	var lonLat = new OpenLayers.LonLat( 9.1, 51.1 )
		.transform(
		new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
		map.getProjectionObject() // to Spherical Mercator Projection
		);
		
	var zoom=6;
		map.setCenter (lonLat, zoom);  
	
	  </script>
  
</body>
</html>

Ich bin für jede Hilfe dankbar! :slight_smile:

Gruß Igi

Hallo @Igi und willkommen im alten Forum, das sich auf dem Abstellgleis befindet.

Mit Deiner Angabe

 location: "textfile.txt"

muss sich die Textdatei im gleichen Ordner befinden, wie Deine index.html.
Wenn sich die Icons ebenfalls im gleichen Ordner befinden, so muss die Pfadangabe in textfile.txt passen, d.h. die Form ./Dein_Icon.typ haben.

Bitte beachte, dass die OpenLayers-Version, die Du extern lädst, uralt ist, es ist die Version 2.13.1 und der Hinweis von Nakaner in https://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example ist eindeutig: solltest Du nicht mehr benutzen.

Zu 2.
Ein schnelles Experiment bestätigt, was ich bei Stackoverflow https://stackoverflow.com/questions/13932997/creating-openlayers-text dazu gefunden habe:

Ohne Webserver (kann auch ein lokaler sein, z.B. XAMPP oder so) geht es nicht.