Développer un Custom component

Exemple de customcomponent

L’ojectif est ici de créer un bouton dont la fonction est d’afficher la carte en mode « plein écran » en utilisant l’API html 5 requestFullscreen.

/ demo/addons
        │
        ├── fullscreen
        │      │
        │      ├── config.json
        │      ├── fullscreen.js
        │      ├── fullscreen.html
        │      ├── style.css

L’exemple complet est disponible sur github.

Ecrire le code html

Le code html est la partie visible du composant. Le code html sera intégré par mviewer et « dessiné » dans la div ciblée via le fichier config.json. Dans le cas présent on créé un simple bouton avec une icône fontawesome;

fullscreen.html
<a class="btn btn-default btn-raised" type="button" id="fullscreen-btn">
    <span class="fas fa-expand"></span>
</a>

Ecrire le code javascript

Le code javascript est la partie logique de notre composant. Dans lexemple ci-dessous, on associe une fonction à l’évènement click du bouton créé précédemment.

fullscreen.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
const fullscreen = (function() {

    var _btn;
    var _fullscreen = function (e) {
        document.getElementById("map").requestFullscreen();
    };

    return {

        init : function () {
            _btn = document.getElementById("fullscreen-btn");
            _btn.addEventListener('click', _fullscreen);
        }
    };

})();

new CustomComponent("fullscreen", fullscreen.init);

Avertissement

Si on souhaite disposer d’un bloc de code publique, il faut remplacer la ligne const fullscreen = (function() { par var fullscreen = (function() {

Ecrire le code css

Le code css permet d’affiner le style de notre bouton.

style.css
#fullscreen-btn {
    border-radius: 0px;
    padding: 5px 10px 5px 10px;
}

Ecrire le config.json

Dans le fichier de configuration - config.json - , il faut référencer toutes les ressources utiles. le paramètre target permet de cibler la div dans laquelle le composant sera affiché.

config.json
{
    "js": ["fullscreen.js"],
    "css": "style.css",
    "html": "fullscreen.html",
    "target": "toolstoolbar"
}

Ecrire le config.xml

Dans le fichier de configuration, il faut ajouter la ligne en surbrillance.

config.xml
<extensions>
    <extension type="component" id="fullscreen" path="demo/addons"/>
</extensions>

Note

Pour aller plus loin :