SlippyMap Generator

Hi
erstmal großes Lob für diese Arbeit.

Ich hätte aber noch einen Verbesserungsvorschlag… wäre es vllt möglich, dass man wie bei Wikipedia die Grenzen eintragen lassen könnte?

mfg Christian

Top-script, danke!

Ich möchte aber gern die aktuelle openlayers-version verwenden:

Ich habe das mal testweise umgestellt/ ersetzt, und das läuft. Leider werden mir jetzt keine GPX mehr angezeigt.
Hier mein Quellcode fürs GPX:
alt:

				map.addLayer(
					new OpenLayers.Layer.GML("Track 1","track.gpx",
						{format: OpenLayers.Format.GPX,
						 styleMap: new OpenLayers.StyleMap(
							{strokeColor: "#FF0000", strokeWidth: 3, strokeOpacity: 0.8}
						 ),
						 projection: new OpenLayers.Projection("EPSG:4326") 
                                ...

neu:

				...
					new OpenLayers.Layer.Vector("Track 1","track.gpx",
                                ...

Die Fehlerkonsole vom Browser spuckt mir leider nichts aus dazu.
Muss ich noch was anderes ersetzen?

Hallo Leute,

ich möchte die Karte in ein Iframe packen, ich denke das, daß kein Problem ist.
Dann würde ich gern die Cursor-Koordinaten auf Mausklick übernehmen am Besten in PHP $_POST[“VARIABLE”] im Hauptframe(fenster)
Vielleicht noch umschalten zwischen Ansicht und Positionierung.

Kann mir jemand helfen ?

ERLEDIGT : Habs gefunden [Hura)
[url]OpenStreetMap

Koordinaten per Mausklick übernehmen funktioniert mit JavaScript. Da hat PHP nichtsmehr mit zu tun. PHP läuft ja klassisch einmal, und zwar auf dem Server. Der weiss nichts von einem Mausklick auf die Karte.

Was willst du mit den Koordinaten danach machen?

Wenn du etwa “erzeuge einen Datenbankeintrag mit den Koordinaten, die der User angeklickt hat” machen willst, musst du noch AJAX dazwischenbauen (also das über dieses XmlHTTPRequest-Objekt machen).

Die OpenLayers-Beispiele sind sehr lehrreich für sowas, auch wenn man immer mal wieder suchen muss, welches genau das zeigt was man grade will.

http://openlayers.org/dev/examples/

Hallo, ist hier noch jemand? (seit über einem Jahr kein Post)

Ich habe mit dem Generator die Maps erzeugt, die Dateien wie ein Wilder editiert und passend in meine HP eingebaut. Alles super, nur eine Kleinigkeit stört mich noch: Die Karte ist von einem Rahmen umgeben, oben/links schwarz und unten/rechts grau. Ich habe alle CSS abgegrast und nirgendwo diesen Rahmen gefunden. Wo steckt das Teil, damit ich es rausschmeißen kann???

Hi,

hast du vielleicht einen Link zu deiner Karte ?

Gruß,

Markus

Hoi Markus, nein tut mir leid, die ist zur zeit nur “local”. Wenn du möchtest (sag ja - oder nö!), schicke ich dir eine abgespeckte Version (sonst ist das zu voluminös) per Mail…

Na dann mach das mal … Achso … “ja”

Hallo zusammen,

erst mal Danke für das tolle tool.
Ich konntem, obwohl nicht sonderlich versiert in der WebProgrammierung, problemlos eine Karte generieren und eigene Marker hinzufügen.
Genau das, was ich gesucht habe.
Da ich zuviele Marker habe, um sie manuell über das tool einzufügen, habe ich testweise nur 2 Marker eingefügt und dann in der maps.html weitere Zeilen hinzugefügt.


addMarker(layer_markers,13.7372621,51.0504088,“A

”,false,4);
addMarker(layer_markers,13.7373,51.1504,“B

”,false,7);

Das funktioniert soweit super und ich bin sehr zufrieden.

Allerdings scheint es hier eine Mengenbegrenzung zu geben. Irgendwo zwischen 500 und 1000 Markern verabschiedet sich die Karte beim Laden mit einem Script-Error

Die Syntax der Marker ist i.O. ich habe sie in 500er Brocken einzeln eingebunden und alles lief problemlos.

Ich vermute eine Art Overflow

Kann man evtl. mehrere MArker-Layer erzeugen und übereinanderlegen?

folgendes habe ich erfolglos versucht:

layer_markers = new OpenLayers.Layer.Markers(“Marker”, { projection: new OpenLayers.Projection(“EPSG:4326”),visibility: true, displayInLayerSwitcher: true });
layer_markers1 = new OpenLayers.Layer.Markers(“Marker”, { projection: new OpenLayers.Projection(“EPSG:4326”),visibility: true, displayInLayerSwitcher: true });

addMarker(layer_markers,13.672621,51.0504088,“A

”,false,4);
addMarker(layer_markers1,13.7373,52.1504,“B

”,false,7);

Vielelicht muss man an anderer Stelle ncoh etwas in den scripten modifizieren.

Hat jemand eine Idee wie man ca. 3000 Marker ( was über ganz Europa verteilt, nicht wirklich viel ist) in eine KArte bekomme?

Ach ja, mir ist wichtig, dass die MArker offline, also nur lokal abgespeichert sind. Daher fand ich die Slippymap so toll.

Besten Dank
Cremofix

Hallo Cremofix,

schau Dir mal http://blog.perrygeo.net/2013/09/30/leaflet-simple-csv/ an. Funktioniert bei mir mit 20.000 Markern.

Grüße
Joachim

Hallo Joachim,

danke schon mal für den Tip. Das scheint in die richtige Richtung zu gehen. Jetzt muss ich noch rausfinden, wie man eine andere Karte mit besserer Auflösung da rein bekommt. Werde mich mal genauer damit auseinandersetzen.
Schönen Gruß

Hallo, ich hatte mir ja vorgenommen, im Winter meine Wanderseite fertig zu machen, aber, kennt man ja, ist nix draus geworden, weil ich statt dessen zwei Bücher übersetzt habe. Nun ja, ich hänge an einem Problem. Von der ursprünglichen SlippyMap ist nicht viel übrig geblieben. Meine Wanderseite besteht aus vielen HTML-Seiten (zu jeder Tour eine) im klassischen table-Layout,. Alle js-Funktionen sind zentral in einer Datei versammelt. Beim Aufruf einer meiner HTML-Seiten rufe ich die Map mit vorgegebenen Koordinaten und Zoomfaktor so auf:

<body onload="drawmap(-7.93,52.65,7);">

und sie erscheint völlig korrekt und so wie sie soll in der Tabelle an der Stelle

<td><div id="map"></div></td>

Nun möchte ich im Text an anderer Stelle der Tabelle Buttons unterbringen, die die Karte mit neuen Koordinaten und neuem Zoom laden:

<input type="button" onclick="drawmap(-10.15,51.612,11)">

Auch das funktioniert, nur erscheint die neue Karte nicht statt der alten, sondern wird zusätzlich darunter dargestellt. Ich als völlig Ahnungsloser in Sachen js habe noch nicht einmal die Ahnung, ob es sich um ein Problem mit den speziellen js-Funktionen von OpenLayer handelt oder die Lösung ganz allgemein in js zu suchen ist. Ich bin, ehrlich gesagt, ziemlich ratlos. Help! :open_mouth:

Woher kommt denn die drawmap-Funktion, bzw. was steht da genau drinnen?

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