I want to display the tooltip centered (inside) of the marker.
I want to display a count for each marker (first -> last) and I've found out I could do that with tooltip (Any better suggestions)
so my marker looks like this now,
var marker = L.marker(latlng, {icon: blueIcon}).bindTooltip(feature.properties.count,
{
permanent: true,
direction: 'right'
});
I couldn't find any further documentation on direction centered
or similar.
The tooltip provides the functionality to see which was the first and last marker however it seems not to be best practice.
So my questions:
Current:
wanted:
(Here I would make the background invis so I could just see the text.)
I've found out you could add direction: center
.
Ref: http://leafletjs.com/reference-1.0.0.html#tooltip-direction
I've solved my problem with DivIcon
var numberIcon = L.divIcon({
className: "number-icon-default",
iconSize: [25, 41],
iconAnchor: [10, 44],
popupAnchor: [3, -40],
html: feature.properties.count
});
with the css like
.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;
}
Is there a better solution than tooltip?
Not necessarily "better" (which depends on your exact requirements), but a more simple solution would be to use a Marker Icon with some HTML text in it.
Many Leaflet plugins can provide you with such feature, e.g. 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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<!-- Leaflet.extramarkers assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/assets/css/leaflet.extra-markers.css" />
<script src="https://unpkg.com/[email protected]/src/assets/js/leaflet.extra-markers.js"></script>
<div id="map" style="height: 200px"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With