2

Problem with adding icon to layer control.

CSS:

.fa-b:before {
        font-family: Courier;
        font-weight: bold;
        content: 'B';
    }

JS:

var geojsonLayer = new L.GeoJSON.AJAX("https", {
        pointToLayer: function(feature,yx){
          var marker = new L.marker(yx, {
            icon: L.AwesomeMarkers.icon({
              icon: 'fa-b',
              markerColor: 'cadetblue',
              prefix: 'fa'})});
          return marker;}
      });

var clusterGroup = new L.markerClusterGroup();
      geojsonLayer.on('data:loaded', function() {
      clusterGroup.addLayer(geojsonLayer);
      map.addLayer(clusterGroup);
      })


var groupedOverlays = {
        "Group": {
          '<icon class = fa-b > B': clusterGroup
        }}

1 Answer 1

3

The signature for Leaflet Layers Control is a single level dictionary:

var overlays = {
  'HTML name to be displayed': leafletLayer
};

The syntax for Font Awesome icons is:

<i class="fas fa-icon-name"></i>

For example:

var layer = L.marker([48.86, 2.35]).addTo(map);

L.control.layers(null, {
  '<i class="fas fa-bus"></i>': layer
}).addTo(map);

Live example: https://plnkr.co/edit/Se17LxLjqGg6sJTYNCoq?p=preview

Of course you do not necessarily have to use Font Awesome.

Your custom class seems to work fine, once you correct how you specify your overlays: https://plnkr.co/edit/NCUhg9Hrkh1q5EC3wvWU?p=preview

6
  • This is great but I have costume markers in the CSS (see above) which I would like to use in the layer control.
    – Wanda
    Mar 4, 2018 at 14:34
  • Read the end of the above answer. If it does not fit your need, please clarify your question.
    – ghybs
    Mar 4, 2018 at 16:27
  • I understand it. But I am looking to use the map marker icon with the specific letter (that is used on the map) in the layer control.
    – Wanda
    Mar 4, 2018 at 18:05
  • There is no "fa-b" icon in Font Awesome, as you seem to use on your marker since you have "fa" as prefix. Please clarify your question if you want further help. Adding some screenshots and sketch of what you are trying to achieve would surely help, instead of throwing some code with little explanation of your objective.
    – ghybs
    Mar 5, 2018 at 4:20
  • I have managed to achieve it with screenshots and image insertion what I was after, but was wondering whether there was an easier method. Here is the example map: thamesestuarypartnership.github.io/barriers/barriers.html
    – Wanda
    Mar 5, 2018 at 10:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.