Créer des contrôles personnalisés pour Mapbox GL JS

Mapbox GL JS est une librairie Javascript destinée à générer des cartes dynamiques pour vos applications web ou mobiles. Si elle est très puissante, sa documentation laisse parfois à désirer, contrairement à Leaflet JS, bien plus didactique.

Par exemple, pour créer des contrôles personnalisés, la documentation ne vous sera d’aucune utilité (du moins dans sa version d’avril 2018).

Après quelques décorticages de code (finalement la meilleure documentation qui soit), je suis parvenu à en extraire la substantifique moelle. Ci-dessous, les bouts de code nécessaires pour générer un contrôle de carte très simple : un bouton (avec un icône issu de https://material.io/ ) et une action au click.

Créer votre contrôle personnalisé :

class MyControl {	
	constructor(){
		this.onClick = this._onClick.bind(this);
	}	
	onAdd(map){
		this.map = map;
		var el = this.container = document.createElement('div');
		el.className = 'mapboxgl-mycontrol mapboxgl-ctrl mapboxgl-ctrl-group';
	
		var button = document.createElement('button');
		button.setAttribute('type','button');
		button.addEventListener('click', this.onClick, false);
		el.appendChild(button);
	 
		var icon = document.createElement('i');
		icon.className = 'material-icons';
		icon.textContent = 'directions';
		button.appendChild(icon);	
		return el;		
	}
	onRemove(map){
		this.container.parentNode.removeChild(this.container);
		this.map = undefined;			
	}
	_onClick(){
		// mon action
			
	}			
}

Déclarer votre contrôle :

map.addControl(new MyControl(), 'top-right');