Fremdbibliotheken

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

RequireJS einbinden

Um die SmartMaps-API zusammen mit RequireJS verwenden zu können, muss RequireJS in einer bestimmten Weise eingebunden werden. Im Beispiel wird erklärt, an welcher Stelle und in welcher Reihenfolge die Bibliotheken integriert werden sollten.

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 ersetzen.

Fügen Sie den folgenden Code in den body hinzu:

Codebeispiel: RequireJS einbinden

<!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={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>