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');

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.