Quiero mostrar la información sobre herramientas centrada (dentro) del marcador.

Fondo

Quiero mostrar un recuento para cada marcador (primero -> último) y descubrí que podría hacerlo con información sobre herramientas (alguna sugerencia mejor)

Entonces mi marcador se ve así ahora,

var marker = L.marker(latlng, {icon: blueIcon}).bindTooltip(feature.properties.count, 
                    {
                permanent: true, 
                direction: 'right'
            });

No pude encontrar más documentación sobre la dirección centered o similar.

La información sobre herramientas proporciona la funcionalidad para ver cuál fue el primer y último marcador, sin embargo, no parece ser la mejor práctica.

Así que mis preguntas:

  • ¿Existe una solución mejor que la información sobre herramientas?
  • ¿Cómo puedo mostrar el recuento centrado en el marcador?

Ejemplo

Actual: ingrese la descripción de la imagen aquí

Querido: ingrese la descripción de la imagen aquí

(Aquí haría que el fondo sea invisible para poder ver el texto).

5
0x45 14 feb. 2018 a las 12:52

2 respuestas

La mejor respuesta

Descubrí que podrías agregar direction: center. Ref: http://leafletjs.com/reference-1.0.0.html# dirección de información sobre herramientas

Resolví mi problema con DivIcon

var numberIcon = L.divIcon({
                    className: "number-icon-default",
                    iconSize: [25, 41],
                    iconAnchor: [10, 44],
                    popupAnchor: [3, -40],
                    html: feature.properties.count        
              });

Con la css como

    .number-icon-default
{
    background-image: url("#{request.contextPath}/lib/leaflet/images/marker-icon.png");
    text-align:center;
    color:Black;   
    text-shadow: 1px 1px #000000;
    font-size: large;
    font-weight: bold;
}

Resultado

enter image description here

2
0x45 14 feb. 2018 a las 11:41

¿Existe una solución mejor que la información sobre herramientas?

No necesariamente "mejor" (que depende de sus requisitos exactos), pero una solución más simple sería utilizar un icono de marcador con algo de texto HTML en él.

Muchos complementos de folletos pueden proporcionarle dicha función, p. Ej. Leaflet.extra-markers:

var map = L.map('map').setView([48.86, 2.35], 11);

var redMarker = L.ExtraMarkers.icon({
  number: '42',
  icon: 'fa-number',
  markerColor: 'red',
  shape: 'square',
  prefix: 'fa'
});

L.marker([48.86, 2.35], {
  icon: redMarker
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.extramarkers assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-extra-markers@1.0.6/src/assets/css/leaflet.extra-markers.css" />
<script src="https://unpkg.com/leaflet-extra-markers@1.0.6/src/assets/js/leaflet.extra-markers.js"></script>

<div id="map" style="height: 200px"></div>
2
ghybs 14 feb. 2018 a las 10:27