davicustodio
<label> tag within layers</label>
Thanks a lot for this nice layercontrol! Where can I put a label tag layername (e.g. Corn Plant) within, like for the groupName (e.g. Belo Horizonte), so that the labels are within the clickable area, and not only the radiobuttons... Best regards...Michelinho
OK. This may be possible if you change the following code block: https://github.com/davicustodio/Leaflet.StyledLayerControl/blob/master/src/styledLayerControl.js#L264-L276
However, you need to implement as would be the select / deselect the layers. May also need to change the css class applied to the label to ensure it works as a checkbox in link format.
Hope this helps.
Thanks for your hints. I meant, that it's possible to click not only the checkbutton but also the labels aside of them, like in the original leaflet layer structure. I'm not firm in such programmings, a friend of mine solved it via jquery, may have a look at the end of the attachted html file. Nevertheless, thanks a lot for your useful, structured layercontrol.
Best regards, Michelinho
Gesendet: Freitag, 30. Januar 2015 um 19:52 Uhr Von: "Davi Custodio" [email protected] An: "davicustodio/Leaflet.StyledLayerControl" [email protected] Cc: Michelinho [email protected] Betreff: Re: [Leaflet.StyledLayerControl] (#2)
OK. This may be possible if you change the following code block: https://github.com/davicustodio/Leaflet.StyledLayerControl/blob/master/src/styledLayerControl.js#L264-L276
However, you need to implement as would be the select / deselect the layers. May also need to change the css class applied to the label to ensure it works as a checkbox in link format.
Hope this helps.
— Reply to this email directly or view it on GitHub.
#map {
width:100%;
height:100%;
}
.leaflet-google-layer{
z-index: 0;
}
.leaflet-map-pane{
z-index: 100;
}
// Google layers
var g_roadmap = new L.Google('ROADMAP');
var g_satellite = new L.Google('SATELLITE');
var g_terrain = new L.Google('TERRAIN');
// OSM layers
var osmUrl='http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
// Bing layers
var bing1 = new L.BingLayer("AvZ2Z8Jve41V_bnPTe2mw4Xi8YWTyj2eT87tSGSsezrYWiyaj0ldMaVdkyf8aik6", {type: 'Aerial'});
var bing2 = new L.BingLayer("AvZ2Z8Jve41V_bnPTe2mw4Xi8YWTyj2eT87tSGSsezrYWiyaj0ldMaVdkyf8aik6", {type: 'Road'});
// Sao Paulo Soybeans Plant
var soybeans_sp = new L.LayerGroup();
L.marker([-22, -49.80]).addTo(soybeans_sp),
L.marker([-23, -49.10]).addTo(soybeans_sp),
L.marker([-21, -49.50]).addTo(soybeans_sp);
// Sao Paulo Corn Plant
var corn_sp = new L.LayerGroup();
L.marker([-22, -48.10]).addTo(corn_sp),
L.marker([-21, -48.60]).addTo(corn_sp);
// Rio de Janeiro Bean Plant
var bean_rj = new L.LayerGroup();
L.marker([-22, -42.10]).addTo(bean_rj),
L.marker([-23, -42.78]).addTo(bean_rj);
// Rio de Janeiro Corn Plant
var corn_rj = new L.LayerGroup();
L.marker([-22, -43.20]).addTo(corn_rj),
L.marker([-23, -43.50]).addTo(corn_rj);
// Rio de Janeiro Rice Plant
var rice_rj = new L.LayerGroup();
L.marker([-22, -42.90]).addTo(rice_rj),
L.marker([-22, -42.67]).addTo(rice_rj),
L.marker([-23, -42.67]).addTo(rice_rj);
// Belo Horizonte Sugar Cane Plant
var sugar_bh = new L.LayerGroup();
L.marker([-19, -44.90]).addTo(sugar_bh),
L.marker([-19, -44.67]).addTo(sugar_bh);
// Belo Horizonte Corn Plant
var corn_bh = new L.LayerGroup();
L.marker([-19.45, -45.90]).addTo(corn_bh),
L.marker([-19.33, -45.67]).addTo(corn_bh);
var map = L.map('map', {
center: [-16, -54],
zoom: 4
});
map.addLayer(g_roadmap);
var baseMaps = [
{
groupName : "Google Base Maps",
expanded : true,
layers : {
"Satellite" : g_satellite,
"Road Map" : g_roadmap,
"Terreno" : g_terrain
}
}, {
groupName : "OSM Base Maps",
layers : {
"OpenStreetMaps" : osm
}
}/*, {
groupName : "Bing Base Maps",
layers : {
"Satellite" : bing1,
"Road" : bing2
}
} */
];
var overlays = [
{
groupName : "Sao Paulo",
expanded : true,
layers : {
"Soybeans Plant" : soybeans_sp,
"Corn Plant" : corn_sp
}
}, {
groupName : "Rio de Janeiro",
expanded : true,
layers : {
"Bean Plant" : bean_rj,
"Corn Plant" : corn_rj,
"Rice Plant" : rice_rj
}
}, {
groupName : "Belo Horizonte",
layers : {
"Sugar Cane Plant" : sugar_bh
}
}
];
// configure StyledLayerControl options for the layer soybeans_sp
soybeans_sp.StyledLayerControl = {
removable : true,
}
var options = {
container_width : "300px",
group_maxHeight : "80px",
//container_maxHeight : "350px",
exclusive : false,
collapsed : false // CHANGE: kollabierende controls können nerven!
};
var control = L.Control.styledLayerControl(baseMaps, overlays, options);
map.addControl(control);
// test for adding new base layers dynamically
// to create a new group simply add a layer with new group name
control.addBaseLayer( bing1, "Bing Satellite", {groupName : "Bing Maps", expanded: true} );
control.addBaseLayer( bing2, "Bing Road", {groupName : "Bing Maps"} );
// test for adding new overlay layers dynamically
control.addOverlay( corn_bh, "Corn Plant", {groupName : "Belo Horizonte"} );
//control.removeLayer( corn_sp );
//control.removeGroup( "Rio de Janeiro");
var popup = L.popup()
.setLatLng([-16, -54])
.setContent("The data that appears in this application are fictitious and do not represent actual data!")
.openOn(map);
// CHANGE: Der eigentliche Code
$(document).ready(function() { // Standard JQuery -> warte bis alles geladen ist
$(".leaflet-control-layers").delegate(".menu-item-checkbox", "click", function(event) { // normalerweise würde ein .click() ausreichen, da die
// Klassen bei der Initialisierung nicht existieren
// mit .delegate()
if (event.target.type !== 'checkbox') { // Checken ob checkbox geklickt, da sonst die Box selbst nicht mehr funktioniert
var input = $(this).find("input[type='checkbox']"); // Suche die Box
input.trigger($.Event("click")); // Programmatisches auslösen eines click Events
}
});
// Analog zu oben, es ändern sich nur:
$(".leaflet-control-layers").delegate(".menu-item-radio", "click", function(event) { // Anderer klassen-selektor
if (event.target.type !== "radio") { // Schließe radio aus
var input = $(this).find("input[type='radio']"); // Suche radio-buttons
input.trigger($.Event("click"));
}
});
});
