Conheça Características Quem usa Galeria Cursos Docs Fórum
Downloads
Posts Fique por dentro Sobre o Fórum Minha conta
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 ou...
AF
Problema ao incluir uma div de legenda  
Ailton Furtado 18/06/2020 (há 4 anos)
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] ? '&ndash;' + 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] ? '&ndash;' + grades[i + 1] + '
' : '+');

O backgroup fica como string e o código acusa erro.

Agradeço qualquer ajuda.
Atenciosamente,
Ailton Furtado.

Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!


Dominando o Adianti Framework Quero me inscrever agora!

Comentários (6)

NR
Nataniel Rabaioli       19/06/2020 (há 4 anos)

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
AF
Ailton Furtado - AUTOR DO POST       19/06/2020 (há 4 anos)

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.


NR
Nataniel Rabaioli       22/06/2020 (há 4 anos)

Tentou colocar ponto-e-vírgula no fechamento da função? 
<?phplegend.onAdd = function (map) {};?>
AF
Ailton Furtado - AUTOR DO POST       23/06/2020 (há 4 anos)

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] ? '&ndash;' + 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.
AF
Ailton Furtado - AUTOR DO POST       23/06/2020 (há 4 anos)

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] ? '&ndash;' + 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.
AF
Ailton Furtado - AUTOR DO POST       13/07/2020 (há 4 anos)

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] ? '&ndash;' + grades[i + 1] + '
' : '+');

A legenda apareceu no lugar certo e com os respectivos valores/imagem.

Atenciosamente,
Ailton Furtado.