Gérer les fonds de plans

Dans cette partie nous allons utiliser notre interface utilisateur pour pouvoir changer de fond de plan.

Qu'est ce qu'un fond de plan

Les tuiles de fond de plan correspondent à des images qui sont affichées pour représenter la carte du monde, il en existe plusieurs types notamment des cartes où on voit les villes et les routes ou des cartes satellites. Par défaut nous avons utilisé OpenStreetMap mais sachez qu’il en existe beaucoup d’autres qui sont répertoriés ici.

Un fond de plan très Métal :)
Un fond de plan très Métal :)

Utiliser un fond de plan satelite

Dans notre précédent chapitre nous utilisons le fond de plan d’OpenStreetMap comme ceci : 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Si nous utilisons à la place ceci :

L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'ArcGIS'
}).addTo(map);

Nous obtenons une carte avec un fond de plan satellite fournie par ArcGis

Action de changement de fond de plan

Nous allons maintenant ajouter un bouton pour changer dynamiquement de fond de plan, la première étape va être d’ajouter un nouveau bouton avec l’icône ci-dessous.

map-solid.svg
map-solid.svg

D’abort on change d’initialisation de notre tile et on définie une variable qui nous permettra de savoir sur quel tile on est actuellement.

let selectedTile = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

let tileType = "OpenStreetMap";

On crée un nouveau bouton comme dans le chapitre précédent qui appelle une méthode changeBackground:

    var buttonBackground = L.DomUtil.create('button', 'my-button-class', div);

    let myBackground = L.DomUtil.create('img', '', buttonBackground);
    myBackground.src = "img/map-solid.svg";
    myBackground.style = "margin-left:0px;width:20px;height:20px";

   L.DomEvent.on(buttonBackground, 'click', function() { this.changeBackground(); }, this);

On crée notre méthode changeBackgroundqui met à jour le layer selon le type précédent de layer

  changeBackground()
  {
    this.map.removeLayer(selectedTile);
    
    if(tileType == "OpenStreetMap")
    {
      tileType = "ArcGis";
      
      selectedTile = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'ArcGIS'
      }).addTo(this.map);
    }
    else
    {
      tileType = "OpenStreetMap";
      
      selectedTile = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
    }
  },

Enfin on modifie le CSS de nos boutons pour avoir un bon affichage

.my-button-class
{
	padding : 2px;
	display : block;
	border-radius : 0px;
}

Maintenant que nous savons comment changer de fond de plan, nous allons créer et personnaliser des marqueurs.