Hallo zusammen,
ich habe mich heute zum ersten mal mit OSM auseinandergesetzt. Ich möchte im Rahmen eines Schulprojekts ein Onlinespiel erstellen. Dafür soll man auf der Karte Buttons anklicken klickt man auf einen der Buttons soll die Karte für eine gewissen Zeit gesperrt werden.
Kurz und bündig: Wir wollen das alte Browsergame “Pennergame” nachbasteln.
Ich habe es dank echt einfacher und guter Erklärungen bereits geschafft die Karte auf meine Webseite einzubinden.
Nun bin ich allerdings auf 2 Probleme gestoßen:
OSM greift bei der Positionierung der Karte auf LAT und LON zurück. Nun habe ich mehrmals im SourceCode (html) die Koordinaten von Würzburg eingegeben, allerdings zeigt mir OSM auf meiner Webseite anschließend nicht Würzburg, geschweige denn Deutschland, sondern Griechenland oder Afrika. Je nach Zoomstufe.
Welche Werte (LAT, LON und Zoomstufe) muss ich eingeben um in Würzburg zu landen. Wie funktioniert die Navigation mit LON und LAT?
Ich möchte auf meiner Karte Icons/Buttons einblenden…
Wie geht das und was ist dafür nötig?
Ich danke im Voraus für die Hilfe und hoffe meine Fragen sind nicht blöd oder unnötig.
LG Triceps
Wenn du unsicher bist, ob du die richtigen Koordinaten verwendest, dann gehe auf openstreetmap.org, positioniere die Karte auf Würzburg und schaue in die Adressleiste des Browsers. Oder erstelle mit der Teilenfunktion einen Link mit Marker. In dem Link sind die Koordinaten des Markers enthalten.
Das setzt allerdings voraus, dass du bei der Anzeige deiner Anwendung auch die Projektion WGS84/EPSG:4326 verwendest
Die Anzeige funktioniert und ich kann die Karte auch so sehen wie ich es wollte. Das einzige Problem ist das folgende:
Egal welche Koordinaten ich eingebe, die Karte bewegt sich nicht an den vorgegebenen Ort…
Manchmal bewegt sie sich garnicht.
Letzlich war es nicht schwer die Koordinaten von Würzburg zu ermitteln…
lat: 9
lon: 50
hat es vielleicht etwas mit der Zoomstufe zu tun in der ich mich befinde?
Kann ich in meinem html Dokument die Koordinateneinstellung verändern / bzw. auf die entsprechende Projektion verändern?
Hi Triceps,
fast richtig, nur umgekehrt lat:50 (genauer 49.783333) und lon:9 (genauer 9.933333). Wenn Du das so den HTML-Code packst klappt es
OpenLayers.Lang.setCode('de');
// Position und Zoomstufe der Karte
var lon = 9.933333;
var lat = 49.783333;
var zoom = 7;
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, 9.933333, 49.783333, popuptext);
Wenn der Marker zuweit vom Kartenzentrum weg liegt, verschiebt es die Karte ebenfalls.
Vielen Dank!
Das hat mir sehr geholfen!
Ich denke es lag an dem Marker…
der hat alles durcheinander gebracht.
Was ich allerdings nicht verstehe:
1.
Wenn ich die Karte verschieben möchte, muss ich ja lon und lat anpassen… Wie kann ich mir das am besten vorstellen? Meines Wissens sind das Längen-und Breitengradangaben. Dann müsste das ganze ja so funktionieren wie in einem Kartesischen Koordinatensystem… Wenn ich die Werte allerdings anpasse verändert sich nichts oder die Karte verschiebt sich entgegen meiner beschriebenen Herangehensweise…
Ich will die Karte fixen. Also so gestalten, dass man sich nur in einem gewissen Bereich navigieren oder zoomen kann. (sozusagen statisch)
Wo habt ihr euer Wissen her? Wisst ihr das alles einfach, oder gibt es eine spezifische Seite bei der man sich für sowas durchklicken kann. Ich habe leider nur dieses Forum gefunden. Schließlich will ich nicht wegen jeder kleinen Frage irgendjemandem in einem Forum anschreiben
Die wichtigste Info Quelle hast Du schon gefunden: https://wiki.openstreetmap.org/wiki/Main_Page
Du kannst aber trotzdem immer hier nachfragen, aber dann auch auf die Antworten/Rückfragen eingehen.
Bei Deiner Aufgabenstellung wirst Du aber mit dem einfachen Ansatz nicht viel weiterkommen, sondern Dich in eines der schon genannten JavaScript basierten Systeme Leaflet oder OpenLayers einarbeiten müssen. ( im OSM Wiki dazu suchen)
Es wird dort nicht erwähnt, für interaktive Karten benötigt man eine externe Kartenbibliothek, das stellt OpenStreetMap selbst nicht zur Verfügung, siehe auch OpenStreetMap benutzen - Webanwendungen. Die Anleitung verwendet OpenLayers, siehe JavaScript-Dateien einbinden.
Leider die veraltete Version 2.x (2.13.1), die nicht mehr weiterentwickelt wird. Version 3 wurde komplett neu geschrieben und hat eine andere Syntax.
Ich würde aber eher Leaflet empfehlen, das heutzutage meistens verwendet wird.
Neben der Einführung in Leaflet gibt es auch eine Anleitung um eigene Icons als Marker zu verwenden (Englisch):