mapbox con marcadores y casillas de verificación - desactivar todos los de mostrar en la carga inicial

Question

Tengo una página que construí para mostrar la dirección/velocidad del viento en varios lugares a lo largo de un sendero para bicicletas: http://microflush.org/cgi-bin/pathInfo.cgi

Tengo varios marcadores en una leyenda, con casillas de verificación para activar/desactivar su aparición en el mapa.

Mi objetivo es que NINGUNO de los marcadores comprobables aparezca en la carga inicial. Sin embargo, cuando la página se carga por primera vez, TODOS aparecen aunque no estén controlados. Si selecciono 1, desaparecen todas excepto la que he seleccionado, que luego desaparecerá si desmarque esa caja.

¿Hay alguna forma de hacer que todos sean invisibles al principio y sólo aparezcan si están seleccionados?

(Puede consultar la fuente del enlace anterior para ver el código. No estaba seguro de si debía publicar todo eso, ya que es un poco largo con todos los puntos que he añadido).

Answer 1

Usted tiene un par de errores en su código, uno específicamente podría ser su problema.

En el change se llama a la función setFilters (línea 79, en las herramientas para desarrolladores de Chrome) antes de map en la línea 103. También se encuentran en dos <script> lo que significa que la elevación variable no te salva/enmascara el problema. Usted necesita mover este bloque de código a la parte inferior de todo su código, por lo que toda su capa se inicializa antes de filtrar.

Sugerencia:

Puede utilizar un addLayer / removeLayer en lugar de enmascarar en función del tipo de marcador. Es más claro lo que está haciendo, y ¿qué pasa si usted tiene más de una capa que desea utilizar el símbolo en?

Utilice el valor de sus casillas de verificación para el estado de visualización de la capa y utilice el id del elemento para almacenar el nombre de la capa.

Cuando cambie, comprueba el valor: ¿está marcado o no? Si está marcada, entonces, addLayer con el id de la casilla de verificación como argumento; si el valor es sin marcar, entonces removeLayer con el elemento id como argumento.

No lo he probado:

function change() {
    // Loop through checkboxes
    for (var i = 0; i < checkboxes.length; i++) {
        // Check to see if the layer needs to be added or removed.
        if (checkboxes[i].checked) {
            map.addLayer(window[checkboxes[i].id]);
        else {
            map.removeLayer(window[checkboxes[i].id]);
        }
    }
}

Ahora te has librado de una lista que sólo transporta información. Tu función es descriptiva y concisa sobre lo que hace.