Deutschlandkarte

Hiho zusammen,

ich habe zwar einige Erfahrung mit JavaScript, aber wenig mit GeoJSON und die Openlayers API ist komplett neu für mich.

Was ich erreichen möchte: Eine Openlayers-Map (Openstreetmap als Source) mit einem ‘Kartenausschnitt’ von Deutschland auf einer Website einbinden.

Was ich getan habe: Den Workshop durchgearbeitet, die FAQ gelesen und analog zum dort beschriebenen Beispiel versucht, eine eigene Projection zu erstellen. Mein Code sieht so aus:

var germany = new ol.proj.Projection({
    code: 'EPSG:5243',
    extent: [-2548168.31, -1577095.90, 439849.00, 4105962.24],
    units: 'm'
  });
  ol.proj.addProjection(germany);

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({source: new ol.source.OSM()})
    ],
    view: new ol.View({
      projection: germany
    })
  });

Die Daten habe ich von hier übernommen: http://epsg.io/5243

Das Canvas innerhalb #map wird erzeugt, die Console zeigt keine JavaScript-Fehler, aber ich sehe trotzdem keine Karte.

Was habe ich vergessen?

Wenn Du noch ganz am Anfang bist, würde ich Dir empfehlen, Leaflet statt OpenLayers zu verwenden. Wesentlich einfacher und intuitiver, durchgängiger und angenehmer zu benutzen und bessere Doku und Beispiele.

Die meisten Karten im OSM Umfeld wurden im Lauf der Zeit auf Leaflet umgestellt.

bye, Nop

Wenns OL sein soll, das da unten dürfte ungefähr hinkommen (als Beispiel hier zu sehen, akgekupfert von OL quickstart). Ich würde mir aber auch Leaflet ansehen, wenn ich neu mit sowas anfangen würde.

Mit diesem EPSG:5243 bist du ziemlich auf den Holzweg geraten. Das ist eine Projektion, die im OSM-Umfeld selten ist. OSM-Karten liegen üblicherweise in EPSG:3857, allerdings nimmt man auch das nicht gerne her, sondern schreibt im Programm alles in Längengraden und Breitengraden und verwendet dann “ol.proj.irgendwas()” um die Koordinaten zu wandeln.

Grüße und willkommen im Forum
Max


<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 600px;
        width:  600px;
      }
    </style>
    <script src="https://openlayers.org/en/v4.1.1/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body >
    <div id="map" class="map"></div>
    <script type="text/javascript"> 
      var map = new ol.Map({
        target: 'map',
        layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
        view: new ol.View({extent: ol.proj.transformExtent([5,46,16,52], 'EPSG:4326', 'EPSG:3857'),
                           center: ol.proj.fromLonLat([10.5, 51]),
                           zoom: 6})
      });
    </script>
  </body>
</html>  

Die genaue Ausdehnung des Bereichs auf den die Karte beschränkt ist (Hier: Links unten 5°E,46°N ; Rechts oben 16°E,52°N) kannst dir noch raussuchen, (10.5°E, 51°N) ist der Kartenmittelpunkt, musst auch noch was für dich passenderes suchen.

Alles was man zur Doku findet ist generell auf Englisch UND an “echte” Entwickler/Fortgeschrittene gerichtet. Ich find OL auch sehr altbacken, aber als DAU ist das für mich um Längen einfacher.

Wo gibts denn gute deutsche Anleitungen zu Openlayers 3 oder 4? Da seh ich immer nur Englisch, was ich auch schade finde.

Ich hab den Eindruck, dass seit Einführung von Leaflet hier deutlich weniger über die Frage “ich möchte eine Karte einbinden” diskutiert wird. Das nehme ich als Zeichen dafür, dass damit der Einstieg einfacher geworden ist. Vielleicht binden aber auch nur weniger Leute Karten ein oder sie fragen woanders :wink:

Grüße
Max

Netzwolf hat sehr viele gute und gut dokumentierte Beispiele auf deutsch.
Nachtrag:

Halte ich für sehr wahrscheinlich. (Spezial-)Karten mittels OSM erstellen ist nichts für Leute, die das mal schnell nebenbei machen. Ich nutze Google für genau nix, aber in meinem Bekanntenkreis höre ich des Öfteren, dass da Dinge gingen, die jeder Trottel könnte.
Das wäre für OSM imho auch wünschenswert.

Soweit ich mich erinnere sind diese Beispiele ausschließlich für OpenLayers 2, was komplett inkompatibel zu den Nachfolgeversionen ist. OL3 & 4 sind gefühlt im osm Umfeld nie wirklich angekommen.

