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.
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: '© <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.
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: '© <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: '© <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.