SITN tutoriel API Étendue

Ce tutoriel vous montre comment insérer dans votre site web une carte provenant du SITN en 2 minutes à l''aide de l''API Étendue du STIN

1. Créer une page HTML vide

Créer une page web vide carte.html et placer la dans le dossier de votre environnement de développement. Vérifier que vous pouvez l'appeller en passant par http://localhost/carte.html.

        
        <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
        <html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
            <head>
                <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
                <title>Ma première carte SITN</title>
            </head>
            <body>
                <h1>Ceci est ma première carte</h1>
            </body>
        </html>
        
        

2. Ajouter le chargement de l'API du SITN

Ajouter une balise script pour charger l'API. Ce script va charger tout le code Javascript et CSS nécessaire pour créer la carte.


        <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
        <html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
            <head>
                <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
                <title>Ma première carte SITN</title>
                <script type='text/javascript' src='http://sitn.ne.ch/production/wsgi/xapi.js?lang=fr'>/></script>
            </head>
            <body>
                <h1>Ceci est ma première carte</h1>
            </body>
        </html>
        

3. Créer une fonction Javascript qui initialise la carte

Dans l'en-tête (<head>) de votre page HTML, insérer une fonction Javascript qui va créer une carte.


        <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
        <html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
            <head>
                <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
                <title>Ma première carte SITN</title>
                <script type='text/javascript' src='http://sitn.ne.ch/production/wsgi/xapi.js?lang=fr'></script>
                <script type='text/javascript'>
                function init(){
                 var map = new sitn.Map({
                 div: 'map1',// id de l'élément contenant la carte
                 zoom:8, // niveau de zoom au chargement de la page
                 center: [2544500, 1210100] // centre de la carte
                 });
                 }
                </script>
            </head>
            <body>
                <h1>Ceci est ma première carte</h1>
            </body>
        </html>
        

4. Ajouter une balise <div> où la carte doit s'afficher.

Dans la partie <body> dans votre page, ajouter une balise <div> avec id='map1'. Le rendu de la carte se fera ainsi à l'intérieur de cette balise.


        <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
        <html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
            <title>Ma première carte SITN</title>
            <script type='text/javascript' src='http://sitn.ne.ch/production/wsgi/xapi.js?lang=fr'></script>
            <script type='text/javascript'>
            function init(){
                var map = new sitn.Map({
                div: 'map1', // id de l'élément contenant la carte
                zoom:8, // niveau de zoom au chargement de la page
                center: [2544500, 1210100] // centre de la carte
                    });
                }
            </script>
        </head>
        <body>
            <h1>Ceci est ma première carte</h1>
        <div id='map1' style='width:700px;height:400px;'></div>
        </body>
        </html>
        

5. Initialiser la carte

Finalement, ajouter onload='init();' à l'intérieur de votre balise <body> afin d'exécuter le Javascript lors du chargement de votre page.


        <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
        <html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
            <head>
                <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
                <title>Ma première carte SITN</title>
                <script type='text/javascript' src='http://sitn.ne.ch/production/wsgi/xapi.js?lang=fr'></script>
                <script type='text/javascript'>
                function init(){
                    var map = new sitn.Map({
                    div: 'map1', // id de l'élément contenant la carte
                    zoom:8, // niveau de zoom au chargement de la page
                    center: [2544500, 1210100] // centre de la carte
                        });
                    }
                </script>
            </head>
            <body onload='init()'>
                <h1>Ceci est ma première carte</h1>
            <div id='map1' style='width:700px;height:400px;'></div>
            </body>
        </html>
        

6. Tester votre carte

Dans votre navigateur: http://localhost/carte.html