Hola,
Estoy mostrando en un mapa de leaflet de la siguiente forma:
Código Javascript
:
Ver original<script>
//begin no modificar -->
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© ' + osmLink + ' Contributors',
landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
thunAttrib = '© '+osmLink+' Contributors & '+thunLink;
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
var map = L.map('map', {
layers: [osmMap] // only add one! este es mapa base
})
.setView([-33.4387,-70.647], 18); //Chile
//<-- end no modificar
var baseLayers = {
"OSM Mapnik": osmMap,
"Landscape": landMap
};
/////////////////////////////////////////////////////////////////////////////////////////////
var overlays = {
'Precipitaciones': L.tileLayer.provider('OpenWeatherMap.PrecipitationClassic'),
'Lluvia': L.tileLayer.provider('OpenWeatherMap.RainClassic'),
'Presión': L.tileLayer.provider('OpenWeatherMap.Pressure'),
'Control de Presion': L.tileLayer.provider('OpenWeatherMap.PressureContour'),
'Viento': L.tileLayer.provider('OpenWeatherMap.Wind'),
'Temperatura': L.tileLayer.provider('OpenWeatherMap.Temperature')
};
/////////////////////////////////////////////////////////////////////////////////////////////
L.control.layers(baseLayers,overlays).addTo(map);
</script>
</body>
</html>
pero necesito modificar el codigo del overlay y armarlo dinamicamente, entonces tenemos:
Código Javascript
:
Ver original<script>
//begin no modificar -->
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© ' + osmLink + ' Contributors',
landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
thunAttrib = '© '+osmLink+' Contributors & '+thunLink;
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
var map = L.map('map', {
layers: [osmMap] // only add one! este es mapa base
})
.setView([-33.4387,-70.647], 18); //Chile
//<-- end no modificar
var baseLayers = {
"OSM Mapnik": osmMap,
"Landscape": landMap
};
/////////////////////////////////////////////////////////////////////////////////////////////
var overlays = {};
var item1 = "Lluvia";
var valor1 = "L.tileLayer.provider('OpenWeatherMap.PrecipitationClassic')";
var item2 = "Temperatura";
var valor2 = "L.tileLayer.provider('OpenWeatherMap.Temperature')";
overlays[item1] = valor1;
overlays[item2] = valor2;[/B][/COLOR]
/////////////////////////////////////////////////////////////////////////////////////////////
L.control.layers(baseLayers,overlays).addTo(map);
</script>
el problema es que el menu solo me muestra el ultimo item que he agregado y no se como hacerlo para que me los muestre todos