Use marker icon with only awesome fonts, no surrounding balloon

Question

I have this code that works fine, but I need to get only the icon to show and not the "balloon" with its shadow.

I have tried with removing "markerColor..." but that is only changing to the default blue marker / balloon.

How to only show the icon and its size and color?

pointToLayer: function(feature, latlng) {
  var con = feature.properties.concept;

  var hub;

  // icons for XX, YY and ZZ 
  if (kon === 'XX') {
    hub = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'truck', prefix: 'fa', markerColor: 'cadetblue'}) });
  } else if (kon === 'YY') {
    hub = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'envelope', prefix: 'fa', markerColor: 'blue'}) });
  } else if (kon === 'ZZ') {
    hub = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'bicycle', prefix: 'fa', markerColor: 'darkblue'}) });
  } else {
    hub = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'envelope-o', prefix: 'fa', markerColor: 'red'}) });
  }
  return hub;
}

Answer 1

Unfortunately, Leaflet.awesome-markers plugin does not offer you the option to display only the inner icon (from Font Awesome or whatever source) without the surrounding balloon.

Same for its cloned version and other variations like Leaflet.extra-markers plugin.

But you can very simply use a Leaflet DivIcon instead:

Represents a lightweight icon for markers that uses a simple <div> element instead of an image. Inherits from Icon but ignores the iconUrl and shadow options.

Then you simply fill that <div> container with your Font Awesome icon, the same way you would do it in a normal page, and what the Leaflet.awesome-markers plugin does under the hood for you:

L.marker(latlng, {
  icon: L.divIcon({
    html: '<i class="fa fa-truck" style="color: red"></i>',
    iconSize: [20, 20],
    className: 'myDivIcon'
  })
});

Note that you also have to specify a bit of CSS to customize it as you wish:

.myDivIcon {
  text-align: center; /* Horizontally center the text (icon) */
  line-height: 20px; /* Vertically center the text (icon) */
}

Example:

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

L.marker([48.86, 2.35], {
  icon: L.divIcon({
    html: '<i class="fa fa-truck" style="color: red"></i>',
    iconSize: [20, 20],
    className: 'myDivIcon'
  })
}).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);

.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-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.awesome-markers.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.awesome-markers.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

<div id="map" style="height: 180px"></div>