📘
Guide Jakartowns
FonctionnalitésCréation d'inventairesTutorielsRaccourcis clavier
Guide Jakartowns - Français
Guide Jakartowns - Français
  • 🚀Guide Jakartowns
  • 👬Qu'est-ce qu'un jumeau numérique ?
  • 🏙️Jakartowns
    • Interface
    • Type de données
    • Qualité des données
    • ⚙️Fonctionnalités de Jakartowns
      • Styles d'affichage
      • Déplacement
      • Localisation
      • Barre d'outils
    • 🖇️Création d'inventaires
      • Outils d'inventaires
      • Tableau d'inventaires
    • 📌Tutoriels
      • Choisir la couche de fond pour la carte de référence 2D
      • Visualiser les tuiles matricielles de Tiles sur Jakartowns
        • Demonstration avec les tuiles de style classification
      • Visualiser des données aériennes
    • ⌨️Raccourcis clavier
      • Général
      • Navigation rapide
      • Outils
      • Navigation libre
  • 💻Développeurs
    • API - URL
    • API JavaScript
      • 🎯Principales fonctionnalités
      • 🔒Authentification sécurisée et transparente
      • 📚Références de l'API
      • 🚀Exemple d'intégration
      • 👨‍👩‍👧‍👦D'autres ont réussi !
      • 🎁Bonus : Intégration de vos données existantes
      • En savoir plus
  • Besoin d'assistance
  • Retourner à la vue d'ensemble
Powered by GitBook
On this page
  1. Développeurs
  2. API JavaScript

Exemple d'intégration

Cette page illustre les capacités de l'API. Voyez comment la charger dans une page web et comment utiliser les fonctions à disposition.

PreviousRéférences de l'APINextD'autres ont réussi !

Last updated 7 months ago

