AF
Problema ao incluir uma div de legenda
Boa noite a todos.
Estou tentando incluir uma legenda dentro de uma div.
Estou utilizando o código abaixo:
TScript::create("
/*Carrega a legenda */
var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 100, 300, 500, 1200],
labels = [];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
}
return div;
}
legend.addTo(mapa);
");
O problema é ao trabalhar no estilo da div abaixo:
div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
O backgroup fica como string e o código acusa erro.
Agradeço qualquer ajuda.
Atenciosamente,
Ailton Furtado.
Estou tentando incluir uma legenda dentro de uma div.
Estou utilizando o código abaixo:
TScript::create("
/*Carrega a legenda */
var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 100, 300, 500, 1200],
labels = [];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
}
return div;
}
legend.addTo(mapa);
");
O problema é ao trabalhar no estilo da div abaixo:
div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
O backgroup fica como string e o código acusa erro.
Agradeço qualquer ajuda.
Atenciosamente,
Ailton Furtado.
Provavelmente seja problema de escape das aspas. Tente adaptar o exemplo usando a sintaxe heredoc do php:
https://www.php.net/manual/pt_BR/language.types.string.php
Boa noite Nataniel.
Muito obrigado pela sua gentileza. Funcionou e corrigi o problema.
Mas aconteceu outro problema: Uncaught SyntaxError: Unexpected end of input
E ele encontra-se aqui:
var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {
}
legend.addTo(mapa);
Fiz o teste removendo essa parte do código
legend.onAdd = function (map) {
}
e o erro não ocorreu.
Esse código funciona perfeitamente, fora do framework e estou migrando essa parte de sigweb para dentro do framework.
Mais uma vez agradeço sua gentileza.
Caso seja necessário abri outro post, não há problema, o farei.
Ailton Furtado.
Tentou colocar ponto-e-vírgula no fechamento da função?
Bom dia Nataniel. Em primeiro lugar, agradeço sua gentileza em me auxiliar.
Vamos lá, já tinha feito isso e também não resolveu. Coloquei o ponto e vírgula e o mantive agora. Segue abaixo como o código está no momento para sua avaliação:
Lembrando que tirando essas duas linha, ele funciona e não acusa erro no que está entre as chaves, mas infelizmente não inclui a legenda que preciso :
legenda.onAdd = function(mapa) {
};
TScript::create("
/*Faz a classificação de acordo com a variável*/
function getColor(d) {
return d > 1200 ? '#E31A1C' :
d <= 1200 && d > 500 ? '#FC4E4A' :
d <= 500 && d > 300 ? '#FC4E2A' :
d <= 300 && d > 100 ? '#FD8D3C' :
d <= 100 && d >= 0 ? '#FEB24C' :
'#FFEDA0' ;
}
/*Estilo do mapa e chamada da função de classificação*/
function style(feature) {
return {
fillColor: getColor(feature.properties.FUNDAMENTA),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
/*Criação da variável que será utilizada como camada base*/
var camada_base = L.tileLayer('{s}.tile.osm.org/{z}/{x}/{y}.png');
/*Criação da variável mapa e a localização onde o mapa será centralizado e o nível do zoom*/
var mapa = L.map('mapa',{layers:[camada_base]}).setView([-22.903719, -43.1760605], 7);
/*Criação da variável da camada fundamental que ficará sobreposta a camada base*/
var fundamental = new L.geoJSON(geo_fundamental,{onEachFeature:function(feature,layer) {
layer.bindPopup(feature.properties.GEOCODIGO+'<br />'+feature.properties.NOME+'<br /> Fundamental: '+feature.properties.FUNDAMENTA);
},style:style});
/*Criação da variável da camada fundamental que ficará sobreposta a camada base*/
var plano = new L.geoJSON(geo_plano,{onEachFeature:function(feature,layer) {
layer.bindPopup(feature.properties.GEOCODIGO+'<br />'+feature.properties.NOME+'<br /> Plano de Carreira: '+feature.properties.PCARREIRA);
}});
var baseLayers = {'Mundo': camada_base};
var overlays = {'Fundamental' : fundamental, 'Carreira' : plano};
L.control.layers(baseLayers,overlays).addTo(mapa);
fundamental.addTo(mapa);
/*Carrega a legenda */
var legenda = L.control({position: 'topright'});
legenda.onAdd = function(mapa) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 100, 300, 500, 1200],
labels = [];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
}
return div;
};
legenda.addTo(mapa);
");
Coloquei vírgula no laço do for também para testar e também não funcionou.
Atenciosamente,
Ailton Furtado.
Boa tarde Nataniel.
Descobri o problema. Rsrsrsrs
Era o comentário. Rsrsrsr
// loop through our density intervals and generate a label with a colored square for each interval
Como lhe falei o código funciona certinho fora do framework, portanto não me preocupei com isso. Rsrsrsr
A impressão da legenda funcionou, mas o estilo não imprimiu a cor da legenda que é aqui:
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
A legenda imprimiu os números, mas o teria que imprimir a cor de cada legenda no backgroup e no framework não fez.
Mais uma vez obrigado pela sua atenção.
Ailton Furtado.
Bom dia Nataniel.
Em primeiro lugar, agradeço sua atenção e apoio nas minhas dúvidas.
Hoje pude voltar à tona no problema e solucionei o mesmo.
A inclusão da legenda ficou certinha.
Fiz a inclusão no css que ficou da seguinte forma:
div.innerHTML +=
'<i style="width: 16px; height:16px; float:left;
margin-right: 8px;opacity: 0.7; background:' + getColor(grades[i] + 1) + '"> '
+ grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
A legenda apareceu no lugar certo e com os respectivos valores/imagem.
Atenciosamente,
Ailton Furtado.