Développer un customControl

Les Customs Controls permettent de créer des interactions entre l’utilisateur et un layer. Si on souhaite créer une nouvelle fonctionnalité en lien avec une couche particulière, c’est la solution à privilégier. Le mécanisme de customControl permet le développement à façon de solution nouvelle sans modifier le coeur de mviewer.

Convention

Un custom control consiste en deux fichiers - JavaScript et HTML. Ces deux fichiers doivent impérativement respecter la règle de nommage suivante :

  • layerid.html

  • layerid.js

  • où layerid correspond à l’id du layer tel que définit dans le config.xml.

L’emplacement de ces fichiers doit être précisé dans le config.xml avec le paramètre customcontrolpath=""

heatmap

Ecrire le code - html

Le bloc écrit en HTML s’affichera dans le panneau légende associé à la couche. Il est possible de créer des éléments HTML qui permettront à l’utilisateur d’interagir avec la couche associée. Dans l’exemple suivant, on affiche deux sliders qui vont nous permettre de modifier dynamiquement l’affichage de notre couche.

customcontrol.html
<form>
    <label>radius size</label>
    <input id="heatmap-radius" class="" type="range" min="1" max="50" step="1" value="10"/>
    <label>blur size</label>
    <input id="heatmap-blur" type="range" min="1" max="50" step="1" value="10"/>
</form>

Tooltip

Si vous souhaitez utiliser une infobulle (tooltip), vous pouvez utiliser les paramètres title et tooltip :

customcontrol.html
<button tooltip="top,hover,true,body,mviewer.templates.tooltip" title="Déplacement en voiture">
Paramètres à utiliser :

Paramètre

Description

Exemple

tooltip

Permet de définir les options de la tooltip

<placement - string>, <trigger - string>, <html - boolean>, <container - string>, <template, string>

title

Texte affiché

title=”Déplacement en voiture”

Ecrire le code - JavaScript

Ancienne méthode

La ligne 2 surlignée indique la notation propre à l’ancienne méthode.

customcontrol.js
 1const layerid = "heatmap";
 2mviewer.customControls[layerid] = (function() {
 3
 4    /*
 5    * Private
 6    */
 7
 8    var _initialized = false;
 9
10    var _layer;
11
12    var _blurElement = false;
13
14    var _radiusElement = false;
15
16    var _blurHandler = function(e) {
17        _layer.setBlur(parseInt(e.target.value, 10));
18    };
19
20    var _radiusHandler = function(e) {
21        _layer.setRadius(parseInt(e.target.value, 10));
22    };
23
24    return {
25        /*
26        * Public
27        */
28
29        init: function () {
30            // mandatory - code executed when layer is added to legend panel
31            if (!_initialized) {
32                _layer = mviewer.getLayer(layerid).layer;
33                _blurElement = document.getElementById('heatmap-blur');
34                _radiusElement = document.getElementById('heatmap-radius');
35                if (_blurElement && _radiusElement) {
36                    _blurElement.addEventListener('change', _blurHandler);
37                    _radiusElement.addEventListener('change', _radiusHandler);
38                    _initialized = true;
39                }
40
41            }
42        },
43
44        destroy: function () {
45            // mandatory - code executed when layer panel is closed
46            _initialized = false;
47        }
48    };
49
50}());

Nouvelle méthode

Depuis la version 3.2 de mviewer, une classe CustomControl a été développée afin de faciliter la saisie de nouveaux customControls. Les 2 lignes surlignées (2, 51) indiquent les lignes modifiées par rapport à l’ancienne méthode.

customcontrol.js
 1const layerid = "heatmap";
 2const cc = (function() {
 3
 4    /*
 5    * Private
 6    */
 7
 8    var _initialized = false;
 9
10    var _layer;
11
12    var _blurElement = false;
13
14    var _radiusElement = false;
15
16    var _blurHandler = function(e) {
17        _layer.setBlur(parseInt(e.target.value, 10));
18    };
19
20    var _radiusHandler = function(e) {
21        _layer.setRadius(parseInt(e.target.value, 10));
22    };
23
24    return {
25        /*
26        * Public
27        */
28
29        init: function () {
30            // mandatory - code executed when layer is added to legend panel
31            if (!_initialized) {
32                _layer = mviewer.getLayer(layerid).layer;
33                _blurElement = document.getElementById('heatmap-blur');
34                _radiusElement = document.getElementById('heatmap-radius');
35                if (_blurElement && _radiusElement) {
36                    _blurElement.addEventListener('change', _blurHandler);
37                    _radiusElement.addEventListener('change', _radiusHandler);
38                    _initialized = true;
39                }
40
41            }
42        },
43
44        destroy: function () {
45            // mandatory - code executed when layer panel is closed
46            _initialized = false;
47        }
48    };
49
50}());
51new CustomControl(layerid, cc.init, cc.destroy);

Avertissement

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

Ecrire le config.xml

Dans le fichier de configuration, à partir de l’exemple customLayer heatmap, il faut ajouter les 3 lignes mises en surbrillance.

config.xml
<layer id="heatmap"
    name="Earthquakes Heatmap"
    visible="true"
    url="demo/heatmap/customlayer.js"
    queryable="true"
    type="customlayer"
    customcontrol="true"
    customcontrolpath="demo/heatmap/control"
    legendurl="demo/heatmap/legend.png"
    opacity="1"
    expanded="true"
    attribution=""
    metadata=""
    metadata-csw="">
</layer>

Note

Pour aller plus loin :