1

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
        }}
2

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

  • 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 '18 at 14:34
  • Read the end of the above answer. If it does not fit your need, please clarify your question. – ghybs Mar 4 '18 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 '18 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 '18 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 '18 at 10:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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