SlippyMap Generator

drawmap steht in der vom SlippMap-Generator erzeugten HTML-Datei map.html im Head. Dort steht:

 var map;

var showPopupOnHover = false;
text = new Array("Informationen zur Karte anzeigen","Informationen zur Karte verstecken");

function drawmap() {
    OpenLayers.Lang.setCode('de');
    
    map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        ...
    });

Ich habe den ganzen js-Teil ausgegliedert und drawmap im zentralen Script mit den Variablen Lon Lat Zoom versehen, also so:

function drawmap(lon,lat,zoom) {

(das musste ich jetzt auch erstmal wieder nachvollziehen) und die Variablenwerte stehen dann im onload bzw. onclick auf der HTML-Seite. Aber wie gesagt, das funktioniert ja auch, nur nicht richtig… :confused:

Es funzt!
Ich habe in der Drawmap-Funktion, bevor die neue Karte gezeichnet wird, die alte (alt) gelöscht. Das sieht so aus:

var map;
var showPopupOnHover = true;
var alt;

function drawmap(lon,lat,zoom) {
	alt = document.getElementById("map");
	alt.innerHTML = '';
	
    OpenLayers.Lang.setCode('de');
    
    map = new OpenLayers.Map('map', {

Jubel! :D:D:D:D

:sunglasses:

Hallo,

das erstellen und herunterladen als zip geht bei mir noch. Wenn ich dann die map.zip entpacke, kommt im entpackten Verzeichnis die openlayers.zip und die verursacht das Problem, die dürfte nicht extra nochmal gezipt werden.

Workaround: die openlayers.zip an ihrer Stelle entpacken, damit dort ein Unterverzeichnis openlayers erscheint. Zur Info. In dem openlayers-Verzeichnis müssten dann die Subverzeichnisse img und theme zu finden sein sowie eine OpenLayers.js

Nachdem die openlayers.zip entpackt wurde, geht die Karte bei mir wieder lokal.

viele Grüße Dietmar

Hallo,

ich habe einmal die Karte aus dem OSM-SlippyMap-Generator erfolgreich in meine Test-Homepage integriert.
Auch den kleinen Fehler der richtigen Position habe ich, dank dieser Hilfe-Seite hinbekommen, bzw. ausradiert.

Was mir aber bei der Verkleinerung des Browser-Fensters auffiel, ist das, das am rechten Browserfenster nicht mehr eine Leiste automatisch eingeblendet wird, um nach unten oder oben zu scrollen - bei den anderen Unterseiten wird dies noch gemacht.
Die CSS-Datei habe ich mal durchgeschaut, aber ich habe dort nichts gefunden.
Wer weiß eine Lösung?

CSS-Datei:

h1 {
   text-align: center;
  }
h3 {
   text-align: center;
  }
nav ul
   {
   list-style: none;
   text-decoration: none;
   text-align: center;
  }
li
   {
   display: inline-block;
   box-shadow: 5px 7px 9px grey;
   border-radius: 20px;
   background: #CBC6C6;
   color: #000000;
   margin-left: 2px;
   margin-bottom: 2px;
   }
nav a
   {
   display: block;
   border-radius: 20px;
   background: #CBC6C6;
   padding: 10px;
   color: #000000;
   }
nav a:hover
   {
   background: #1E3FC3;
   }
@charset "utf-8";

html,body {
  background-color: #FFF;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
  overflow: hidden;
  color: #000;
}
 
a {
  color: #0000FF;
  text-decoration: none;
}
 
a:hover {
  color: #000011;
  text-decoration: underline;
}
 
#map {
  height: 70%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 1em;
  color: #000;
}
.olFramedCloudPopupContent {
	font-size: 0.8em;
	font-family: Verdana, sans-serif;
}
#descriptionToggle {
	position: absolute;
  	font-size: 1em;
	z-index: 10000;
	left: 80px;
	height: 14px;
	border-left: 1px solid #000040;
	border-bottom: 1px solid #000040;
	border-right: 1px solid #000040;
	padding: 2px 10px;
	margin-right: 200px;
	background-color: #EEE;
	font-size: 12px;
	cursor: default;
	opacity: 0.7;
} 
#descriptionToggle:hover {
	background-color: #FFF;
	opacity: 1;
}
#description {
	position: absolute;
	z-index: 10000;
	left: 80px;
	top: 18px;
	border: 1px solid #000040;
	padding: 10px 10px;
	margin-right: 200px;
	background-color: #FFF;
	font-size: 12px;
}
 
