Projektarbeit / Buttons/Bilder einblenden /Positionierung mit LON/LAT

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:

  1. 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?

  1. 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

Wie wird die Karte denn angezeigt? Mit Leaflet oder OpenLayers?

Ich kenne zwar nicht “Pennergame” - wenn es etwas öffentliches werden sollte dann vielleicht einfach mit uMap: http://umap.openstreetmap.fr/de/

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

Hi!
Erstmal Danke für die ganze Hilfe!
Ist wirklich sehr freundlich.

Ich habe die Karte eingebunden über die folgende Anleitung:
https://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden

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?

LG Triceps

Vielleicht zeigst Du uns mal Dein html Dokument?

Anscheinend doch. :wink:

lat bezeichnet den Breitengrad. Für Würzburg ist der etwa bei 49,8 °
lon ist der Längengrad, für Würzburg bei ca. 9,9 °.

Also gerade umgekehrt.

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.

Grüße
Andreas

PS. kartler175 war schneller.

Tut mir leid ich weiss nicht was du meinst! :frowning:
ich habe die Anleitung der folgenden Seite befolgt!
https://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden

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 :slight_smile:

LG und Vielen Dank!

Ich hatte das auch so in meinem Code stehen…
Ich habe es leider nur hier verwechselt… :smiley:
Als ich den Marker entfernt habe ging es… :slight_smile:
Vielen Dank!

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)

Leaflet: https://leafletjs.com/reference-1.6.0.html
OpenLayers: https://openlayers.org/en/latest/apidoc/

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):

PS: das Pendant für Leaflet zu der von dir verwendeten Anleitung ist wohl OSM mit Leaflet.