Zum Inhalt

Map

Kartenanzeige

Eine grundlegende Eigenschaft der SmartMaps API ist die Anzeige eines Kartenausschnitts.

Zusätzlich zur Anzeige der Kartenbasis können verschiedene Objekte in die Karte eingezeichnet werden. Dazu zählen Icons, DIV-Elemente und GeoJSON-Objekte wie Polylinien oder Polygone (Flächen). Letztere unterscheiden sich von Polylinien dadurch, dass sie eine Füllfarbe haben können. Die Liste der weiteren Objekte finden Sie im Namespace ym.modules.provider.

Die Klassen des Namespace ym.modules.provider enthalten außerdem die Methoden, um die Objekte der Karte hinzuzufügen.

Weitere Funktionen für die Kartenansicht, wie die Einbindung einer statischen Karte und mehr, stehen in den SmartMaps Backend-Services zur Verfügung.

Hinweis: Backend-Services

Anleitung

Für die Implementierung einer interaktiven SmartMaps-Karte wird zunächst ein div-Element mit der ID map-wrapper in das Body-Tag des HTML-Skripts eingefügt. Dieses enthält ein vordefiniertes div-Element mit der ID map, in das die Karte zur Laufzeit geladen wird. Für das div-Element können Sie mit dem Attribut style eine feste Höhe und Breite für die Karte festlegen.

<div id="map-wrapper">
  <!-- Predefined DIV element into which the map is loaded. -->
  <div id="map" style="width: 600px; height: 600px;"></div>
</div>

Um die SmartMaps-Karte in das definierte div-Element map zu laden, muss JavaScript-Code eingebunden werden. Dies kann, wie in diesem Beispiel, über ein Script-Tag im HTML-Skript oder in einer separaten .js-Datei erfolgen. Alle Variablen und Funktionen werden in der Methode ym.ready implementiert, da diese die Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten.

Um die SmartMaps-Karte anzuzeigen, wird ein Objekt der Klasse ym.map erstellt. Parameter sind die ID des div-Elements, in dem die Karte gezeichnet werden soll, sowie die gewünschten Kartenoptionen (Startposition, Start-Zoomstufe, Kartenstil usw.). Verwenden Sie die Kartenoption style, um einen anderen Kartenstil anzufordern, z. B. Graustufen oder Dark Mode. Alle Kartenstile sind in den Kartenoptionen dokumentiert, klicken Sie hierzu bitte hier. Um die Karte im Code weiter zu verwalten, wird das Objekt in einer Variable map gespeichert.

ym.ready(function(modules) {
  var map = ym.map("map", {
    // Define geographical longitude and latitude.
    center: ym.latLng(50.095685, 8.690445),
    // Set zoom level.
    zoom: 12
  });
});

Die SmartMaps-Karte ist nun erfolgreich eingebunden.

HTML-Dokument

Codebeispiel: Kartenanzeige

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Karte</title>
</head>
<body>
  <div id="map-wrapper">
    <!-- Predefined DIV element into which the map is loaded. -->
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>

  <!-- SmartMaps API -->
  <!-- You must include your personal API-key here -->
  <script
    src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey=[INSERT API-KEY]"></script>
  <script>
    ym.ready(function (modules) {
      var map = ym.map("map", {
        // Define geographical longitude and latitude.
        center: ym.latLng(50.095685, 8.690445),
        // Set zoom level.
        zoom: 12
      });
      window.map = map;
    });
  </script>
</body>
</html>