Leaflet error: Object function has no method 'createIcon' when creating custom icon markers in LayerGroup

3
votes

I am creating markers from an XML stream, and setting custom icons in them. I want to have my markers in group layers so that I can support turning all markers of a certain type off. I receive the following error when I add a marker to my map (using GroupLayer) with a custom Icon:

Uncaught TypeError: Object function (){this.initialize&&this.initialize.apply(this,arguments)} has no method 'createIcon'

Example icon

 var ATVIcon = L.Icon.extend({
     iconUrl: './markers/atv.png',
     shadowUrl: '',
     iconSize: new L.Point(27, 17),
     shadowSize: new L.Point(0, 0),
     iconAnchor: new L.Point(22, 22),
     popupAnchor: new L.Point(-3, -76)
 });

Example Layer

var layerATV = new L.LayerGroup();

Adding marker to map or LayerGroup

var thisMarker = new L.Marker(markerLocation, {title: $(this).attr('name')});
    targetLayerGroup.addLayer(thisMarker);
    thisMarker.setIcon(targetIcon);

I have tried adding group layers to map first, then markers to group layers:

  1. Icon vars are instanced
  2. GroupLayer vars are instanced
  3. GroupLayers are added to Map
  4. Marker is created with Icon option
  5. Marker is added to GroupLayer

And I have tried adding markers to group layers first and then adding group layers to map:

  1. Icon vars are instanced
  2. GroupLayer vars are instanced
  3. Marker is created with Icon option
  4. Marker is added to GroupLayer
  5. GroupLayers are added to Map
1
javascriptleaflet

1 Answers

3
votes

When referencing the icons, you need to have parenthesis as you are newing them up rather than just assigning to a variable...

case 'church':
    targetLayerGroup = layerChurch;
    targetIcon = new ChurchIcon();
    break;

As opposed to:

case 'church':
    targetLayerGroup = layerChurch;
    targetIcon = ChurchIcon;
    break;