Ich würde das schon tlw. auf Leaflet zurückführen. Vor einiger Zeit musste ich auch mal „ein paar Karten“ einbinden; und ich war zwar schon länger OSM-Mapper, hatte aber von der Kartenerstellung und Einbindung keine Ahnung. Trotzdem hat es mit Leaflet auf Anhieb geklappt; daher musste ich gar nicht erst fragen, weder hier noch anderswo … Mit OL wäre das, deutsche Bsp. hin oder her, nicht so glatt gegangen.

Ich würde meine eben genannte Erfahrung mit Leaflet eigentlich genau so verstehen (wenn ich das so auf Anhieb hinbekommen habe, kann das auch jeder Trottel). Könnte der Grund nicht auch darin liegen, dass „jeder Trottel“ eben Google kennt – aber OSM nicht? Und daher beim Einbinden eben „Ha, Karte, da brauchen wir Google Maps“ denkt?! Jedenfalls muss ich immer mal wieder gar nicht so trotteligen Leuten erklären, dass es außer Google Maps z.B. auch noch OSM gibt …

@rickdeckard,

hier mal ein Link, wo nach guter Netzwolf-Tradition mit Openlayer 3/4 und OSM etwas gemacht wird:

http://www.roeltgen.com/osm/

Grüße von Lutz

Hallo Max,

danke für die Antwort.

Ich habe mittlerweile herausgefunden, dass sich Daten via nominatin finden lassen.
http://nominatim.openstreetmap.org/search.php?q=deutschland&polygon_geojson=1&viewbox=

da erhalte ich dann so etwas zurück

map center und zoom sind klar, aber wofür steht die viewbox? Brauche ich deren Values überhaupt und falls ja, wie verwende ich die mit der OL API?

Des Weiteren zu deinem Code.

ol.proj.transformExtent(extent, source, destination)

Die Methode hat 3 Argumente: ein Array mit Koordinaten, Standardprojection und diese hier: http://epsg.io/3857
Die letzen beiden sind klar, aber wie gelange ich an die Koordinaten? nominatim gibt das nicht her.

Habe ich mir angeschaut, sieht interessant aus. Aber bevor ich tiefer einsteige, eine Frage:
Was ich eigentlich bauen will, ist eine Wetterkarte. Also eine Deutschlandkarte, auf der sich Temperaturen, Pollenflug, etc., einblenden lassen. Die Tiles werde ich von einem Provider (Files wahrscheinlich als XML, möglicherweise aus JSON) erhalten, der sie ursprünglich mit Openlayers und OSM als Source erstellt hat. Kann ich da bedenkenlos zu Leaflets switchen, oder gibt es irgendwelche Einschränkungen bzw. Inkompatibilitäten zu OL?

Die Viewbox ist der Bereich der gerade in der Karte zu sehen ist. Brauchst du nicht, ausser du willst genau diesen Ausschnitt auch haben (29°Ost ist aber schon weit im Osten knapp vor Kiew). Du kanst dir deinen eigenen Ausschnitt suchen, indem du auf osm.org ein bisschen rumzoomst und schiebst. In der URL stehen die Koordinaten des Mittelpunktes. Du musst auch nicht so genau sein, die erste Nachkommastelle sind ca. 10km und es schadet ja nicht, ein bisschen Belgien links neben der Grenze zu sehen.

Falls du den Kartenausschnitt nicht begrenzen willst, kannst das alles auch weglassen. Dieses “extent: ol.proj.transformExtent([5,46,16,52] …” dient nur dazu, zu verhindern, dass die Leute den Kartenausschnitt zu weit weg verschieben. Der erst Aufruf landet auch dann in DE, wenn du das weglässt, der wird nur durch Mittelpunkt und Zoom bei “center: ol.proj.fromLonLat([10.5, 51]), zoom: 6” festgelegt.

Rumschieben auf osm.org und die URL im Auge behalten. Manche Karten zeigen auch die Mauskoordinaten immer an, die Reit und Wanderkarte z.B. oben rechts im Eck.

JSON kann Leaflet genauso gut. Zu XML weiss ichs nicht.

Grüße
Max

Danke, damit habe ich jetzt alle Infos um beliebige Kartenausschnitte anzuzeigen.

Ich werde mir dann auch Leaflet anschauen. Falls ich die Tiles als XML bekomme, gibt es ja einen Parser. https://www.npmjs.com/package/xml2json