Drittanbieter-Bibliotheken

Die SmartMaps-API kann grundsätzlich zusammen mit Drittanbieter-Bibliotheken verwendet werden. In den meisten Fällen ist dies problemlos möglich. Für einige Bibliotheken müssen bestimmte Kriterien erfüllt sein. Diese werden im Folgenden behandelt.

RequireJS integrieren

Um die SmartMaps-API zusammen mit RequireJS zu verwenden, muss RequireJS auf eine bestimmte Weise integriert werden. Das Beispiel erklärt, wo und in welcher Reihenfolge die Bibliotheken eingebunden werden sollten.

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

Fügen Sie den folgenden Code zum Body hinzu:

Codebeispiel: RequireJS integrieren

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>RequireJS Test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

    <!--
    Vor </body> und vor RequireJS wird Leaflet und die SmartMaps-API geladen.
    Leaflet wird nur deswegen eingebunden, weil es für RequireJS explizit geladen werden muss.
    -->
    <script src="https://www.yellowmap.de/api_js/cdn/leaflet/leaflet-1.8.0.min.js"></script>
    <script src="https://www.yellowmap.de/api_rst/api/loader?apiKey=[INSERT API-KEY]
    &libraries=enterprise-3"></script>

    <!--
    RequireJS konfigurieren und ausführen. Im Beispiel wird jquery geladen und Beispielcode
    ausgeführt (console.log()).
    -->
    <script src="https://www.yellowmap.de/api_js/cdn/require/require-2.1.9.min.js"></script>
    <script>
        requirejs.config({
            paths : {
                'jquery': 'https://www.yellowmap.de/api_js/cdn/jquery/jquery-3.4.1.min'
            },
            shim: {
                'jquery': {
                    exports: ['$']
                }
            }
        });

        requirejs(['jquery'], function () {
            console.log('hello, world!');
        });
    </script>

    <!--
    Vor </body>, aber nach dem Ausführen von RequireJS wird ym.ready() aufgerufen.
    -->
    <script>
        ym.ready(function () {
            console.log('hello there!');
            console.log(L);
        });
    </script>
    </body>
</html>