Menu
I am trying to change the default dropdown menu icon in the layer control. I'd like to have text alongside the icon. Is there any way to do this? Perhaps using JQuery and CSS?
I'm working on a leaflet 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 © 2011 OpenStreetMap contributors, Imagery © 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>
585
Used to load and display tile layers on the map, implements ILayer interface.
In Leaflet, a “layer” is anything that moves with the map. In contraposition to that, a “control” is a HTML element that remains static relative to the map container, and a “handler” is a piece of invisible code that changes the map's behaviour.
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>
You can use HTML and you can change text when you define baselayers 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
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