#attribution {
	bottom: 0;
	left: 0;
	padding: 5px 8px 1px 8px;
	position: absolute;
	font-size: 11px;
	font-style: italic;
	z-index: 1000;
}

#layer {
	position: absolute;
	top: 60px;
	right: 10px;	
	z-index: 10002;
}

#layer > div {
	border: 1px solid #000;
	background-color: #FFF;
	padding: 4px 5px;
	font-size: 0.7em;
	cursor: default;
	margin-bottom: 4px;

}
#layer div:hover {
}
#layer .active {
	background-color: #EEF;
}

.hide { display: none; }

Viele Grüße

Thal

Moin,

jetzt bei dem nochmaligen durchsichten kam mir etwas noch in den Sinn!
overflow: hidden; einfach in overflow: auto; umwechseln.
Siehe da es klappte, jetzt habe ich bei der Verkleinerung des Browserfensters eine Scrollleiste nach oben und nach unten.
Aber da tauchte ein neues Problem auf:
Wie kann ,Informationen zur Karte anzeigen" dieses kleinere Ding fest an der Karte gebunden werden?
Bei der Verkleinerung der Karte und das scrollen nach oben oder nach unten geht es natürlich mit auf der festen Stelle, erst bei dem anklicken wird die Position korrigiert.

Der verbesserte CSS-Code (overflow: auto):

h1 {
   text-align: center;
  }
h3 {
   text-align: center;
  }
nav ul
   {
   list-style: none;
   text-decoration: none;
   text-align: center;
  }
li
   {
   display: inline-block;
   box-shadow: 5px 7px 9px grey;
   border-radius: 20px;
   background: #CBC6C6;
   color: #000000;
   margin-left: 2px;
   margin-bottom: 2px;
   }
nav a
   {
   display: block;
   border-radius: 20px;
   background: #CBC6C6;
   padding: 10px;
   color: #000000;
   }
nav a:hover
   {
   background: #1E3FC3;
   }
@charset "utf-8";

html,body {
  background-color: #FFF;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
  overflow: auto;
  color: #000;
}
 
a {
  color: #0000FF;
  text-decoration: none;
}
 
a:hover {
  color: #000011;
  text-decoration: underline;
}
 
#map {
  height: 70%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 1em;
  color: #000;
}
.olFramedCloudPopupContent {
	font-size: 0.8em;
	font-family: Verdana, sans-serif;
}
#descriptionToggle {
	position: absolute;
  	font-size: 1em;
	z-index: 10000;
	left: 80px;
	height: 14px;
	border-left: 1px solid #000040;
	border-bottom: 1px solid #000040;
	border-right: 1px solid #000040;
	padding: 2px 10px;
	margin-right: 200px;
	background-color: #EEE;
	font-size: 12px;
	cursor: default;
	opacity: 0.7;
} 
#descriptionToggle:hover {
	background-color: #FFF;
	opacity: 1;
}
#description {
	position: absolute;
	z-index: 10000;
	left: 80px;
	top: 18px;
	border: 1px solid #000040;
	padding: 10px 10px;
	margin-right: 200px;
	background-color: #FFF;
	font-size: 12px;
}
 
#attribution {
	bottom: 0;
	left: 0;
	padding: 5px 8px 1px 8px;
	position: absolute;
	font-size: 11px;
	font-style: italic;
	z-index: 1000;
}