Découvrez l'exemple en ligne de l'intégration de l'API en cliquant sur

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jakartowns JavaScript API Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            padding-bottom: 1cm; /* Add space for the footer */
        }

        h1 {
            text-align: center;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        #JakartownsContainer {
            align-items: center;
            position: relative;
            width: 40%;
            left: 5%;
            aspect-ratio: 16 / 9;
        }

        #formContainer {
            flex: 1;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        form {
            text-align: center;
            margin-top: 20px;
        }

        form label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        form input[type="text"] {
            padding: 5px;
            margin-bottom: 10px;
            width: 200px;
        }

        form input[type="button"] {
            padding: 5px 10px;
            margin: 10px 5px;
            background-color: #4caf50;
            color: white;
            border: none;
            cursor: pointer;
        }

        #logs {
            text-align: center;
            margin-top: 20px;
        }

        #goToJakartownsBtn {
            padding: 8px 16px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>Jakartowns JavaScript API Demo</h1>
    <div id="logs"></div>
    <div class="container">
        <div id='JakartownsContainer'>
            <div id="app"></div>
        </div>
        <div id="formContainer">
            <form>
                <label for="longitude">Longitude:</label>
                <input type="text" id="longitude" name="longitude" placeholder="Enter longitude" required><br>
                <label for="latitude">Latitude:</label>
                <input type="text" id="latitude" name="latitude" placeholder="Enter latitude" required><br>
                <label for="tilt">Tilt:</label>
                <input type="text" id="tilt" name="tilt" placeholder="Enter tilt"><br>
                <label for="pan">Pan:</label>
                <input type="text" id="pan" name="pan" placeholder="Enter pan"><br>
                <label for="fov">Field of View:</label>
                <input type="text" id="fov" name="fov" placeholder="Enter FOV"><br>
                <input type="button" id="setPositionBtn" value="Set Position">
                <input type="button" id="setTiltBtn" value="Set Tilt">
                <input type="button" id="setPanBtn" value="Set Pan">
                <input type="button" id="setFovBtn" value="Set FOV">
            </form>
            <button id="goToJakartownsBtn">Go to Jakartowns Web App</button>

        </div>
    </div>
    <script>
        const logs = document.querySelector('#logs');

        async function print(txt) {
            await logs.insertAdjacentHTML('beforebegin', txt);
        }
    </script>
    <script>
        async function isAuthenticated() {
            // Request to confirm the authentication on Jakarto platform
            const confirmation_request = await fetch('https://account.jakarto.com/auth', {
                credentials: 'include',
                method: 'GET',
            });
            await confirmation_request.text();
            return confirmation_request.status === 200;
        }

        async function main() {
            print('Checking authentication...<br/>');
            let isConnected = await isAuthenticated();
            print(`Connected: ${isConnected}<br/>`);

            if (!isConnected) {
                print('User not authenticated. Sending request to connect to Jakarto webservices...<br/>');

                const form = new FormData();
                // TODO: Replace values by user credentials
                form.append('email', 'TO_REPLACE');
                form.append('password', 'TO_REPLACE');

                // Request to set the connection cookie
                // ⚠ Authentication will work even if the above credentials are incorrect if you already have a valid cookie (by connecting to the Jakarto web platform using the regular web page)
                // If you want to enforce a new cookie, please first disconnect your account from https://account.jakarto.com
                await fetch('https://account.jakarto.com/users/login', {
                    headers: {
                        'content-type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams(form),
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'include',
                    redirect: 'manual', // avoid redirection... it will cause a CORS error on jakartowns.jakarto.com/ route
                });
            } else {
                print('Already connected<br/>');
            }

            print('Confirming authentication...<br/>');
            isConnected = await isAuthenticated();
            print(`Connected: ${isConnected}<br/>`);

            if (!isConnected) {
                print('User cannot connect. Please check credentials.<br/>');
                return;
            }

            print('<br/>Example with <b>frontend API</b>:<br/>');

            function loadScript(javascriptUrl) {
                return new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = javascriptUrl;
                    script.async = true;
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            print(`Frontend API status: script not yet loaded. Expected status ==> false. Status: ${window.hasOwnProperty('jakartowns')}<br/>`);
            await loadScript('https://maps.jakarto.com/api/v1.js');
            print(`Frontend API status: script should be loaded. Expected status ==> true. Status: ${window.hasOwnProperty('jakartowns')}<br/>`);

            async function setPosition(viewer, wantedPosition) {
                const jakartownsData = await viewer.setPosition(wantedPosition);
                console.log(`Current image UID: ${JSON.stringify(jakartownsData.uid)}`);
                console.log(`Distance between targeted lngLat and panorama lngLat: ${JSON.stringify(jakartownsData.distance)} km`);
            }

            async function setTilt(viewer, wantedTilt) {
                const tilt = await viewer.setTilt(wantedTilt);
                console.log(`Tilt set to: ${tilt}`);
            }

            async function setPan(viewer, wantedPan) {
                const pan = await viewer.setPan(wantedPan);
                console.log(`Pan set to: ${pan}`);
            }

            async function setFov(viewer, wantedFov) {
                const fov = await viewer.setFov(wantedFov);
                console.log(`FOV set to: ${fov}`);
            }

            const jakartownsOptions = {
                headerEnabled: true,
                minimapEnabled: false,
            };

            if (window.jakartowns === undefined) {
                const currentURL = window.location.origin;
                alert('You need to be connected to the Jakarto platform first. The page will redirect to the authentication page.');
                window.open(`https://account.jakarto.com/users/login?redirectTo=${currentURL}`, '_self');
            }

            window.jakartowns.app.create_jakartowns(
                '#app',
                jakartownsOptions,
                (viewer) => {
                    window.jakartowns_instance = viewer; // do anything with the viewer instance outside of this callback
                    console.log('Jakartowns instance is loaded');

                    // Listeners on client update (Jakartowns side)
                    window.addEventListener('position', (e) => {
                        // When the user changes their position
                        console.log('position event', e.detail);
                        document.getElementById('longitude').value = e.detail.longitude;
                        document.getElementById('latitude').value = e.detail.latitude;
                    });

                    window.addEventListener('rotation', (e) => {
                        // When the user changes the horizontal rotation of the view
                        console.log('rotation event', e.detail);
                        document.getElementById('pan').value = e.detail;
                    });

                    window.addEventListener('tilt', (e) => {
                        // When the user changes the vertical rotation of the view
                        console.log('tilt event', e.detail);
                        document.getElementById('tilt').value = e.detail;
                    });

                    window.addEventListener('fov', (e) => {
                        // When the user changes the field of view of the view
                        console.log('fov event', e.detail);
                        document.getElementById('fov').value = e.detail;
                    });

                    // API usage example
                    document.querySelector('#setPositionBtn').addEventListener('click', (event) => {
                        const newLngLat = { latitude: document.getElementById('latitude').value, longitude: document.getElementById('longitude').value };
                        setPosition(viewer, newLngLat);
                    });

                    document.querySelector('#setTiltBtn').addEventListener('click', (event) => {
                        setTilt(viewer, document.getElementById('tilt').value);
                    });

                    document.querySelector('#setPanBtn').addEventListener('click', (event) => {
                        setPan(viewer, document.getElementById('pan').value);
                    });

                    document.querySelector('#setFovBtn').addEventListener('click', (event) => {
                        setFov(viewer, document.getElementById('fov').value);
                    });
                },
            );
        }

        main();

        function goToJakartownsWebApp() {
            const latitude = document.getElementById('latitude').value;
            const longitude = document.getElementById('longitude').value;
            const tilt = document.getElementById('tilt').value || '0';
            const pan = document.getElementById('pan').value || '0';
            const fov = document.getElementById('fov').value || '90';

            const url = `https://maps.jakarto.com/?lat=${latitude}&lng=${longitude}&pan=${pan}&tilt=${tilt}&fov=${fov}`;
            window.open(url, '_blank');
        }

        const goToJakartownsBtn = document.getElementById('goToJakartownsBtn');
        goToJakartownsBtn.addEventListener('click', goToJakartownsWebApp);

    </script>
</body>

</html>
💻
🚀
ce lien
Capture d'écran du rendu obtenu avec le code ci-dessous.