Traté de usar HTML para crear una tabla interactiva de mapas, que puede mostrar varios mapas diferentes de MapBox. Creé una tabla con algunos botones de radio, como:

 <table> <tr> <td> <input type="radio" name="layers" id="layer1" value="2000" checked><label>2000 &nbsp; &nbsp;</label> <input type="radio" name="layers" id="layer2" value="2008"><label>2008 </label> </td> </tr> </table>

Y luego, importé mapas de MapBox por:

 mapboxgl.accessToken = 'mytoken'; //Put your mapbox access token here var map1 = new mapboxgl.Map({ //container: 'map', // container id style: 'mapbox_stylelink', // map background layer location center: [0, 51.5], // starting position [lng, lat] zoom: 10, // starting zoom pitch: 50 // tilt of the viewpoint in degrees }); var map2 = mapboxgl.Map({ //container: 'map', // container id style: 'mapbox_stylelink', // map background layer location center: [0, 51.5], // starting position [lng, lat] zoom: 8, // starting zoom pitch: 50 // tilt of the viewpoint in degrees });

E intente devolver la llamada al oyente:

 document.getElementById("layer1").addEventListener("click", function(){ document.getElementById("map") = 'map1' }); document.getElementById("layer2").addEventListener("click", function () { document.getElementById("map") = 'map2' });

Cuando empiezo a poner en marcha el código, simplemente no puede cambiar el mapa haciendo clic en el botón de 'radio' en la tabla. Sé que hay algo mal con la devolución de llamada, pero no sé cómo corregirlo. Y también parece que el contenedor debería estar vacío al definir un nuevo mapa. ¿Puede alguien darme alguna orientación? ¡Muchas gracias!