Annonce
#1 Fri 18 December 2015 14:56
- mlt
- Participant actif
- Date d'inscription: 14 Oct 2015
- Messages: 59
CSS et leaflet
Bonjour,
Je cherche à aligner ma légende avec les BaseMaps (choix de mes couches).
Voici ma carte actuelle:
[img]http://zenk.chapelin.fr/leaflet_css.png[/img]
Ma légende est en plein milieu, je voudrais qu'elle soit tout en bas, aligné avec les choix de cartes (seuil 0, etc).
Avec un petit code css, ça doit être faisable non ? Dans la doc je trouve rien sur ce sujet....
Le code de ma légende:
Code:
var legende = '<div class="legende"><table><tr style="padding-bottom: 50px;"><td style="background-color: rgba(26,150,0, 0.7);" width="20"></td><td style="padding-right: 10px;"> 0 jours de gel </td><td style="background-color: rgba(31,120,180, 0.7);" width="20"></td><td style="padding-right: 10px;"> 1 jours de gel </td><td style="background-color: rgba(166,206,227, 0.7);" width="20"></td><td style="padding-right: 10px;"> 2 jours de gel </td><td style="background-color: rgba(254,222,0, 0.7);" width="20"></td><td style="padding-right: 10px;"> 3 jours de gel </td><td style="background-color: rgba(245,144,83, 0.7);" width="20"></td><td style="padding-right: 10px;"> 4 jours de gel </td><td style="background-color: rgba(215,25,28, 0.7);" width="20"></td><td style="padding-right: 10px;"> 5 jours de gel </td></tr></table></div>' this._div.innerHTML = legende; return this._div;
J'ai crée une div legende pour pouvoir la personnaliser.
Le code de mes rasters:
Code:
L.control.layers(baseMaps, {}, {collapsed: false, position: 'bottomright'}).addTo(map);Quelqu'un a une idée pour "descendre cette légende en bas de l'écran ?
Merci 
J'en profite pour une deuxième petite question:
J'initialise comme ceci:
Code:
var baseMaps = {
"seuil 0°C": raster,
"seuil -0.5°C": raster2,
"seuil -1.0°C": raster3,
"seuil -1.5°C": raster4,
"seuil -2.0°C": raster5,
"seuil -2.5°C": raster6,
"seuil -3.0°C": raster7,
"seuil -3.5°C": raster8,
"seuil -4.0°C": raster9,
"seuil -4.5°C": raster10,
"seuil -5.0°C": raster11
};Est-il possible de récupérer les noms des couches (exemple seuil 0°C) sélectionnées, pour ensuite l'afficher dans le titre par exemple ?
Sur cette carte http://leafletjs.com/examples/choropleth-example.html , le nombre de population est récupérer, moi je veux faire pareil avec mes titres de couche.
Dernière modification par mlt (Fri 18 December 2015 15:03)
Hors ligne
#2 Fri 18 December 2015 15:25
Re: CSS et leaflet
Bonjour,
Pour le positionnement de votre légende, vous pouvez ajouter ces paramètres au style de votre div légende.
Code:
position : fixed; bottom : 40px; left : 10px;
Hors ligne
#3 Fri 18 December 2015 15:30
- mlt
- Participant actif
- Date d'inscription: 14 Oct 2015
- Messages: 59
Re: CSS et leaflet
Merci ça fonctionne.
Je pensais qu'il y avait une autre méthode.
Hors ligne
#4 Fri 18 December 2015 15:38
Re: CSS et leaflet
Oui, il y a toujours d'autres méthodes. Surtout en matière de positionnement CSS.
Vous devriez pouvoir utiliser un paramètre prédéfini et reconnu par Leaflet.
J'ai été au plus rapide.
Hors ligne
#5 Fri 18 December 2015 15:53
- mlt
- Participant actif
- Date d'inscription: 14 Oct 2015
- Messages: 59
Re: CSS et leaflet
Quand je fais "examiner l'élément" sous firefox, on voit le nom des class, par exemple .leaflet-control-layers. Si on mes du css, en utilisant ces noms, je suppose que ça fonctionne non ?
Hors ligne
