Saltar al contenido

cómo agregar texto para mostrar en el mapa a un objeto geojson en un folleto

La guía paso a paso o código que encontrarás en este post es la solución más sencilla y válida que hallamos a tu duda o dilema.

Solución:

Superposición de etiquetas en el folleto usando la clase Marker y la clase DivIcon con la propiedad ‘html’

Personalmente, uso este método para implementar etiquetas de texto en el mapa. De esta manera, puedo usar todos los métodos y eventos de Marker Class existentes sin ningún esfuerzo adicional. Supongo que es un poco como usar una etiqueta de texto en lugar de un icono.

        var textLatLng = [35.1436, -111.5632];  
        var myTextLabel = L.marker(textLatLng, 
            icon: L.divIcon(
                className: 'text-labels',   // Set class for CSS styling
                html: 'A Text Label'
            ),
            zIndexOffset: 1000     // Make appear above other map features
        );

Mi CSS se parece a:

        .text-labels 
            font-size: 2em;
            font-weight: 700;
            color: white;
            /* Use color, background, set margins for offset, etc */
        

Además, aún no he explorado esto, pero tal vez pueda agregar un png al CSS y luego compensar el texto, de modo que pueda envolver un icono y una etiqueta en el mismo objeto Marker usando la clase Leaflet DivIcon. Esto sería fácil con una forma div (por ejemplo, un cuadro, un círculo), pero no estoy seguro de agregar un png al CSS para el objeto Marker, porque no soy un gurú de CSS de ninguna manera.

Estaba buscando la misma pregunta recientemente y la implementé ayer en función de una publicación en el grupo de Google. https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw

Gracias a Adrian por la muestra del código original.

Aquí está la solución:

Extienda la siguiente clase de la siguiente manera:


Además agregue este css:


Y luego muestre las etiquetas de texto como se muestra a continuación:


Resultado:

ingrese la descripción de la imagen aquí

Sección de Reseñas y Valoraciones

Si conservas algún dilema o disposición de beneficiar nuestro sección puedes dejar una crítica y con deseo lo interpretaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 3.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *