necesito ayuda con L.mapbox.legendcontrol

Question

Estoy usando mapbox.js 1.6.1 para servir .mbtiles creados en tilemill (a través de mbtiles-server.php) en un host privado.

mis conocimientos de html y js son muy (muy) básicos, no consigo averiguar cómo utilizar correctamente L.mapbox.legendControl para añadir una leyenda a un mapa L.mapbox.map.

Estoy usando mbtiles-server.php para servir .mbtiles creados en tilemill. Esto es lo que funciona:

//create map, centered on papua
  var map = L.mapbox.map('map', 'server/mal.tilejson').setView([-6, 140], 6);

esto crea un mapa con la capa de mosaico y la capa de cuadrícula (hover tooltips), así como la leyenda.

No he conseguido crear un mapa vacío y añadir capas con sus leyendas:

//create map, centered on papua
  var map = L.mapbox.map('map').setView([-6, 140], 6);

//baselayer
  var srtm = L.mapbox.tileLayer('server/neuguinea_zl3-14.tilejson', {
                        maxZoom: 14,
                }).addTo(map);

//overlay
 var malgroup = new L.LayerGroup();
 var malariatile = L.mapbox.tileLayer('server/mal.tilejson').addTo(malgroup);
 var malariagrid = L.mapbox.gridLayer('server/mal.tilejson').addTo(malgroup); 
 map.addControl(L.mapbox.gridControl(malariagrid));

//create baselayers and overlays
var baseLayers = {
  "SRTM v3": srtm
  };
var overlay = {
  "Malaria": malgroup
  };

//add layer control
 L.control.layers(baseLayers, overlay).addTo(map);

// create legend
  map.addControl(L.mapbox.legendControl());

Esperaba que map.addControl(L.mapbox.legendControl()); activara la leyenda de la superposición automáticamente, pero no lo hace.

Gracias por investigar esto.

Answer 1

Creo que su línea map.addControl(L.mapbox.legendControl()); debe escribirse como: map.legendControl.addLegend(legend); Si miras los datos json analizados por tu cadena url 'server/neuguinea_zl3-14.tilejson' (introduce la url en la barra de direcciones de tu navegador) deberías ver que 'legend' es uno de los elementos del array que se analiza.

Comprueba también el depurador de tu navegador (firebug) para ver si hay errores de javascript. Nunca solucionarás los errores de javascript sin comprobar el depurador.

También puede intentar crear su propia leyenda personalizada en su página html. Para insertarla en su mapa utilice algo como:

<div id='my-legend' style='display: none;'>
  <div> legend content... </div>
</div>

<script>
  var map = L.mapbox.map('map');
    ...
  map.legendControl.addLegend(document.getElementById('my-legend').innerHTML);
</script>

Donde 'mi-leyenda' es el id del elemento que contiene el html de tu leyenda