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.

  • es.davy.ai/
  • Programación /
  • Cómo reemplazar la ventana emergente predeterminada de Mapbox con información personalizada.

Cómo reemplazar la ventana emergente predeterminada de Mapbox con información personalizada.

05 Aug, 2023 Programación

Soy bastante nuevo en ReactJS y estoy trabajando en un proyecto que muestra marcadores en diferentes puntos, con los datos recibidos de un archivo JSON. Actualmente, estoy utilizando ventanas emergentes para mostrar información cuando se hace clic en el marcador, como se muestra a continuación:

//Map.js
geoJson.features.forEach((location, i) => {
      const el = document.createElement("div");
      el.className = "marker";
      var marker = new mapboxgl.Marker(el)
        .setLngLat(location.geometry.coordinates)
        .setPopup(
          new mapboxgl.Popup({ offset: 0, className: "popup" }).setHTML(`
            <div>
              <h1>${location.properties.title}</h1>
              ${location.properties.description}
              <a class="popupbutton" target="_blank" href="${location.properties.link}" rel="noopener">
                <button class="popupbutton">Website Link</button>
              </a>
            </div>
          `)
        )
        .addTo(map);
      marker.getElement().addEventListener("click", () => {
        zoomIn(i);
      });
    });

Como se muestra arriba, la ventana emergente actualmente muestra el título y la descripción de cada marcador, proporcionados por los datos en el archivo JSON. Sin embargo, me gustaría utilizar algo más moderno y versátil para mostrar esta información, como una tarjeta Grommet (<https: v2.grommet.io/card="">), ya que la ventana emergente actual de Mapbox no es muy atractiva. ¿Cómo puedo hacer esto?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para utilizar la tarjeta Grommet para mostrar información en lugar del Popup de Mapbox, deberás modificar el código en tu archivo Map.js de la siguiente manera:

    1. Importa los componentes necesarios de Grommet en la parte superior de tu archivo:
    import { Card, CardHeader, CardBody, Anchor, Button } from 'grommet';
    1. Utiliza el componente Card en lugar del componente Popup al establecer el marcador:
    const el = document.createElement("div");
el.className = "marker";
var marker = new mapboxgl.Marker(el)
  .setLngLat(location.geometry.coordinates)
  .addTo(map);

// Crea un nuevo elemento Card para mostrar la información como un popup
const card = (
  <card background="light" pad="small">
    <cardheader pad="{{" bottom:="" "small"="" }}="">
      <h3>{location.properties.title}</h3>
    </cardheader>
    <cardbody>
      {location.properties.description}
      <anchor href="{location.properties.link}">
        <button label="Enlace al sitio web"></button>
      </anchor>
    </cardbody>
  </card>
);

// Utiliza el método setPopup integrado del marcador de Mapbox para renderizar la Card como un popup
marker.setPopup(
  new mapboxgl.Popup({ offset: 0, className: "popup" }).setDOMContent(card)
);

// Agrega un evento click al marcador para hacer zoom cuando se haga clic en él
marker.getElement().addEventListener("click", () => {
  zoomIn(i);
});

    Con este código, cada marcador mostrará una tarjeta Grommet con el título, descripción y enlace del sitio web de la ubicación cuando se haga clic en él, en lugar del Popup predeterminado de Mapbox. Puedes personalizar el estilo y la disposición de la tarjeta según tus preferencias con las diferentes propiedades de Grommet disponibles.

Comments are closed.