Comment puis-je style de calque.de contrôle dans leaflet.js?

Je suis en train de changer la valeur par défaut menu déroulant de l'icône dans la couche de contrôle. J'aimerais avoir le texte à côté de l'icône. Est-il possible de faire cela? Peut-être à l'aide de JQuery et CSS?

Je suis en train de travailler sur un projet de fiche basé sur cet exemple: http://leafletjs.com/examples/layers-control.html

Code:

<html>
<head>
    <title>Leaflet Layers Control Example</title>
        <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../dist/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="../dist/leaflet.js"></script>
    <script>
        var cities = new L.LayerGroup();

        L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
        L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
        L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
        L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


        var cmAttr = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 Clou   dMade',
        cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';

    var minimal   = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}),
        midnight  = L.tileLayer(cmUrl, {styleId: 999,   attribution: cmAttr}),
        motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr});

    var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [minimal, motorways, cities]
    });

    var baseLayers = {
        "Minimal": minimal,
        "Night View": midnight
    };

    var overlays = {
        "Motorways": motorways,
        "Cities": cities
    };

    L.control.layers(baseLayers, overlays).addTo(map);
</script>

OriginalL'auteur user3187911 | 2014-01-12

  1. 6

    Ajouter ce style après dépliant.css:

    <style>
.leaflet-control-layers-toggle:after{ 
    content:"your text"; 
    color:#000 ;
}
.leaflet-control-layers-toggle{ 
    width:auto;
    background-position:3px 50% ;
    padding:3px;
    padding-left:36px;
    text-decoration:none;
    line-height:36px;

}
</style>
    Merci. Dommage que l'OP n'a pas pris la peine de choisir ce que la réponse. Comment pourrais-je aller sur le changement de cet "après" contenu via jQuery?
    texte');});

    OriginalL'auteur Dr.Molle

  2. 3

    Vous pouvez utiliser du HTML et vous pouvez changer le texte lorsque vous définissez baselayers dans des superpositions.

    Exemple:

    var baseLayers = {
    "<div id='my-div-id'><img src='img/icon-minimal.png' />Minimal View</div>": minimal,
    "<div id='my-div-id'><img src='img/icon-night.png' />Super Night View</div>": midnight
};

var overlays = {
    "<img src='myimage.png' /> Motorways": motorways,
    "<img src='myimage2.png' /> All Cities": cities
};

    OriginalL'auteur bsuttor

  3. 2

    Si vous utilisez Jquery, vous pouvez l'ajouter au document de prêt de la section

     $(document).ready(function () {

 $('.leaflet-control-layers').css({ 'width': 'auto', 'float': 'left' });
 $('.leaflet-control-layers-toggle').css('float', 'left');
 $('.leaflet-control-layers-toggle').after('<div class='control-extend'>Your text goes here</div>')
 $('.control-extend').css({ 'float': 'left', 'line-height': '35px', 'font-weight': 'bold', 'margin-right' : '10px'});

 $('.leaflet-control-layers').on('mouseover', function (e) {
 $('.control-extend').hide();

 });

 $('.leaflet-control-layers').on('mouseout', function (e) {
 $('.control-extend').show();

 });
});

    OriginalL'auteur AMunk

  4. 1

    Cela ne fonctionne pas car il n'y a apparemment aucun moyen de contrôler l'espacement vertical entre les boutons de la radio, ce qui signifie que les boutons ne sont pas alignées avec les étiquettes (et les images).

    Le seul exemple de ce genre de chose que j'ai vu qui FONCTIONNE RÉELLEMENT est dans la Notice Fournisseurs de plug-in page de démonstration dans le paquet à https://github.com/leaflet-extras/leaflet-providers. Ce qu'il a apparemment fait est de placer le bouton radio et de l'étiquette sur une superposition au-dessus de la véritable couche de contrôle, un peu comme la Notice d'attribution de superposition en bas à droite de la plupart Dépliant de cartes...

    OriginalL'auteur user3233010