CODEWITHSUNDEEP
leaflettitlemarker
Claude Viéville
Claude Viéville

Reputation: 19

Leaflet marker - how to write inside the icon of the marker

I'm new with leaflet and i would to determine if it could be an alternative to google maps api.

Most of the things seem to be positive but i would like to know how to write inside the icon of a marker in a simple way. Currently i am just able to write in the attached popup.

Thank you very much for your help

Upvotes: 1

Views: 4714

Answers (3)

Maihan Nijat
Maihan Nijat

Reputation: 9334

The Leaflet icon has L.DivIcon method which allows you to use a simple <div> element instead of an image. You can set your image in the <div> using HTML <img> tag, and include your text using <span> or any other HTML tag.

const icon = new L.DivIcon({
  className: 'icon-div',
  html: `<img src='./assets/images/icons/icon.png'/>
    <span>ABC</span>`,
});

And then set your icon:

const marker = L.marker([field.Latitude, field.Longitude])
  .setIcon(icon)
  .addTo(this.markerGroup);

And your markerGroup goes to layers:

this.layers.push(this.markerGroup);

And then set your layers to the map.

You might need to set styles to align the text on the image properly. The following CSS contains the selectors you need.

.leaflet-popup-content {
  width: 300px;
}
.leaflet-popup-content img {
  width: 80px;
}
.leaflet-marker-icon img {
  width: 60px;
}
.leaflet-marker-icon span {
  position: absolute;
  font-weight: bold;
  font-size: 1.2rem;
  top: 25px;
  left: 5px;
}

Upvotes: 0

HudsonPH
HudsonPH

Reputation: 1868

Easy way:

L.marker(e.latlng).bindPopup("Latitude :" + e.latlng.lat + "<br/> Longtitude :" + e.latlng.lng).addTo(this);

Check the reference on the website:

Represents an icon to provide when creating a marker.

http://leafletjs.com/reference.html#icon

or

Represents a lightweight icon for markers that uses a simple div element instead of an image.

http://leafletjs.com/reference.html#divicon

Upvotes: 1

IvanSanchez
IvanSanchez

Reputation: 19069

Look into L.DivIcon, which allows you to replace marker image with custom HTML.

Upvotes: 0

Related Questions