Configurer - Custom Component¶
Pour quoi faire ?¶
On utilise les composants personnalisés pour modifier l’apparence de mviewer, ajouter des fonctionnalités sans modifier le coeur de mviewer. Il est ainsi possible de créer un composant très simple pour :
- afficher un logo dans une zone particulière
- ajouter un nouveau bouton dans la barre de navigation mviewer
- Créer un sélecteur temporel qui répercutera la sélection à l’ensemble des couches…
Comment faire ?¶
Un composant personnalisé - customComponent - est un dossier physique disposant d’un fichier obligatoire config.json
qui identifie toutes les ressources à charger. Les ressources sont de 3 types :
html
–> html à chargercss
–> feuille de style à chargerjs
–> liste de fichiers javascripts à charger
Exemple d’arborescence :
/demo
├── components
│ ├── 3d
│ │ ├── js
│ │ │ ├── lib.js
│ │ │ └── main.js
│ │ │
│ │ ├── config.json
│ │ ├── component.html
│ │ ├── style.css
│ │
│ ├── autre_customComponent
Exemple de fichier config.json :
1 2 3 4 5 6 7 8 9 10 11 12 | {
"js": [
"js/lib.js",
"js/main.js"
],
"css": "style.css",
"html": "component.html",
"target": "map",
"options": {
"title": "3D"
}
}
|
Le composant sera alors créé dans une div mviewer existante ciblée par le paramètre target
extrait de configuration xml :
1 2 3 4 5 | <config>
<extensions>
<extension type="component" id="3d" path="demo/components"/>
</extensions>
</config>
|