Geek Answers Handbook

How can I create layer.control in leaflet.js?

I am trying to change the default dropdown menu menu icon in a level control. I would like to have text next to the icon. Is there any way to do this? Perhaps using jQuery and CSS?

I am working on a brochure project based on this example: 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>

+4
source share
4 answers

Add this style after leaflet.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>
+6
source

You can use HTML and you can change the text when you define the base layers of dans overlays.

Example:

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
};
+3
source

Jquery,

 $(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();

 });
});
+2

, , -, , , ( ).

, , ACTUALLY WORKS - "" https://github.com/leaflet-extras/leaflet-providers. , , -, , , , Leaflet...

+1

More articles:


All Articles