SlippyMap Generator

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.

Und für Leaflets muss ich erst Englisch verstehen und dann etwas in “mein Dokument” einfügen. In welches? Muss ich eine neue Webseite anlegen? Ich glaube, das ist nur was für Eingeweihte.

Mal ins Blaue geraten: In das, in dem die slippy map dann erscheinen soll? An der entsprechenden Stelle?

–ks

Umap muss man in MS Edge bearbeiten, im IE geht es nicht. Das stand da nicht… Habe damit nun erfolgreich gearbeitet, auch die Basiskarte kann man bequem auswählen, der Nutzer übrigens auch, er kann sie ändern. Mit der Importfunktion konnte ich meine Googlemaps-Orte problemlos importieren. Na ja, abgesehen davon, dass Google beim Export der Orte mit Labels die Längen- und Breitenangaben vertauscht… es waren zum Glück nicht viele.

Also Umap ist empfehlenswert.

Schönen Sonntag!

Hallo zusammen,
auch wenn das Tool schon ein paar Tage alt ist, es bietet alles was ich brauche, bis auf eine Funktion, die ich noch nicht herausfinden konnte.

Ist es möglich im Beschreibungstext eines POI auch Bilder einzubinden ?

in diese Zeile

addMarker(layer_markers,17.6833333333333,51.2166666666667,"<b>Reesewitz, Kreis Oels</b><p />",false,10); 

einfach diesen einfügen

<img src="" alt="" border="0" width="" height="">  

funktioniert nicht.

Grüsse
Jörg

… und wie sieht die Zeile dann aus?

Das ist ja meine Frage… ich komme nicht weiter

Da beißen sich vermutlich die Anführungszeichen im img Tag mit denen, die den Popup-Text umschließen. Einfachste Lösung ist, einfache Anführungszeichen für den Text zu verwenden:


addMarker(layer_markers,17.6833333333333,51.2166666666667,'<b>Reesewitz, Kreis Oels</b><p />',false,10); 

Wenn Du schreibst:

musst Du Doch etwas versucht haben. Wie sieht denn dein Versuch aus?