#layer {
	position: absolute;
	top: 60px;
	right: 10px;	
	z-index: 10002;
}

#layer > div {
	border: 1px solid #000;
	background-color: #FFF;
	padding: 4px 5px;
	font-size: 0.7em;
	cursor: default;
	margin-bottom: 4px;

}
#layer div:hover {
}
#layer .active {
	background-color: #EEF;
}

.hide { display: none; }

Viele Grüße

Thal

Hast Du mal nen Link auf Dein Problem?

Moin Moin MKnight,
natürlich habe ich einen Link auf das Problem.
Aber es gibt natürlich mehr Probleme als nur das obige beschriebene.

http://www.schienenpost.de/

  1. Bei der Verkleinerung des Browserfensters wird die Anzeige: ,Informationen zur Karte anzeigen" auch verkleinert, aber nach einem scrollen bleibt es nicht auf der Position.

  2. Wie kann man die blaue Linie fest mit dem Marker verbinden?
    (Momentan sind diese beiden getrennt voneinander).

  3. Wie kann man Overlays mehr einbinden?
    (Rechts beim plus drauf klicken)

  4. Wie können die Marker und Linien in eine seperate Datei ausgelagert werden?
    (Im Moment sind die Geokoordinaten und die ,Beschreibung" innerhalb des Codes mit drin)

Was fehlt noch danach?
Danach fehlt noch eine weitere Karte (über Login zwecks einzeichnen und der Auswahl der Linien/ Punkte/ Beschriftung), aber dies würde ja ein zweiter Schritt sein…

Viele Grüße

Thal

Zu 1:

Meiner Meinung nach ist das ein Browserproblem, kann man aber umgehen.

Problem ist, dass das toggle-dingsi semantisch nicht innerhalb der map ist UND nicht weiss, wo oben ist (ich frage mich, warum das überhaupt an der Stelle ist, mag das aber grad nicht rausfinden)

Beheben kann man das mit einem schmutzigen Hack: das toggle-dingsi UND die map top an eine feste Oberkante festnageln, also:


#descriptionToggle, #map {top: 200px}

Moin Moin,

dein kleiner Beitrag war hilfreich gewesen.
Ich hatte gleich dann mehrere Kleinigkeiten geändert gehabt, sodaß es doch perfekter aussieht.

Der alte CSS-Code:

h1 {
   text-align: center;
  }
h3 {
   text-align: center;
  }
nav ul
   {
   list-style: none;
   text-decoration: none;
   text-align: center;
  }
li
   {
   display: inline-block;
   box-shadow: 5px 7px 9px grey;
   border-radius: 20px;
   background: #CBC6C6;
   color: #000000;
   margin-left: 2px;
   margin-bottom: 2px;
   }
nav a
   {
   display: block;
   border-radius: 20px;
   background: #CBC6C6;
   padding: 10px;
   color: #000000;
   }
nav a:hover
   {
   background: #1E3FC3;
   }
@charset "utf-8";

html,body {
  background-color: #FFF;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
  overflow: auto;
  color: #000;
}
 
a {
  color: #0000FF;
  text-decoration: none;
}
 
a:hover {
  color: #000011;
  text-decoration: underline;
}
 
#map {
  height: 70%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 1em;
  color: #000;
}
.olFramedCloudPopupContent {
	font-size: 0.8em;
	font-family: Verdana, sans-serif;
}
#descriptionToggle {
	position: absolute;
  	font-size: 1em;
	z-index: 10000;
	left: 80px;
	height: 14px;
	border-left: 1px solid #000040;
	border-bottom: 1px solid #000040;
	border-right: 1px solid #000040;
	padding: 2px 10px;
	margin-right: 200px;
	background-color: #EEE;
	font-size: 12px;
	cursor: default;
	opacity: 0.7;
} 
#descriptionToggle:hover {
	background-color: #FFF;
	opacity: 1;
}
#description {
	position: absolute;
	z-index: 10000;
	left: 80px;
	top: 18px;
	border: 1px solid #000040;
	padding: 10px 10px;
	margin-right: 200px;
	background-color: #FFF;
	font-size: 12px;
}
 
