Base layer "noname" auf eigener OSM-Karte integrieren? [gelöst!]

Hallo Ihr,

ich möchte den base layer noname auf meiner eigenen OSM-Karte integrieren (bei openstreetmap.org der unterste Layer, den man auswählen kann). Wenn ich nun aber folgendes in den Quelltext meiner HTML-Datei reinschreibe:

new OpenLayers.Layer.OSM.noname(“Karte Variante 2”, { attribution: ‘’, keyname: ‘noname’ }),

Dann wird die OSM-Karte nicht mehr dargestellt.

Wißt Ihr eventuell, wie ich das Problem beheben kann?

Viele Grüße desputin

PS hier geht es:
http://www.christopherstark.de/extern/osm1/kohle.htm
und hier habe ich versucht den noname layer einzufügen und es geht nicht:
http://www.christopherstark.de/extern/osm2/kohle.htm

Die Klasse “OpenLayers.Layer.OSM.noname” ist in der OpenStreetMap.js nicht definiert, deshalb der Fehler “OpenLayers.Layer.OSM.noname is not a constructor” in der Fehlerkonsole.

In der map.js [1] wird der Layer so definiert:


   var nonamekey = nonamekeys[document.domain];
   var noname = new OpenLayers.Layer.OSM(i18n("javascripts.map.base.noname"), [
      "http://a.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png",
      "http://b.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png",
      "http://c.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png"
   ], {
      displayOutsideMaxExtent: true,
      wrapDateLine: true,
      numZoomLevels: 19,
      layerCode: "N"
   });
   map.addLayer(noname);

Zur Verwendung auf Deiner Domain musst/solltest Du aber vermutlich einen eigenen Key bei Cloudmade registrieren.

[1] http://www.openstreetmap.org/javascripts/map.js

Hallo ikonor,

danke für die Antwort. D.h. der Layer noname ist gar nicht “nativ” von OpenStreetmap, sondern von Cloudmate? Wieso greift die Karte dann auf map.js zu, die auf dem OSM-Server liegt?

Wenn ich den Cloudmate-API-Key jetzt habe, was muß ich dann in meine html Datei schreiben?

Muß ich den cloudamate Layser dann wieder so hinzufügen?

new OpenLayers.Layer.OSM.noname("Karte Variante 2", { attribution: '', keyname: 'noname' }),

und muß ich die map.js in den Head der HTML-Datei reintun, so?

    <script type="text/javascript" src="http://www.openstreetmap.org/javascripts/map.js"></script>

Viele Grüße
desputin

genau, siehe auch http://wiki.openstreetmap.org/wiki/NoNames

Es ist umgekehrt: In der map.js wird der NoName Layer konfiguriert und die URL gibt an, woher die Karten-Kacheln (Tiles) geladen werden, nämlich von cloudmade.com:

"http://a.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png"

Die vorhandene Zeile mit OpenLayers.Layer.OSM.noname würde ich komplett entfernen und den Code aus meinem obigen Post in Deine html übernehmen, z.B. vor “jumpTo(lon, lat, zoom);”. Den hab ich einfach aus der map.js kopiert, die map.js selbst wird nicht benötigt. Dem nonamekey noch Deinen Key zuweisen (zum Testen gehts zumindest lokal auch mit nem Key aus der map.js) und statt “i18n(“javascripts.map.base.noname”)” noch nen Namen eintragen.

Okay, danke.

Habe den Quelltext von oben nun an die von Dir empfohlene Stelle eingesetzt.

Einen API-Key hab ich mir geholt. Keine Ahnung, ob das jetzt der richtige für noname ist. ist ein “web key”
Ich habe ihn also an die Stelle von nonamekey eingesetzt:

http://a.tile.cloudmade.com/” + 42040d0bd35a4c93a51bd657e7a7ea8a + “/3/256/${z}/${x}/${y}.png”

Leider wird jetzt gar nichts mehr dargestellt. Wenn ich nonamekey drin stehen lasse, werden immerhin noch die Navigationselemente, nicht aber der Karteninhalt dargestellt. Weißt Du, was ich falsch gemacht haben könnte?

http://www.christopherstark.de/extern/osm2/kohle.htm

Der Key muss in Anführungszeichen stehen, hier nochmal ein Code-Auszug der funktionieren sollte:



   var nonamekey = "42040d0bd35a4c93a51bd657e7a7ea8a";
   var noname = new OpenLayers.Layer.OSM("noname", [
      "http://a.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png",
      "http://b.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png",
      "http://c.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png"
   ], {
      displayOutsideMaxExtent: true,
      wrapDateLine: true,
      numZoomLevels: 19,
      layerCode: "N"
   });
   map.addLayer(noname);

Wenn die Seite nicht oder nur teilweise dargestellt wird, ist das meist ein JavaScript Fehler. Mit Link ist das zwar leicht nachzuvollziehen, ich fände es aber trotzdem gut, wenn Du den Fehler mitposten würdest und sei es nur, damit andere mit ähnlichem Fehler danach suchen können. Falls Du das noch nicht kennst, die JavaScript Meldungen kann man sich in den Enwickler-Tools des Browsers anzeigen lassen, z.B. im Firefox über Extras > Web-Entwickler > Fehlerkonsole.

Super, super, danke. Jetzt hat das schon mal geklappt. Nächstes Mal poste ich den Fehler gleich.

Eine Frage noch: wie kann ich den noname Layer als Standardlayer einstellen, der zuerst geladen wird?

(Off topic: Weißt Du, wie man die popup-boxen so einstellt, daß aufgeklappte verschwinden, wenn man den nächsten Marker anklickt?)

Freut mich, dass es geklappt hat.

Indem der Layer als erstes zur map hinzugefügt wird, d.h. der Code muss in diesem Fall vor das darüber stehende “map.addLayers(…”.

Das weiß ich nicht, aber ich finde das bei keep right! mit der Kombination von Hover und Select ganz gut gelöst - nur sehen die Boxen bei mir gerade leicht angefressen aus?

Ok, danke noch mal. Jetzt ist alles soweit zu meiner Zufriedenheit.

PS Doch noch einfe Frage:

Bei Cloudmate kann man ja sein eigenes Kartendesign kreieren… Kann man mittels dieser Cloudmate-ID auch auf eigene OSM-Themes zugreifen udn diese einbinden, oder geht das nur mit dem Standard-noname Theme?

Viele Grüße
desputin