es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo establecer una condición en un bloque setHTML? (Popup de Mapbox)

19 Jul, 2023 Programación

Estoy utilizando mapbox-gl-js en un sitio web de craftcms.
Este es un bloque de script dentro de una plantilla Twig.

Estoy mostrando marcadores con datos a través de un geoJSON con algunas propiedades ->

"properties": {
    ...
    "phoneNumber": locationPhone[k],
    "faxNumber": locationFax[k],
    ...
}

Al hacer clic, los marcadores muestran una ventana de información con algunos datos del geoJSON a través de setHTML.

new mapboxgl.Popup()
    .setHTML(`
    ...
    <li class="phoneNumber">
       <span class="green">Tel.</span> <span class="display-phone">${myCustomLayers.properties.phoneNumber}</span>
    </li>
`)

Así que en este punto, tenemos variables (¿PHP?) en un setHTML en una etiqueta de script en una plantilla Twig.

¿Cómo podría establecer una condición alrededor de la etiqueta li para que se muestre solo si locationPhone[k] o ${myCustomLayers.properties.phoneNumber} está establecido?

He llegado tan lejos con conocimientos limitados, temo haberlo hecho mal y ahora no puedo verificar esta propiedad.

Edit: Si alguien necesita esto, las variables proporcionadas por ARCGIS son objetos geoJson, se pueden acceder de la siguiente manera:

if (myCustomLayers.properties.faxNumber === undefined) {
    document.getElementsByClassName("faxNumber")[0].style.display = "none";
}
if (myCustomLayers.properties.phoneNumber === undefined) {
    document.getElementsByClassName("phoneNumber")[0].style.display = "none";
}
console.log(myCustomLayers.properties.phoneNumber)

Finalmente lo resolví. Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar condicionalmente el elemento <li> phoneNumber, puedes usar una declaración if con la prueba is defined de Twig. Puedes verificar si la propiedad locationPhone[k] o myCustomLayers.properties.phoneNumber está definida usando esta prueba y agregar o eliminar el elemento <li> en consecuencia. Aquí tienes un ejemplo de cómo hacerlo:

    new mapboxgl.Popup()
  .setHTML(`
    <ul>
      {% if myCustomLayers.properties.phoneNumber is defined or locationPhone[k] is defined %}
        <li class="phoneNumber">
          <span class="green">Tel.</span> <span class="display-phone">${myCustomLayers.properties.phoneNumber ? myCustomLayers.properties.phoneNumber : locationPhone[k]}</span>
        </li>
      {% endif %}

      {% if myCustomLayers.properties.faxNumber is defined or locationFax[k] is defined %}
        <li class="faxNumber">
          <span class="green">Fax.</span> <span class="display-fax">${myCustomLayers.properties.faxNumber ? myCustomLayers.properties.faxNumber : locationFax[k]}</span>
        </li>
      {% endif %}
    </ul>
  `)

    En este ejemplo, estamos verificando si tanto myCustomLayers.properties.phoneNumber como locationPhone[k] están definidos usando la prueba is defined. Si alguna de estas propiedades está definida, mostramos el elemento <li> con la información del número de teléfono. También realizamos la misma verificación para la información del número de fax.

    Dentro del elemento <span>, estamos utilizando un operador ternario para mostrar la propiedad myCustomLayers.properties.phoneNumber, si está definida, o el valor del array locationPhone[k], si está definido. De esta manera, nos aseguramos de mostrar siempre un número de teléfono válido, incluso si falta una de las fuentes.

    Ten en cuenta que también estamos utilizando la prueba is defined para verificar la propiedad faxNumber, en caso de que falte en los datos geoJSON actuales.

    ¡Espero que esto sea de ayuda!

Comments are closed.