#attribution {
	bottom: 0;
	left: 0;
	padding: 5px 8px 1px 8px;
	position: absolute;
	font-size: 11px;
	font-style: italic;
	z-index: 1000;
}

#layer {
	position: absolute;
	top: 60px;
	right: 10px;	
	z-index: 10002;
}

#layer > div {
	border: 1px solid #000;
	background-color: #FFF;
	padding: 4px 5px;
	font-size: 0.7em;
	cursor: default;
	margin-bottom: 4px;

}
#layer div:hover {
}
#layer .active {
	background-color: #EEF;
}

.hide { display: none; }

Und gegenüber dem neuen CSS-Code:

h1 {
   text-align: center;
  }
nav ul
   {
   list-style: none;
   text-decoration: none;
   text-align: center;
  }
li
   {
   display: inline-block;
   box-shadow: 5px 7px 9px grey;
   border-radius: 20px;
   background: #CBC6C6;
   color: #000000;
   margin-left: 2px;
   margin-bottom: 2px;
   }
nav a
   {
   display: block;
   border-radius: 20px;
   background: #CBC6C6;
   padding: 10px;
   color: #000000;
   }
nav a:hover
   {
   background: #1E3FC3;
   }
@charset "utf-8";

html,body {
  background-color: #FFF;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
  overflow: auto;
  color: #000;
}
 
a {
  color: #0000FF;
  text-decoration: none;
}
 
a:hover {
  color: #000011;
  text-decoration: underline;
}

#descriptionToggle, #map
  {margin-top: auto}
 
#map {
  height: 90%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 1em;
  color: #000;
}
.olFramedCloudPopupContent {
	font-size: 0.8em;
	font-family: Verdana, sans-serif;
}
#descriptionToggle {
        text-align: center;
  	font-size: 1em;
	z-index: 10000;
	left: 80px;
	height: 14px;
	border-left: 1px solid #000040;
	border-bottom: 1px solid #000040;
	border-right: 1px solid #000040;
	padding: 2px 10px;
	margin-right: auto;
	background-color: #EEE;
	font-size: 12px;
	cursor: default;
	opacity: 0.7;
} 
#descriptionToggle:hover {
	background-color: #FFF;
	opacity: 1;
}
#description {
        text-align: center;
	z-index: 10000;
	left: 80px;
	top: 18px;
	border: 1px solid #000040;
	padding: 10px 10px;
	margin-right: auto;
	background-color: #FFF;
	font-size: 12px;
}
 
#attribution {
	bottom: 0;
	left: 0;
	padding: 5px 8px 1px 8px;
	position: absolute;
	font-size: 11px;
	font-style: italic;
	z-index: 1000;
}

#layer {
	position: absolute;
	top: 60px;
	right: 10px;	
	z-index: 10002;
}

#layer > div {
	border: 1px solid #000;
	background-color: #FFF;
	padding: 4px 5px;
	font-size: 0.7em;
	cursor: default;
	margin-bottom: 4px;

}
#layer div:hover {
}
#layer .active {
	background-color: #EEF;
}

.hide { display: none; }

Vielen dank für diese kleine Hilfe,
nächster Schritt wäre Punkt 3/ 4 wohl…
…und zum Schluß Punkt 2.

Viele Grüße

Thal

Moin Moin,

im index.html habe ich diesen kleinen ,Schnippsel" gesehen gehabt:

var showPopupOnHover = false;

Also hatte ich diesen einmal auch auf ,True" gesetzt:

var showPopupOnHover = true;

