Beispiele anzeigen 

Kartenansicht

Eine grundlegende Eigenschaft der SmartMaps-API ist das Anzeigen eines Kartenausschnitts.

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

Die Klassen des Namensraums ym.modules.provider enthalten auch die Methoden, die es ermöglichen, die Objekte der Karte hinzuzufügen.

Weitere Funktionalitäten zur Kartenansicht, wie zum Beispiel die Einbindung einer statischen Karte, und mehr, gibt es in den SmartMaps Backend-Services zu finden.

Anleitung

Für die Implementierung einer interaktiven SmartMaps-Karte, wird vorerst im body-Tag des HTML-Skriptes ein div-Element mit der ID map-wrapper hinzugefügt. Dieser beinhaltet ein vordefiniertes div-Element mit der ID map, in dem zur Laufzeit die Karte geladen wird. Für das div-Element kann man durch das style-Attribut eine feste Höhe und Breite für die Karte festlegen.

  <div id="map-wrapper">
    <!-- Vordefiniertes DIV-Element, in das die Karte geladen wird. -->
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>

Für das Laden der SmartMaps-Karte in das verdefinierte div-Element map ist die Einbindung von JavaScript-Code notwendig. Dieser kann, wie in diesem Beispiel, anhand eines script-Tags im HTML-Skript oder in einer separaten .js-Datei eingebunden werden. Alle Variablen und Funktionen werden in der ym.ready-Methode implementiert, da diese Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten.
Für das Anzeigen der SmartMaps-Karte wird ein Objekt der Klasse ym.map angelegt. Als Parameter wird dabei die ID des div-Elementes übergeben, in dem die Karte eingezeichnet werden soll, und die gewünschten Kartenoptionen (Startposition, Startzoom-Level, Farbprofil, usw.). Für die Verwendung eines alternativen Farbprofils verwenden Sie bitte die Kartenoption style. Die Auflistung aller Kartenoptionen finden Sie hier. Um die Karte weiterhin im Code zu verwalten, wird das Objekt in einer Variable map gelagert.

    ym.ready(function(modules) {
      var map = ym.map("map", {
        // Geographische Länge und Breite definieren.
        center: ym.latLng(50.095685, 8.690445),
	// Zoomstufe festlegen.
        zoom: 12
      });
    });

Die SmartMaps-Karte ist nun erfolgreich eingebunden.

HTML-Dokument

Codebeispiel: Kartenansicht

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Karte</title>
</head>
<body>
  <div id="map-wrapper">
    <!-- Vordefiniertes DIV-Element, in das die Karte geladen wird. -->
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>
  <!-- SmartMaps API -->
  <!-- Hier muss Ihr persönlicher API-Key integriert werden -->
  <script
    src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}="></script>
  <script>
    ym.ready(function (modules) {
      var map = ym.map("map", {
        // Geographische Länge und Breite definieren.
        center: ym.latLng(50.095685, 8.690445),
        // Zoomstufe festlegen.
        zoom: 12
      });
      window.map = map;
    });
  </script>
</body>
</html>

Das könnte Sie auch interessieren:

Jetzt Beispiel ansehen  
ym.modules.provider.Map