1. Home
  2. Dokumente
  3. Karten
  4. Erste Schritte

Erste Schritte

Für den Zugriff auf die unterschiedlichen Kartenfunktionalitäten steht eine JavaScript-API (SmartMaps-API) zur Verfügung.

Über den API-Loader lassen sich die unterschiedlichen Module der JavaScript-API auswählen. Es besteht hierbei zusätzlich die Möglichkeit, auf eine bestimme Revision zuzugreifen oder alternativ immer die aktuelle Version einer Hauptrevision zu laden. Die ausgewählten Module können unterschiedlichen Revisionsnummern entstammen.

Initialisierung

Aufrufschnittstelle für den API-Loader:

https://api.yellowmaps.eu/api_rst/api/loader/?

Auf folgende Weise binden Sie die SmartMaps-API ein (der Zeilenumbruch dient der besseren Lesbarkeit):

<body>
   <script src="https://api.yellowmaps.eu/api_rst/api/loader/?
      apiKey={API_KEY}&libraries=free-3"></script>
</body>

Für den Zugriff benötigen Sie einen partnerspezifischen Zugriffsschlüssel (Parameter-Name: apiKey). Diesen stellt Ihnen YellowMap zur Verfügung: Kontakt.

Beachten Sie, dass der Zugriff auf bestimmte Domains beschränkt bleibt. Die Beschränkung auf bestimmte IP-Adressen sind im Enterprise-Bereich möglich.

Module und Versionsnummern werden über den Parameter libraries festgelegt. Die einzelnen Module werden voneinander durch Komma getrennt.

Parameter

Name Beschreibung Datentyp
apiKey Zugriffsschlüssel
[erforderlich]
string
libraries Eine oder mehrere Programm-Bibliotheken, getrennt durch Komma.
[erforderlich]
string

Mögliche Werte des Parameters libraries

Wert Bedeutung
free Das Produkt mit dem Namen „free“
enterprise Das Produkt mit dem Namen „enterprise“

Abhängigkeiten werden automatisch geladen.

Beispiel

Das Beispiel ist vollständig; Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey vorher ersetzen.

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8" />
</head>
<body>
	<!-- Stelle, an der eine Karte angezeigt werden soll. Auf die ID wird unten im Skript verwiesen. -->
	<div id="map" style="height: 400px; width: 500px;"></div>

	<!-- Laden der SmartMaps-API. -->
	<script src="https://api.yellowmaps.eu/api_rst/api/loader/?apiKey={API_KEY}&libraries=free-3"></script>

	<!-- Zugriff auf die SmartMaps-API. Hier: Anzeige einer Karte. -->
	<script>
		ym.ready(function (modules) {
			var provider = modules.provider; 
			// Kurzform: ym.latLng(49.001, 8.417);
			var center = ym.latLng(49.001, 8.417);
			// Kurzform: ym.map(...);

			// Mittelpunkt und Zoomstufe sind nicht optional.
			var map = new provider.Map("map", {
			center: center,
			zoom: 12
			});

			window.map = map;
		});
	</script>
</body>
</html>

Auflösung von Abhängigkeiten

Die Funktion ym.ready(options, callback) löst Abhängigkeiten auf, die für die JavaScript-Komponenten notwendig sind. Nach Abarbeitung des Callback sind sämtliche Abhängigkeiten aufgelöst und die eigentliche Kartenanwendung kann gestartet werden.

Grundsätzlich werden sämtliche Abhängigkeiten als Polyfill geladen. Sollte also eine Bibliothek, wie zum Beispiel jQuery, bereits existieren, wird diese mitgenutzt und die Bibliothek wird nicht nachgeladen.

Nach Aufruf von ym.ready() stehen die geografischen Objekte im Namensraum ym.modules.provider zur Verfügung.

Wie können wir helfen?