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=""

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.
<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 :
<button tooltip="top,hover,true,body,mviewer.templates.tooltip" title="Déplacement en voiture">
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.
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.
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.
<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>