API – Schritt für Schritt zur ersten Karte

Was passiert da genau?

Um eine Karte in eine Webseite einzubinden, müssen vier Dinge erledigt werden:

• OpenLayers und CSS werden eingebunden
• Ein <div>-Element ruft die Karte auf.
• Ein gültiger API-Key oder Demo-API-Key werden eingebunden.
• Das JavaScript erzeugt die Karte.

1. OpenLayers einbinden

Wir setzen ein Custom Build der aktuellen OpenLayers-Bibliothek ein, das wie folgt eingebunden wird:

                

<link rel='stylesheet' href='https://www.mapz.com/api/static/css/ol/7.3.0/ol.css' />
<script src='https://www.mapz.com/api/static/javascript/lib/7.3.0/ol.js'
type='text/javascript'></script>
              

2. <div>-Element einbinden

Die Karte wird über ein <div>-Element ausgeliefert.

                    

<div id='map' class='map'></div>
                
                  

Eigenschaften der Karte wie Höhe, Breite und Randgestaltung können über CSS gesteuert werden. Sie finden eine Übersicht über alle vordefinierten CSS-Elemente bei jedem Beispiel unter "CSS-Index". Alle vordefinierten Werte können anschließend im HTML angepasst werden. Wir definieren hier, dass die Karte 600 Pixel hoch und Bildschirmbreit angezeigt werden soll:

                

<style>
    .map {
      height: 600px;
      width: 100%;
    }
  </style>
    

3. JavaScript, um die Karte zu erzeugen

Mit diesen Zeilen JavaScript wird Kapstadt in Südafrika im Kartendesign "Shades of Gray" in Zoomlevel 14 aufgerufen:

              

<script>
  var map = new ol.Map({
    target: document.getElementById('map'),
    logo: false,
    layers: [
      new ol.layer.Tile({
        source: new ol.source.XYZ({
          tilePixelRatio: 2,
          url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
        }),
      })
    ],
    view: new ol.View({
      center: ol.proj.transform([18.41723, -33.92717], 'EPSG:4326', 'EPSG:3857'),
      zoom: 14
    })
  });
</script>

4. API-Key einsetzen

Nicht vergessen: Setzen Sie in der URL des Layerabrufs für demo-817ca352 ihren eigenen API-Key ein. Über eine E-Mail an unseren Autoresponder unter demo.api.key@mapz.com können Sie sich sofort einen voll funktionsfähigen Demo-Key abrufen.

Sehen wir uns das JavaScript nochmal genauer an:

Die folgende Zeile erzeugt ein OpenLayers "map"-Object.

 var map = new ol.Map({ ... });

Um die Karte dem <div> hinzuzufügen, fügen wir dem map-Objekt die ID des <div> als Ziel hinzu.

target: document.getElementById('map'),

Im Array "layers: [ ... ] wird in der URL festgelegt, welche der verfügbaren Kartenlayer abgerufen werden sollen. In unserem Beispiel ist das für die Kartendesignlinie "Shades of Gray" der Layer mapz_shades_of_gray_hq in Retina-Qualität. tilePixelRatio:2 weist den Browser an, die Karte auf niedriger aufgelösten Displays zu verkleinern. Für eine einfache Bildschirmauflösung rufen Sie einfach nur mapz_shades_of_gray auf, setzen das tilePixelRatio auf 1 und rufen anstelle eines .jpeg ein .png ab.

   layers: [
      new ol.layer.Tile({
        source: new ol.source.XYZ({
          tilePixelRatio: 2,
          url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
        }),
      })
    ],

Sie können die mapz-Karte auch mit weiteren Layern aus anderen Quellen kombinieren, beispielsweise Ihren eigenen. Hier finden Sie eine Liste der möglichen Datenformate.

Mit den view-Parametern definieren Sie nun den gewünschten Kartenmittelpunkt und den Anzeige-Maßstab, den Sie in 20 vordefinierten Schritten justieren können.

      view: new ol.View({
        center: ol.proj.transform([18.41723, -33.92717], 'EPSG:4326', 'EPSG:3857'),
        zoom: 14
      })

Wie Sie hier sehen, haben wir die Geokoordinaten des Kartenmittelpunktes in der Projektion EPSG:4326 angegeben. Da unser aktueller Kartenlayer mapz_shades_of_gray_hq mit der Projektion EPSG:3857 arbeitet, rechnet OpenLayers die Koordinaten automatisch für uns um.

Das war schon alles, was nötig ist, um eine Karte einzubinden. Weitere Hinweise zu den möglichen Parametern finden Sie als Kommentar direkt im JavaScript-Code unserer Codebeispiele.

Weiterführende Informationen finden Sie bei OpenLayers. Nützliche Tools zum konvertieren von CSV-Dateien in JSON- oder GeoJSON-Dateien bietet die Website ConvertCSV.com.