CODEWITHSUNDEEP
javascriptcssleafletfont-awesome
RSA
RSA

Reputation: 1449

How to use font awesome as an icon in leaflet instead of marker

In this code, I was using data[key].category to indicate related Icon as the marker. but I want to replace it with font-awesome icons to make it light-weight on runtime in some places may load over tens of icons as the markers

var Cofee= Leaflet.icon({
      iconUrl: '/img/Coffee.png',
      shadowUrl: '/img/pale-shadow.png',
      iconSize: [34, 49], 
      shadowSize: [49, 49],
      iconAnchor: [5, 62],
      shadowAnchor: [4, 62],
      popupAnchor: [12, -30]
});
var Store= Leaflet.icon({
      iconUrl: '/img/Store.png',
      shadowUrl: '/img/pale-shadow.png',
      iconSize: [34, 49], 
      shadowSize: [49, 49],
      iconAnchor: [5, 62],
      shadowAnchor: [4, 62],
      popupAnchor: [12, -30]
});
..
..
..

this.Getlatlng(currentlatlng, 9000).then(data => {
    for (var key in data) {
        Leaflet.marker(data[key].location, { icon: data[key].category })      
         .addTo(this.map).bindPopup('<h4>'+data[key].caption+'</h4>');
          markers.push([data[key].location.lat,data[key].location.lng]);
}

Upvotes: 13

Views: 19098

Answers (3)

vee
vee

Reputation: 4755

Thanks to @kboul about divIcon.

From Leaflet document about divIcon.

You can use just className from FontAwesome.

const markerIcon = L.divIcon({
    className: 'fa fa-solid fa-location-dot fa-2xl',
    iconSize: [18, 26],
    popupAnchor: [0, -21],
});

From code above, the most important part is className.
The iconSize is for make pointed tip (bottom) of the marker to be best match on [latitude, and longitude].

The popupAnchor (x, y) y is set to -21 because I would like its pointed tip of popup to be from top of marker but down below about 5 pixels. (26 - 5 = 21 but value is related to iconAnchor which is already center. So, the value must be minus.).

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


const markerIcon = L.divIcon({
    className: 'fa fa-solid fa-location-dot fa-2xl',
    iconSize: [18, 26],
    popupAnchor: [0, -21],
})
var marker = L.marker([51.5, -0.09], {
    icon: markerIcon,
}).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
body {
    margin: 0;
}
#map {
    height: 100vh;
    width: 100vw;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>

Upvotes: 0

Gigi Gerow
Gigi Gerow

Reputation: 41

kboul's answer is a really nice simple solution that worked for me. Furthermore...here is how I then applied the code to the use of geojson point data. In this case, I am using the geojson in an overlay map.

var clinics = L.geoJson(clinicData, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, { icon: fontAwesomeIcon });
  },
});

Upvotes: 2

kboul
kboul

Reputation: 14580

You can use font-awesome icons instead of built-in marker icons like this:

const fontAwesomeIcon = L.divIcon({
    html: '<i class="fa fa-map-marker fa-4x"></i>',
    iconSize: [20, 20],
    className: 'myDivIcon'
});

L.marker([51.5, -0.09],{ icon:  fontAwesomeIcon}).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')


const map = L.map('mapid').setView([51.505, -0.09], 8);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

const fontAwesomeIcon = L.divIcon({
  html: '<i class="fa fa-map-marker fa-4x"></i>',
  iconSize: [20, 20],
  className: 'myDivIcon'
});

L.marker([51.5, -0.09], {
    icon: fontAwesomeIcon
  }).addTo(map)
  .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
#mapid {
  height: 100vh;
}

body {
  margin: 0px;
}

.leaflet-popup-close-button {
  display: none;
}

.myDivIcon {
  text-align: center;
  /* Horizontally center the text (icon) */
  line-height: 20px;
  /* Vertically center the text (icon) */
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<div id="mapid"></div>

Upvotes: 27

Related Questions