Das kleine Fensterchen ist aber bei dem starten der Internetseite vorhanden, erst wenn man das rote Kreuzchen klickt und danach mit der Maus herüber geht, erscheint es dann nur, wenn die Maus rüber geht…
Wie kann es aber geändert werden, um gleich die Maus rüber zu fliegen lassen, anstatt erst auf das Kreuz zu klicken?

Viele Grüße

Thal

Nach meinem Verständnis (in der util.js “dokumentiert”) sollte das (wenn ich Dich richtig verstehe)

var showPopupOnLoad = false;

Tuts aber nicht. Keine Ahnung.

util.js gehackt (dont try this at home! ;)) nach:

    if (showPopupOnLoad = true) {

Läuft, irrsinnigerweise.

So wie ich den Code ohne Plan von JS verstehe:

if (showPopupOnLoad != true) {
	    // Wenn das Popup nicht angezeigt werden soll, verstecken und auf 'nicht angeklickt' setzen
	    feature.popup.hide();
	    feature.popup.clicked = false;
    } else {
	    // Das Popup wird direkt angezeigt und zwar solange bis man es explizit schließt
	    feature.popup.clicked = true;
    }

    return marker;
}

sollte der Code eigentlich genau das machen, was dort in den Kommentaren steht. Tut er aber nicht.

Mir scheint, dass util.js die index.html ignoriert und anders rum.

Man berichtige mich bitte.

Meh. Das false wird überschrieben in Zeile 84:

// Marker hinzufügen
addMarker(layer_markers,9.9345245360902,53.369362976504,"<b>TestMarkerLinie</b><p />Dies ist ein Test für den Marker.",true,4);

^^

Ohne den Rest angeschaut zu haben:

Damit wird showPopupOnLoad bedingungslos (!) auf true gesetzt, was wohl nicht beabsichtigt sein dürfte. Der Vergleich auf true sieht so aus (ja, 3x “=”):

    if (showPopupOnLoad === true) {

Das hab ich mir bereits erklären lassen, das Problem war ja ein anderes, siehe meine Korrektur.

Moin Moin,

ich habe es mal ausprobiert, dabei brauchte ich nur folgendes zu machen:

Alt:

// Marker hinzufügen
addMarker(layer_markers,9.9345245360902,53.369362976504,"<b>TestMarkerLinie</b><p />Dies ist ein Test für den Marker.",true,4);

Neu:

// Marker hinzufügen
addMarker(layer_markers,9.9345245360902,53.369362976504,"<b>TestMarkerLinie</b><p />Dies ist ein Test für den Marker.",false,4);

Und es klappte wunderbar.
Vielen dank dafür.

Kann der Marker auch in der Mitte der blauen Linie automatisch angebunden werden (bzw. beim überfliegen mit der Maus wird das Popup-Fensterchen angezeigt)?

Viele Grüße

Thal

Hallo allerseits,

das ist ein ganz fantastisches Tool! Habe mir gerade eine Karte vorbereitet, in die ich nun nach und nach alle Orte aus einem Tagebuch eintragen werde. (Das mache ich von Hand direkt in der HTML.)

Dazu hätte noch folgende Frage:

Wie oder wo kann ich die Basiskarte ändern, um eine Reliefkarte/3D/hill shading zu erhalten?

Gruß
Winfried

Das Tool arbeitet noch mit OpenLayers Version 2.9.1 – die ist ziemlich veraltet, OpenLayers wurde inzwischen komplett neu geschrieben.

Alternativen:
https://leafletjs.com/ - siehe Tutorials für Vorlagen
http://umap.openstreetmap.fr/ - Karte einfach Online erstellen, auch zum Einbinden

Danke. Ikonor!

Nun ist die Basiskarte auch noch französisch… Mal sehen, ob ich das hinkriege.

Winfried

Tja… Umap funktioniert schon mal nicht. Im Notebook-Browser sehe ich keine Einstellungen, ich weiß aber vom Smartphone-Browser her, dass sie da sind. Schade.